レスポンシブメールデザインガイド：さまざまなデバイスにメールを完璧に紹介する

コアポイント

• 電子メールの読み取りでモバイルデバイスが人気を博しているため、レスポンシブメールレイアウトはモバイルデバイスの特性を考慮する必要があります。これには、メールコンテンツを再配置し、元々水平に配置されたセルをモバイルデバイスに垂直に配置する必要があります。
• シングルコラムメールレイアウト（通常、単一のタイトル畫像を含む）は、再配置要素を必要とせず、デバイスのサイズに合わせて幅を調(diào)整するだけです。これは、レスポンシブデザインではなく、スケーラブルなデザインです。
• マルチコラムメールレイアウトは、デバイスの幅が減少するにつれて列を再配置する必要があります。これは、ネストされたテーブルを使用するか、テーブルセルのdisplayプロパティを変更することで実現(xiàn)できます。後者はよりエレガントで、ネイティブCSSルールを使用しています。
レスポンシブ電子メールの畫像には、古典的なレスポンシブテクノロジーのみが必要です（
• ）。ただし、メディアクエリを使用すると、1つの畫像を非表示にすることができ、代わりに別の畫像を背景畫像として使用できます。 img {max-width: 100%;}

寫真が提供する寫真：Fishbulb1022

プレスリリースの執(zhí)筆に関する以前の記事では、さまざまなクライアントにメールがどのように表示されるかを大きく変えることができるヒントをいくつか學(xué)びました。

さらに、電子メールの読み取りでますます使用されるモバイルデバイスを考慮する必要があります。これにより、電子メールのレスポンシブレイアウトを構(gòu)築する問題が発生します。

メールテンプレートはHTMLテーブルで構(gòu)築されており、インラインCSSを持っていることがわかっているため、私たちの作業(yè)は通常よりも少し複雑です。

インラインCSSルールには、特異性値が高い（常に勝ちます）。

テーブルはレイアウトの組み合わせ用に設(shè)計されていないため、電子メールの組み合わせに注意を払う必要があり、セル（自然水平位置）はモバイルデバイスに垂直に配置する必要があることを覚えておく必要があります。

• もちろん、JavaScriptを使用することはできません。
幸いなことに、ほとんどのモバイルデバイスは最新のCSSルールとの互換性が高いため、これらの問題のすべてをメディアクエリで簡単に解決し、多くの
• 宣言を使用して（インラインスタイルをオーバーライドするため）、配置に注意を払うことができます。慎重に內(nèi)容の。

このようなプロジェクトでは、「モバイルファースト」アプローチを採用して、小さなデバイスでは正しく配置できないレイアウトを避けることが重要です。

!importantこの記事でさえ、私たちは応答性のある問題についてのみ議論していることに注意してください、レスポンシブモバイルメールは必ずしも良いメールではありません。効果的なモバイルメールデザインには、フォントサイズ、レイアウトの組み合わせなど、多くの要素が含まれます。これらは非常に重要なタスクであり、別の記事で説明します。

メールレイアウトモード

応答性については、1つの列と複數(shù)の列の2種類のメールを識別できます。

単一列のレイアウト

シングルコラムレイアウト（通常は1つのタイトル畫像のみ）には特別なニーズがありません。要素を再配置する必要はないため、すべての幅がデバイスサイズに合わせてエレガントに格下げされていることに注意する必要があります。これはレスポンシブなデザインではなく、スケーラブルなデザインの典型的な例です（スケーラブル、流體、またはレスポンシブを參照：メールの移動方法を理解してください）。

シングルコラムレイアウト

メールが正しくサイズ変更されるようにするには、テーブルの幅を調(diào)整するだけです。

また、畫像を変更する必要があります（この記事の最後にある「畫像について」段落を參照）。フォントのサイズを変更しますが、他の特別なニーズはありません。

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

マルチコラムレイアウト

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

マルチコラムレイアウトでは、デバイスの幅が減少するにつれて、列の再配置が必要です。 2つ、3つ、またはそれ以上の列を使用する場合でも、水平方向ではなく垂直に表示する必要があります。

これを達(dá)成するための2つの簡単な方法があります：

ネストされたテーブルを使用して

テーブルセルの

プロパティを変更します。

