レスポンシブメール101ウェビナーQ＆A：HTMLとCSSの基本

公開: 2015-03-16

モバイルのオープンが増え続けるにつれて（過去4年間で500％以上増加しました！）、レスポンシブデザインのようなモバイルメール戦略の話もあります。レスポンシブEメール101：HTMLおよびCSSの基本ウェビナーでは、モバイルEメールの状況、レスポンシブEメール作成の基礎、およびこれらの手法がサブスクライバーエクスペリエンスの向上に不可欠である理由について説明しました。また、電子メールクライアントのサポートについても説明し、レスポンシブ電子メールを最初からコーディングする方法を示しました。

できませんでしたか？心配しないでください。全部録音しました！さらに、スライドも利用できるようにしました。

スライドを入手+記録→

ウェビナーのための家がいっぱいだったので、質疑応答の部分でできるだけ多くの質問に答えようとしましたが、すべてに答えることはできませんでした。以下に、最もよくある質問のいくつかをまとめました。

レスポンシブデザインを始める

モバイルオープンの増加は飽和状態に達したと思いますか、それとも今後も増加し続けると思いますか？

過去4年間で、モバイルのオープン数が500％を超えて大幅に増加しましたが、その成長はすでに少し横ばいになり始めています。ただし、モバイルデバイスの急増に伴い、モバイルオープンはゆっくりと増加し続けると考えています。

流動的、適応的、レスポンシブデザインの違いは何ですか？

流体設計は、メディアクエリのない相対的な幅で構成されます。アダプティブデザインは、複数のビューポート/ブレークポイントでの固定幅または相対幅で構成されます。レスポンシブデザインは、複数のビューポート/ブレークポイントでの相対的な幅で構成されます。これらの違いをよりよく理解するのに役立ついくつかの優れたリソースを次に示します。

スケーラブル、流動的、または応答性？モバイルメールアプローチを理解する
固定vs.流動vs.適応vs.レスポンシブ
どのレイアウトですか？静的、液体、適応、または応答性？
Liquidapsive

電子メールクライアントのサポートが最も優れているのは、流動的、適応的、または応答性のどのアプローチですか。

純粋なサポートの観点からは、流動的な電子メールが最高のサポートを提供します。アダプティブデザインとレスポンシブデザインはどちらも、サポートが制限されているメディアクエリを使用する必要があります。

ただし、それは流動的なデザインが電子メールにとって最良のアプローチであることを意味するものではありません。流動的なデザインは、モバイルフレンドリーなバージョンの電子メールを作成するための適切な妥協案ですが、電子メールの全幅のデザインを中核に維持します。それは本当にあなたの特定の聴衆、彼らが彼らの電子メールを開くところ、そしてあなたの加入者の経験を最適化するためのあなたのデザイン戦略に帰着します。

メディアクエリとは何ですか？

メディアクエリ（@media）は、特定のルールセットに対してCSSのセットをトリガーする条件ステートメントです。メディアクエリと電子メールの詳細については、次のリソースを参照してください。

レスポンシブメールデザインのハウツーガイド
HTMLメールのメディアクエリを理解する

レスポンシブデザインがメールに与える影響に関するデータはありますか？

あなたは賭けます！最近、レスポンシブデザインとメールテストがクリックに与える影響について、MailChimpでレポートを作成しました。レスポンシブデザインにより、モバイルユーザーのクリック数が15％増加することがわかりました。

さまざまなサポートと非常に多くの回避策があるため、レスポンシブデザインへの移行は圧倒されるようです。どうすれば始められますか？

現在の電子メールクライアントからのこのような限られたサポートでは、レスポンシブ電子メールの設計を実装するのは難しい場合があります。私たちの最初の推奨事項は、飛び込む前にレスポンシブメールのデザインについて可能な限り自分自身を教育することです。MailChimp、キャンペーンモニター、およびLitmusのリソースをチェックしてガイドを提供することをお勧めします。

レスポンシブメールの実際の開発に慣れていない場合は、単純なドラッグアンドドロップのメールエディタを使用してメールを作成することを検討してください。 StampReady、Canvas、MailChimpなどの製品は、メールコーディングの手間を省きます。

コードに慣れている場合は、メールデザイン専用に構築されたコードエディターであるLitmusBuilderをチェックしてください。最初に基本的なレスポンシブメールテクニックを実装してみてください。レスポンシブデザインをサポートするクライアント（主にAppleデバイス）でメールを開くユーザーに優れたエクスペリエンスを提供します。

また、送信する前に必ずメールをプレビューしてください。 PutsMailを使用して自分宛てにメールを送信したり、Litmusを使用した40を超えるさまざまなメールクライアントでメールがどのように表示されるかを確認したりできます。

