レスポンシブなメールデザイン、または冷蔵庫で手紙を読む方法

私たちにとって、ほとんどのソーシャルネットワークに関しては、メールは非常に重要です。 興味深い複雑な技術的タスクの1つは、モバイルデバイスでの文字の正しい表示です。 現在、Badooの手紙の約23％が開かれ、この数は常に増加しています。 または、誰かがインターネット冷蔵庫で私たちの手紙を読んでいるのかもしれません。
今日は、電子メールの開発で従うべきルール、モバイルデバイスでのユーザビリティを保存する方法、およびプロセスで蓄積されたトリックを共有します。

必要条件

どのような問題に遭遇し、どのような要件が書簡に示されていますか：

• 多くの異なる電子メールクライアントとブラウザで文字を正しく表示する必要があります。
• iOSおよびAndriodプラットフォーム上のさまざまなデバイス（大、中、低画面解像度のスマートフォン、タブレットコンピューター）向けに最適化する必要があります。
• Outlook 2003/2007/2010の必須サポートが必要です。 使用の大部分を占めます。
• 別の50文字のテンプレートで使用されるコンポーネントの編集。
• 状況に適応するユニバーサルブロックを作成する必要があります。 文字では、データは動的な構造を持ちます（たとえば、文字は44の言語に翻訳され、ブロックのサイズ、画像、およびテキストサイズが変更されます）。

まず、プロジェクトが対象としているプラ​​ットフォームを特定する必要があります。 過去1年間で、モバイルデバイスでメールを開く割合は15％からほぼ23％に増加しました。


ただし、Outlookなどのデスクトップメールクライアントは、送信するすべてのメールの約18％を開くことを忘れないでください。

これはどのように行われますか？

メールを作成する際に従う基本的なレイアウトルールを考慮してください。

• フレームはテーブル上に構築されています。
• Webバージョンの場合、すべてのCSSプロパティはstyle属性を使用して記述されます。
• モバイルデバイスの電子メールクライアントはCSSクラスを完全に使用します。 例外はGmailです。
• 背景画像の場合、背景属性が適用されます。
  
  

  <td background="" style="background-position: ;"> 

  
  
• 表のセルのインデントを削除するには、次を使用します。
  
  

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

  
  
