現在、ホストされているモバイルバージョンとの「モバイルとして表示」リンクを持つ複数のデスクトップバージョンのニュースレターを送信していますが、ユーザーがメールを開いたときにモバイルバージョンを表示するためのオプションを模索しています。
内部スタイルシートを使用して、次のコードのバリエーションを持つレスポンシブデザインについて読みました
@media screen and (max-width : 320px), screen and (max-device-width: 320px)
しかし、http：//www.campaignmonitor.com/css/によると、すべてのESPが内部スタイルシートを許可または読み取るわけではありません。要するに、上記のコードを使用してレスポンシブメールを送信する良い方法はありますか、それともサポートがないために実行可能ではありませんか？
Andy の「メール クライアントは CSS のサポートが苦手」に同意します。これは一般的なルールであり、何年も前からあります。
とは言っても、モバイル メール クライアントについて話すとき、MS Outlook '95 を実行している電話はありません。
電子メール対応のスマートフォン デバイスの市場内訳を見ると、サポートがデスクトップの世界よりも高い割合で存在することがわかります。
当社では、毎週のメールの読者の 50% 以上がiPhone だけです。これには、デスクトップ Gmail、Hotmail、Outlook などが含まれます。モバイルの使用が私たちの焦点となる傾向が続いており、デスクトップは 2 番目の役割を担っています。
モバイル Web サイトを使い果たして構築しているわけではありませんが、モバイル フレンドリーになるようにメールを調整しています。例: Everguide ウィークリー ガイド メール
したがって、CSS に関しては、メディア クエリが正しく読み取られ、解釈されることを確認することは、現時点では非常に困難です。
Android は iOS のようにボール遊びを好まないことがわかりましたが、いくつかの優れた調整とコード ハックにより、そこにたどり着いています。
これは、トランザクション メール テンプレートの 1 つの例です。幅は 520 ピクセルに制限されていますが、さまざまなデバイスではデバイスの幅などに合わせて調整されます。
これを正しく行うには、テストと忍耐が必要です。次のプロジェクトでは、Campaign Monitor のこの新しいガイドを使用してゼロから始めます。Campaign Monitor's guide to Responsive Email Design
Adobe Shadow (これは最近名前が変更されたと思います) とさまざまなオンスクリーン エミュレーターを使用して、コードがあらゆる段階で真に応答することを確認しながら、少しずつ構築していきます。
もし私があなたなら、最初に自分の「ボイラープレート」を明確にし、これを保存してから、今後のすべての電子メール デザインをこのテンプレートから作成します。
私はこれを専門としていますが、まだ実証済みの真の方法はありません。
幸運を！
レスポンシブ メールを作成する際の問題は、多くのクライアントがスタイル タグを無視するだけであり、実際のレスポンシブ メールを作成する方法がないことです...
しかし、トリックがあります... ;)
モバイル ファーストの方法で電子メールを作成できるため、基本的な html はモバイル バージョンです。元のデスクトップ バージョンを「再作成」する方法でメディア クエリを作成すると、良い解決策が得られます。クライアントがメディア クエリを無視すると、モバイル バージョンが表示されます。
私が言及した方法で機能する素晴らしいテンプレートを見つけました。ここで見つけることができます: http://internations.github.io/antwort/
一般に、電子メール クライアントは (いくつかの理由で) css をサポートするのが苦手なので、CSS を使いすぎないようにすることをお勧めします。そうは言っても、 http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emailsでサポートテーブルを見つけることができます.CSSを使用して、サポートしていないクライアントを罰するのではなく、サポートするクライアントを徐々に強化してください.