ネストされたテーブルレイアウト
2. display電子メールの組み合わせでは、通常、ネストされたテーブルを使用する必要があります。これは常にクライアントの互換性を確保するための最良の方法と見なされますが、一方で、生成されたコードは非常に混亂しており、実際に読みにくいです。
秘trickは、

屬性を使用することです。これにより、テーブルが水平に整列されます。

各要素には

固有の

幅が必要であり、その合計はコンテナ値と同じでなければなりません。

table align="left"

デバイスの幅が減少すると、コンテナをサイズ変更し、すべてのテーブル列を100％の幅に強(qiáng)制する必要があります。

この手法により、ほとんどのクライアントとの互換性が保証されます。Litmusでデモファイルをテストし、すべてのクライアントが良い結(jié)果を得て、次の警告を許可します。 Outlook 2007、2010、および2013（Outlookのバージョンは、Microsoft Wordをレンダリングエンジンとして使用します

ロータスノートの最古のバージョン

gmail androidアプリ。

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

これは良い出発點(diǎn)です（テストの結(jié)果の一部については以下を參照）、このテストは空のテーブルで構(gòu)築されていることも考慮する必要があります。すべてのエラーを修正し、このテクノロジーをすべてのクライアントで適切に機(jī)能させます。

litmus互換性テスト結(jié)果の一部

テーブルセルの表示プロパティを変更します

マルチコラムメッセージを構(gòu)築する2番目の方法は、よりエレガントで、ネイティブCSSルールを使用します。

この手法では、デバイスの幅が縮小されたときにデフォルトのテーブルセルの

プロパティを変更することが含まれます（ResponsiveEmailpatterns.comで多くの例を見つけることができます）。これにより、細(xì)胞が垂直に再スタックされます display

ディスプレイプランを変更

このテストの結(jié)果は非常に優(yōu)れています。すべてのクライアントがテストメールを正しくレンダリングします（微妙なエラーがある場合があります）が、空のメールを試したことがあり、コンテンツを追加すると結(jié)果が異なる場合があることを忘れないでください。

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

畫像について

レスポンシブメールでは、畫像には現(xiàn)在Webで使用されている古典的なレスポンシブテクノロジーのみが必要です（

）。

ただし、キャンペーンモニターのレスポンシブメールデザインガイドで提案されているように、メディアクエリを使用して、1つの畫像を非表示にして、背景畫像として別の畫像に置き換えることができます。 img {max-width: 100%;}

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

CSSを介して隠された畫像でさえクライアントにロードされることを忘れないでください。これに注意してください。

良いオプションは、

タグと

ソースに同じ畫像を使用することです。次の例のように、これらすべての範(fàn)囲で使用するには、

多目的img畫像を準(zhǔn)備する必要があります。 background-image

適切な畫像を選択した後、多くのメディアクエリブレークポイントに使用できます。準(zhǔn)備ができたら、少量のCSSルールを追加する必要があります。

各ブレークポイントビューを調(diào)整するために

屬性を追加することもできます（このルールに対するクライアントのサポートに注意してください）。
殘念ながら、これは高密度デバイスのすべてのニーズを解決する可能性は低いですが、他のすべてのケースにロードされたファイルの數(shù)を減らすことができます。

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

結(jié)論background-size

それで、これまでに1つの、多用途で、最高の応答性の高い電子メール作成テクノロジーがありますか？
通常、答えはノーです。各プロジェクトには異なるアプローチが必要であり、異なる

最良のソリューション

があります。本當(dāng)の答えは、さまざまな有用なテクニックを習(xí)得し、常に新しい方法を試すことです。

リソース

• http://www.miracleart.cn/link/f663b8c9b8331a8c625007b4337601ec
• http://www.miracleart.cn/link/90e08c6d15d206857d4fd54fa2ff334bc
• http://www.miracleart.cn/link/ae04da95f06c3c85934ea84bccc0
• http://www.miracleart.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• http://www.miracleart.cn/link/3d4233a54febe35fbf7749c3affb8e15
• http://www.miracleart.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• http://www.miracleart.cn/link/7006bc554a1a9de85c416551c10368e2

応答性のあるメールの構(gòu)築に関するよくある質(zhì)問

（元のテキストに記載されているFAQセクションはここで省略されています。なぜなら、この部分の內(nèi)容は書き換えが難しく、元のテキストの他の部分よりも長くなっているからです。

以上がレスポンシブメールを構(gòu)築するためのトリックの箱の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。