• 次のようなブロック要素を使用することは推奨されません

   <h1-h5> 
        ,   border="0".           vertical-align: top;  img; 
      CSS- float    html- align=””.      : 
   
   <table align="left"></table><table></table> 

  
  
  テキスト装飾を設定する必要があります：なし。 下線をなくすために、画像が含まれている場合はリンクします。
  条件付きコメント、Outlook 2007/2010のみが理解できる内容：
  
  

   <!--[if gte mso 10]><![end if]--> 

  
  
  Androidプラットフォームでは、テキストサイズが意図したとおりになるように、bodyプロパティ-webkit-text-size-adjust：noneを追加します。
  
  

  メディアクエリ

  
  モバイルデバイス用の電子メールを最適化するための主なツールは、メディアクエリです。 次の表は、メディアクエリと最も一般的なモバイルデバイスとの対応を示しています。
  

  	iPhone 3G、3gs	iPhone 4、4s	iPhone 5	320 * 480	480 * 800	720 * 1280
  最大デバイス幅：480px
  -webkit-device-pixel-ratio：1
  -webkit-device-pixel-ratio：1.5
  -webkit-device-pixel-ratio：2

  
  しかし、メディアクエリをサポートしていないモバイルデバイス上の電子メールクライアントはどうでしょうか。 たとえば、AndroidおよびiOSプラットフォーム用のGmailクライアントは、メッセージからスタイルタグ全体を削除します。 ここでは次の規則が適用されます。これは文字の開発全体の鍵 です。320ピクセルを超える固定幅の要素は使用できません。 文字を「ゴム」にするためには、相対単位を使用することをお勧めします。
  
  

  模様

  
  そのため、レターテンプレートを検討します。
  
  
  
  1.レターのフレームとして、2つの中央タグを使用します。1つは中央揃え用で、2つ目はそのコンテンツの幅を制限します。
  
  

   <center><center style="text-align: {{align}}; max-width: 560px; width: 100%;"> ... </center></center> 

  
  2.レターの幅全体の画像については、画像としてスペーサーを作成しないように、背景画像を含むテーブルタグが使用されます。 Outlook 2007/2010の場合、条件付きコメントで画像を使用します。
  
  

   <table background="" style="padding: 0; border-collapse: collapse; width: 100%;"> <tr> <td style="padding: 0; font-size: 0;line-height:3 px;"> <!--[if gte mso 10]><img src="image" border="0" width="580" height="3"><![end if]--> </td> </tr> </table> 

  
  3.写真の数は、モバイル版とウェブ版で異なります。 どのデバイスでレターが開かれるのかわからないため、5番目からすべての写真に対してm__hiddenクラスを設定します。これにより、モバイルデバイスでユーザーの写真が非表示になります。
  
  4.ボタンは非常に問題のある要素であることが判明しました。 グラデーション付きの角丸長方形の形状をしています。 そして、もちろん、それは高さと幅の両方で伸びるべきです。 色は異なり、文字ごとに個別に作成されます。 これを行うには、コンテナに背景画像または単色を与えます。 ボタンフレームは3つの部分に分かれています。上部のフレームでは、上部のフレームと2つのコーナーが指定されています。 medium-垂直フレームとボタンコンテンツが含まれます。 下部のフレームと2つのコーナーが設定されています：
  
  
  
  

   <table cellpadding="0" cellspacing="0" style="direction: ltr; border-collapse: collapse; font-size: 0; line-height: 0;"> <tr> <td style="padding:1px 0 0 0;"> <table background="{{btn_bg}}" bgcolor="#{{bgcolor}}" cellpadding="0" cellspacing="0" style="border-collapse: collapse; background-repeat: repeat-x;"> <tr> <td width="5"><img src="{{btn_tl}}" border="0" height="5" width="5"></td> <td style="min-width:100%;"> <table style="border-collapse: collapse; width:100%;"><tr> <td style="border-top: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td> </tr></table> </td> <td width="5"><img src="{{btn_tr}}" border="0" height="5" width="5"></td> </tr> <tr> <td colspan="3" style="direction: {{direction}}; text-align: center;"> <table style="border-collapse: collapse; width: 100%;" cellpadding="0" cellspacing="0"><tr> <td style="border-left: 1px solid #{{border_color}}; border-right: 1px solid #{{border_color}};"> <a href="{{url}}" style="color: #ffffff; font-size: 16px; line-height: 20px; text-decoration: none; padding: 6px 20px; display: block; font-weight: bold; text-shodow: 1px -1px #{{shadow_color}};">{{text}}</a> </td> </tr></table> </td> </tr> <tr> <td width="5" style="vertical-align: bottom;"><img src="{{btn_bl}}" border="0" height="5" width="5"></td> <td style="vertical-align: bottom; min-width: 100%;"> <table style="border-collapse: collapse; width: 100%;"><tr> <td style="border-bottom: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td> </tr></table> </td> <td width="5" style="vertical-align: bottom;"><img src="{{btn_br}}" border="0" height="5" width="5"></td> </tr> </table> </td> </tr> </table> 

  
  ボタンには独自のテンプレートがあり、テキストの目的の背景画像、フレームの色、影の色を設定します。
  
  

  CSS

  
  同一の要素に対する基本的なクラスのセットがあります。 別のテンプレートにあり、必要な文字に挿入されます。
  
  

   <!--[if gte mso 10]> /*   Outlook 2007/2010 */ <style> .o__table { width: 560px !important; } .o__btn-a{ display: block !important; padding: 8px 20px !important; font-size: 18px !important; border: 1px solid #017ac2 !important; } </style> <![end if]--> <style> @media only screen and (max-device-width: 720px) { body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: none; } .m__hidden { display: none !important; } .m__btn { width: 300px !important; text-align: center !important; } .m__content { padding: 0 10px !important; } .m__footer { padding: 10px !important; } .m__content-border { border-bottom: 1px dotted #e5e5e5 !important; } .m__user-pic { width: 52px !important; height: 52px !important; border-radius: 0 !important; } .m__user-more { width: 49px !important; height: 29px !important; padding: 22px 0 0 0 !important; } .m__user-more img { width: 27px !important; height:7px !important; } .m__padding_b-0 { padding-bottom: 0 !important; } .m__padding_t-0 { padding-top: 0 !important; } .m__padding_b-10 { padding-bottom: 10px !important; } .m__padding_b-15 { padding-bottom: 15px !important; } .m__padding_t-10 { padding-top: 10px !important; } .m__padding_t-15 { padding-top: 15px !important; } .m__body-txt { font-size: 14px !important; } .m__body-title { font-size: 18px !important; } .m__footer-txt { font-weight: normal !important; color: #666 !important; font-size: 12px !important; } } </style> 

  
  
  すべてのクラスは、二重アンダースコアで名前が付けられます。 これが、CSSクラスをサポートしているがメディアクエリをサポートしていないYahooでよく知られている問題を解決する方法です。 彼はWeb上のモバイルバージョン用のクラスを使用していますが、これはまったく必要ありません。 Yahooは元のクラス名を独自のクラス名に書き換えます。 例：m__btnからm_btn、つまり、誤って二重アンダースコアを1に置き換えます。 したがって、スタイルタグのクラス名は、クラス属性の名前と一致しません。
  
  

  モバイル向けの漸進的な開示

  
  順次開示の方法は、複雑でめったに使用されない要素が隠され、特別なコマンド（スイッチを押す）で表示されることです。 この方法は、モバイルデバイス用の電子メールでも使用できます。 押すと、スマートフォンの省略記号が消え、非表示の写真が表示されます。
  
  
  
  

   <style> .hidden, .more:hover { display: none; } .more:hover + .hidden { /* IOS */ display: block; } #show:target .hidden { /* ANDROID */ display: block; } #show:target .more { display: none; } </style> <td id="show"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> <a href="#show" class="more">...</a> <span class="hidden"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> </span> </td> 

  
  
  

  影付きゴムブロック

  
  
  
  多くの場合、デザイナーは影で囲まれたブロックを使用します。 しかし、そのようなブロックを手紙で、さらにはゴムでさえ作ると、問題になります。 このブロックには、幅と高さが異なるユーザーの写真があります。 彼のために、四隅の写真と四辺の写真を使います。 水平辺の幅は100％で、垂直値は写真の高さに設定されます。
  
  

   <style> .m__hidden { display: none !important; /*  ,      */ } .m__photo{ /*       */ width: 100%; height: auto !important; } /*      */ .m__photo-brd_l { background: url(center-left.png); } .m__photo-brd_r { background: url(center-right.png); } </style> <table cellpadding="0" cellspacing="0" border="0" style="direction: ltr; line-height: 0;"> <tr> <td><img src="top-left.png" width="10" height="10" border="0"></td> <td><img src="top-center.png" width="100%" height="10" border="0"></td> <td><img src="top-right.png" width="10" height="10" border="0"></td> </tr> <tr> <td class="m__photo-brd_l"><img src="center-left.png" class="m__hidden" width="10" height="{{height}}" border="0"></td> <td style="background: #ffffff;"><img src="photo.png" class="m__photo" height="{{height}}" border="0"></td> <td class="m__photo-brd_r"><img src="center-right.png" class="m__hidden" width="10" height="{{height}}" border="0"></td> </tr> <tr> <td><img src="bottom-left.png" width="10" height="10" border="0"></td> <td><img src="bottom-center.png" width="100%" height="10" border="0"></td> <td><img src="bottom-right.png" width="10" height="10" border="0"></td> </tr> </table> 

  
  
  

  Outlook 2007/2010の背景画像

  
  興味深いことに、Outlook 2007/2010は、前のOutlook 2003よりもHTMLとCSSのサポートがはるかに劣っています。たとえば、背景画像はサポートされていません。 例外は、本文でbackgroundプロパティを使用することです。
  
  

   <body background=""> ... </body> 

  
  しかし、手紙の他の要素はどうですか？ 解決策があります。VMLを使用できます。
  
  

   <!--[if gte mso 10]> <v:rect style="width: ; height: ;" strokecolor="none"> <v:fill type="tile" src=""></v:fill> </v:rect> <v:shape style="position: absolute; width: ; height: ;"> <![endif]--> ... <!--[if gte mso 10]> </v:shape> <![endif]--> 

  
  その結果、テキストを配置できる幅と高さが指定されたブロックを取得します。
  
  ここに手紙の例を見ることができます： jsfiddle.net/ELhD9/5
  
  これが、Badooがデバイス、ブラウザ、メールクライアントの広大な市場向けにメールを開発する方法です。 私たちのアプローチは、誰もが従うべき開発標準とは考えていません。 実際、そのような製品を作成するときは、現在の状況を実験して適応させる必要があります。 私たちの方法を改善したり変更したりするためのアイデアがあれば、コメントを書いてください。興味を持って議論します！
  
  アルテム・クネツ
  フロントエンド開発者Badoo