レスポンシブメールのデザインに関して質問がある場合やコーディングの問題が発生した場合は、Litmusコミュニティにアクセスしてサポートを受けてください。

レスポンシブフレームワークをお勧めしますか？

はい！ ZURBのレスポンシブフレームワークInkを確認することをお勧めします（注意：このフレームワークでは、Outlook 2007-2013で正しくレンダリングするための回避策が必要です）。 Sassが好きなら、Faust GertzがSassバージョンのInkを作成し、AlexIlhanがZenithと呼ばれるSass電子メールフレームワークを持っています。さらに、CodeSchoolのDanDenneyにはEmayllと呼ばれるすばらしいメールワークフローがあり、BrianGravesにはレスポンシブメールパターンのすばらしいコレクションがあります。

メディアクエリをサポートしていないクライアント向けの最適化

クライアントがレスポンシブデザインをサポートしていない場合、そのクライアントには何が表示されますか？

特にモバイルメールアプリの場合、すべてのメールクライアントでメールのレンダリングが異なります。基本的に、レスポンシブデザインをサポートしていない場合は、全幅の電子メールの一部のバージョンにフォールバックします。「ズームアウト」された全幅バージョンの場合もあれば、拡大された「ズームイン」バージョンの場合もあります。Gmailなどのクライアントが自動的にフォントサイズを大きくして、「モバイルフレンドリー」バージョンのメールを作成する場合もあります。

最善の方法は、送信する前に常にメールをプレビューすることです。 PutsMailを使用して自分宛てにメールを送信したり、Litmusを使用した40を超えるさまざまなメールクライアントでメールがどのように表示されるかを確認したりできます。

Android用のGmailアプリのように、レスポンシブデザインをサポートしていないクライアントのためにレスポンシブデザインにアプローチするための最良の方法は何ですか？どのような種類の「バックアップ」を実施する必要がありますか？

まず、メールをモバイルフレンドリーにすることをお勧めします。これは、最小限のメールコンテンツを用意し、フォントやボタンのサイズを大きくするなど、モバイルのユースケース向けに設計することを意味します。箱から出してすぐに使える1列のデザインにより、Gmailアプリのメールのレンダリングも簡単になります。

高度なコーディング手法に慣れている人にとって、Gmailアプリでメールを作成し、レスポンシブサポートの欠如を説明する最善の方法は、「ハイブリッドコーディングアプローチ」です。基本的にモバイルファーストのアプローチを使用し、いくつかの電子メール固有のハックを使用して、電子メールをデスクトップの幅に拡大します。ハイブリッドコーディングアプローチを実装する方法の詳細については、こちらをご覧ください。

ハイブリッドコーディングアプローチ
ハイブリッドコーディングRedux-水準を上げる
レスポンシブメールデザインで苦労して得た教訓

コードの質問

メディアクエリを別のCSSドキュメントに入れて、そのドキュメントへのリンクを頭に入れることはできますか？

電子メールクライアントのサポートが制限されているため、電子メールにリンクされたスタイルシート（<link>タグ）を使用することはお勧めしません。すべてのスタイルは、電子メールの<head>に埋め込む必要があります。

レスポンシブメールデザインの最も一般的なブレークポイントは何ですか？理想的なブレークポイントはいくつありますか？

iPhoneで最も多くのオープンが発生しているため、メールでブレークポイントの実装を開始することが重要です。これは、新しいiPhone 6Plusの幅である414px以上です。

特定のデザインに「理想的な」ブレークポイントの数はありません。すべては、個々のデザインとサブスクライバーのエクスペリエンスの最適化にかかっています。電子メールをレスポンシブにするために、少なくとも1つのブレークポイントを考慮することが理想的です。

テーブルまたはdivの使用をお勧めしますか？

電子メールの設計では、テーブルベースのレイアウトと構造を使用する必要があります。これは、HTMLの実際の構造と基盤に関連するため、Outlookデスクトップクライアントなどの電子メールクライアントによる<div>のサポートが不足しているためです。一部の電子メールクライアントは<div>をサポートしており、特定のハッキングや回避策、特にレスポンシブ電子メールに非常に強力に使用できます。

メディアクエリを使用して、テーブル内のalign =“ left”またはalign =“ right”属性を変更できますか？それとも、スタイルを変更するためだけですか？

CSSでalignHTML属性を技術的に変更することはできませんが、他の回避策があります。個々のテーブルを空の<div>でラップし、floatプロパティまたはdisplayプロパティを使用してテーブルを入れ替えることができます。 ActionRocketには、この高度な手法の使用に関するすばらしいブログ投稿があります。

レスポンシブメールでは、背景画像のサポートはどのようになっていますか？背景画像を全幅にしたい場合、背景画像を保存するための理想的なサイズはどれくらいですか？

