🖲️ 👩🏿‍💻 🎠 レスポンシブメール 🎒 👨🏾‍🔬 🏬

今日、ユーザーはモバイルデバイスでメールを読むことが増えています。電話で大きなHTMLメールを表示するのはどうですか？一般的に、読書は非常に不便になります。したがって、メールは応答する必要があります。

準備する

まず、適応型電子メールの主な機能を定義します。

簡潔で簡潔なコンテンツ：小さな画面では、使用可能なスペースを効果的に使用することがより重要です。
1つの列：携帯電話の画面では、コンテンツをいくつかの列に分割しないでください。
手紙の簡単な件名：短いヘッダー付きの手紙は、受信トレイで他の多くの中で際立っています。
大きな「行動を促す」ボタン： Apple iOSヒューマンインターフェイスガイドラインでは、ボタンを少なくとも44×44ピクセルにすることを推奨しています。
正しいフォント：テキストはどのデバイスでも読めるはずです。
プリヘッダー：手紙の最初のテキストは、可能な限り内容を反映する必要があります。
左揃えのテキスト：ほとんどのユーザーは、画面の左側により注意を払っています。さらに、一部のオペレーティングシステムではメッセージが完全に表示されない場合があるため、コンテンツは左揃えにする必要があります。
垂直階層：行動を促すボタンを含む最も重要な情報は、メッセージの上部に配置する必要があります。
最小画像：ユーザーは大きな写真を文字で見ることを期待していません。さらに、多くは画像表示を無効にしています。

開始する

HTML文字は、通常の単純なHTMLページとは構造がわずかに異なります。たとえば、CSSスタイルはマークアップに直接記述する必要があります。さらに、一部のメールクライアントは、headタグ内のCSSスタイルを完全に無視します。便宜上、適切なHTMLマークアップを持つ特別なテンプレートを使用できます。たとえば、 HTML Email Boilerplate 。

Doctype

HotmailとGmailは、XHTML 1.0コードに強制的にdoctypeを追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ビューポートとメディアクエリ

モバイルデバイスで正しく表示するには、ビューポートメタタグを使用します。残念ながら、Blackberryでは機能しません。

また、コンテンツタイプのタイトルタグを定義することをお勧めします。多くのメールクライアントはこれを無視しますが、手紙の「ブラウザバージョン」を忘れないでください。また、CSSを追加して、表示オプションを自分で設定することもできます。

 <head> <meta name="viewport" content="width=device-width, initial scale=1.0"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Email subject or title</title> <style type="text/css"> .ExternalClass {width:100%;} img {display: block;} </style>

メディアクエリを追加するときに、displayを使用して非表示クラスで要素を非表示にします。画面の幅が600ピクセル未満の場合はなし：

 @media only screen and (max-width: 600px) { table[class="hide"], img[class="hide"], td[class="hide"] { display:none!important; } }

これは、レイアウトレスポンシブメールの標準的なアプローチです：頭の中でCSSを書き換えます！重要です。この場合、GMailは頭のスタイルを無視します。したがって、コンテンツがどこにでも正しく表示されるようにする必要があります。メディアクエリを使用して、コンテンツでブロックの幅を制限することもできます。

 @media only screen and (max-width: 600px) { table[class="content_block"] { width: 92%!important; } }

ボタン

レターを読んだ後、ユーザーは何らかのアクションを実行するのが理想的です。したがって、「行動を促す」要素の役割は非常に重要です。ボタンは大きくて見えるようにし、可能であれば文字の上部に配置する必要があります。

残念ながら、レターのボタンに対する単一のクロスプラットフォームソリューションはありません。 1つのオプション：

 @media only screen and (max-width:600) { a[class="button"]{ display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-align: center; text-decoration: none!important; } }

さて、非常に簡単な方法は通常のリンクです。ただし、タッチスクリーンを備えたデバイスでの操作性は同時に低下します。

 <a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

記事に記載されている例をダウンロードしてください。

ゴム文字

文字のアダプティブレイアウトの代わりに、通常のゴムを使用できます。これははるかに簡単で、メールはどこにでも正しく表示されます。ただし、この場合、多くの欠点があります。まず、デバイス画面の幅によっては文字の要素を移動できないという事実により、使いやすさが大幅に低下します。したがって、ゴムのレイアウトは私たちの方法ではありません！

レスポンシブ電子メールの例

応答性の高いメールが大画面やモバイル画面にどのように表示されるかを示す良い例を次に示します。

おわりに

プラットフォーム、デバイス、および画面には多数の種類があるため、適応型電子メールのレイアウトのための普遍的なソリューションを作成することは非常に困難です。上記のすべてをまとめると、「シンプルさが文字の使いやすさの鍵です」という簡単なルールに到達できます。

レスポンシブメール