レスポンシブメールを構築するためのトリックの箱

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

コアポイント

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

写真が提供する写真：Fishbulb1022

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

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

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

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

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

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

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

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

メールレイアウトモード

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

単一列のレイアウト

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

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

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

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

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

</table>

マルチコラムレイアウト

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

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

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

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

テーブルセルの

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

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

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

各要素には

固有の

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

table align="left"

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

この手法により、ほとんどのクライアントとの互換性が保証されます。Litmusでデモファイルをテストし、すべてのクライアントが良い結果を得て、次の警告を許可します。 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;
    }
}

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

litmus互換性テスト結果の一部

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

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

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

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

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

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

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

</table>

画像について

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

）。

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

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

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

良いオプションは、

タグと

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

多目的img画像を準備する必要があります。 background-image

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

各ブレークポイントビューを調整するために

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

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;
    }
}

結論background-size

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

最良のソリューション

があります。本当の答えは、さまざまな有用なテクニックを習得し、常に新しい方法を試すことです。

リソース

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

応答性のあるメールの構築に関するよくある質問

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

以上がレスポンシブメールを構築するためのトリックの箱の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。