背景画像は、モバイル電子メールクライアントで非常によくサポートされています。背景画像を保存するための「理想的な」寸法はありません。サブスクライバーが電子メールをすばやくダウンロードできるように、常に比較的小さいファイルサイズを使用するようにしてください。 Litmusの画像チェック機能を使用して、画像のダウンロード速度をテストできます。

多くの電子メールクライアントでスタイルを機能させるには、スタイルをインラインにする必要がありますか？

はい。いくつかの電子メールクライアントは、電子メールの<head>、特にGmailのCSSスタイルを削除するため、CSSスタイルのインライン化が電子メールに必要になります。

電子メールのフォントサイズにピクセルまたはemを使用する方が良いですか？

多くの電子メールクライアントはemsをサポートしていないため、電子メールのフォントサイズを定義するにはピクセルを使用することをお勧めします。

メディアクエリを使用して画像を置き換えることは可能ですか？

メディアクエリを使用して背景画像を置き換えることはできますが、インライン画像を置き換えることはできません（ <img>タグ）。

Retinaディスプレイで鮮明にレンダリングされるように画像を最適化するための最良の方法は何ですか？

網膜の場合、通常、画像を最終的な表示の2倍のサイズにします。たとえば、100×100の画像は実際には200×200である必要がありますが、HTML属性またはCSSスタイルを使用して100×100に縮小されます。通常、この手法は、写真などの大きな画像ではなく、鮮明である必要がある小さな画像にのみ使用する必要があります。網膜の設計について、リトマスコミュニティでいくつかの素晴らしい議論があります。

網膜の設計
行動を促すテキストと網膜ディスプレイを含む画像

表示します：なし; またはdisplay：block; レスポンシブメールで作業しますか？

displayプロパティがレスポンシブメールで機能するかどうかではなく、メールクライアントでサポートされているかどうかは問題ではありません。ほとんどのCSSと同様に、サポートされているものとサポートされていないものがあります。特にGmailではサポートされていません。

Webブラウザの「検査要素」に相当する電子メールクライアントはありますか？レスポンシブデザインのトラブルシューティングを行うと便利です。

Webブラウザの「検査要素」に完全に相当するものはありません。ただし、Litmusのインタラクティブテスト機能は非常に役立ちます。また、Litmus Builderには、ワンクリックのテストおよび再テスト機能があり、電子メールの反復を非常に迅速に行うことができます。

それ以外の場合は、WebKitブラウザー（ChromeまたはSafari）でトラブルシューティングすることをお勧めします。モバイルオープンの大部分は、優れたCSSサポートを備えたWebKitで行われるため、WebKitブラウザーでの開発とトラブルシューティングは、これらの電子メールクライアントで発生することを適切に再現しています。

パディングは電子メールクライアント全体で普遍的にサポートされていますか？

パディングは、電子メールクライアント全体でほぼ普遍的にサポートされています。一方、marginプロパティはあまりサポートされていません。パディングを使用することを強くお勧めします。

アラインメントを使用して3つの列を適切にスタックするにはどうすればよいですか？左右に加えて中央揃えを使用する必要がありますか？または、3列のレイアウトを使用することをお勧めしませんか？

はい、レスポンシブメールデザインで3列を積み重ねることができますが、それらを積み重ねたり逆にしたりするためのオプションは、2列のデザインよりも制限されているか、実行が困難です。テーブルの配置は、スタックする方法によって異なりますが、通常は3つのテーブルすべてを左側に配置します。

ActionRocketには、テーブルを逆スタックするための高度なテクニックに関するすばらしい投稿があります。

LITMUS BUILDER

Litmus Builderとは何ですか？

Litmus Builderは、電子メール設計者が電子メール設計者向けに構築した世界初のコードエディタです。メールの作成、編集、共有は完全に無料です。

EmmetはLitmusBuilderに直接組み込まれていますか？

です！私たちのEmmet統合により、簡単なコーディングが簡単になります。

Litmus Builder内のレスポンシブメールテンプレートはどこにありますか？

Litmus Builderには、[テンプレート]セクションに20以上の電子メールテンプレートのギャラリーがあります。すべてのテンプレートは完全に無料で使用できます。 LitmusBuilderの完全なヘルプドキュメントを確認してください。

無料の事前テスト済みレスポンシブテンプレートをお試しください

レスポンシブメールを使用すると、ますますモバイル化するオーディエンス向けにデザインを微調整できます。 Litmus Communityで事前にテストされた無料のテンプレートを多数使用して、電子メールの設計プロセスを簡素化します。

Litmusコミュニティテンプレートの紹介

Litmusの事前テスト済みテンプレートの1つを使用して、次のキャンペーンを開始します。

テンプレートにアクセス→