ホームページ 記事 メールマーケティング レスポンシブメールの列をスタックする方法
レスポンシブメールの列をスタックする方法
公開: 2021-10-04
すっごく、ここで少しデートするつもりですが、私に固執します。
スマートフォンが最初にメールマーケターが対処しなければならないものになり始めたとき、私が皆から見た共通の解決策は単一列のメールでした。 多くのモバイル電子メールクライアントがメディアクエリをサポートしていないので、これは理にかなっています。 最も簡単な選択は、モバイル用に簡単にサイズ変更できるデスクトップの単一列のデザインに固執することで、問題を完全に回避することでした。
しかし、最近のメディアクエリのサポートが増えると、レスポンシブコーディングを利用して、サブスクライバーが表示している画面サイズに電子メールデザインを応答させる、より興味深いデザインを作成できます。
手順を説明します。
通常のスタック順序と逆のスタック順序 スタックするコンテンツをコーディングする2つの方法 モバイルコンテンツをスタックすべきでない場合 モバイルで列をスタックする必要がある理由 モバイルデバイスの表示画面は非常に限られており、モバイルデバイスの理想的なデザインは1列です。 しかし、スペースがたくさんあるデスクトップ上の単一列のデザインに限定したくはありません。 メディアクエリを入力して、モバイルでコンテンツをスタックし、コンテンツが小さい画面用に最適化されていることを確認します。
デスクトップ モバイル 出典： Really Good Emails
電子メールのコンテンツを同じデスクトップレイアウトに保つと、モバイルデバイス上で非常に小さなテキストや画像、または押しつぶされたコンテンツになります。 一部の携帯電話の画面と同じくらい広いこの電子メールのように、サブスクライバーがコンテンツを読むのが難しい可能性が高いため、これは優れたユーザーエクスペリエンスではありません。
出典： Really Good Emails あなたの購読者に好意を示し、あなたの電子メールがすべての読書環境で最高に見えることを確認してください。
メールデザインのスタッキング方法 列を互いに積み重ねる場合、コンテンツを積み重ねる方法は2つあります。左側の列を上に配置する（通常の積み重ね）か、右側の列を上に積み上げる（逆の積み重ね）です。
通常のスタッキング 通常のスタッキングは、スタッキングの最も一般的な形式です。 次のように、左側の列のコンテンツを取得して、右側の列のコンテンツの上にスタックします。
リバーススタッキング リバーススタッキングとは、左側の列のコンテンツが右側の列のコンテンツの下 にスタックする場合です。 デスクトップにZパターンがあるが、モバイルではすべての行を同じように見せたい場合は、中央の行に最も一般的に使用されます。 この例では、最初と最後の行は通常のスタッキングですが、2番目の行は逆スタッキング列です。
モバイルでスタックする列をコーディングする2つの方法 スタッキング列をコーディングするには、いくつかの異なる方法があります。 CSSメディアクエリを使用してから、ハイブリッドコーディング方法を使用する方法について説明します。 それらをテストして、何が最適かを確認してください。
CSSメディアクエリの使用 2列のテーブルを作成し、クラスを使用して列をスタックするだけで、2つの列を作成できます。
CSSは次のようになります。
<style>
@media screen and (max-width:600px) {
.block { display: block !important; width: 100% !important; }
}
</style>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
<tr>
<td class="block" align="left" valign="top" style="padding:10px 0;" width="50%">
<img src="http://via.placeholder.com/300">
</td>
<td class="block" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb in the shape of an "L" on her forehead.</p>
</td>
</tr>
</table>
ブロッククラスは、モバイルではテーブルセルをブロックに変換し、コンテンツはそれに応じて動作し、モバイルでは自動的にスタックします。 これにより、通常のスタックになります。
リバーススタックを作成する場合は、次のように、CSSの表示プロパティ値としてtable-header-groupとtable-footer-groupを使用できます。
<style>
@media screen and (max-width:600px) {
.top { display: table-header-group !important; width: 100% !important; }
.bottom { display: table-footer-group !important; width: 100% !important; }
}
</style>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
<tr>
<td class="bottom" align="left" valign="top" style="padding:10px 0;" width="50%">
<img src="http://via.placeholder.com/300">
</td>
<td class="top" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Well the years start coming and they don't stop coming. Fed to the rules and I hit the ground running. Didn't make sense not to live for fun. Your brain gets smart but your head gets dumb.</p>
</td>
</tr>
</table>
ハイブリッドコーディング これが私が使っている方法です。 それははるかにコードが重いですが、電子メールクライアントがメディアクエリをサポートしていなかったいくつかの機会に私のお尻を救いました。 （私にハイブリッドコーディングを最初に紹介したチュートリアルについて、Nicole Merlinにマッドプロップを提供します。）
この場合、 display: inline-block 2つのdivを使用しdisplay: inline-block 。 これにより、コンテンツがデスクトップ上で隣り合って配置され、モバイル上でスタックするようにプッシュされます。 コードは次のようになります。
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
<tr>
<td align="left" valign="top">
<img src="http://via.placeholder.com/300">
</td>
</tr>
</table>
</div>
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
<tr>
<td align="left" valign="top" style="padding-left: 10px;">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
</td>
</tr>
</table>
</div>
次に、それらすべてをテーブルセルにラップし、フォントサイズを0に設定して、divの周囲に余分なスペースが追加されないようにし、テーブルセルの中央に全体を配置します。
<tr>
<td style="font-size:0;" align="center" valign="top">
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
<tr>
<td align="left" valign="top">
<img src="http://via.placeholder.com/300">
</td>
</tr>
</table>
</div>
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
<tr>
<td align="left" valign="top" style="padding-left: 10px;">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
ちょっと待って！ Outlookはdivをサポートしていないため、Outlookで機能させるには、すべての周りにゴーストテーブルを追加する必要もあります。
<tr>
<td style="font-size:0;" align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
<tr>
<td valign="top" style="width: 300px;">
<![endif]-->
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
<tr>
<td align="left" valign="top">
<img src="http://via.placeholder.com/300">
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td valign="top" style="width:300px;">
<![endif]-->
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
<tr>
<td align="left" valign="top" style="padding-left: 10px;">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
含まれているテーブルの50％である列を使用している場合、このコードはメディアクエリなしでうまく機能します。 ただし、小さい列を使用している場合は、モバイルで幅を100％に更新するために、いくつかのメディアクエリを追加する必要があります。 詳細については、以下をご覧ください。
これの逆スタッキングバージョンは、dir属性を利用して、divを逆の順序で並べます。 2つの列を含むセルにdir =” rtl”を追加し、コンテンツを正しく表示するには、各列のテーブルにdir =” ltr”を追加する必要があります。
<tr>
<td style="font-size:0;" align="left" valign="top" dir="rtl">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
<tr>
<td valign="top" style="width: 300px;">
<![endif]-->
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;" dir=”ltr”>
<tr>
<td align="left" valign="top">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Hey now, you're an all-star, get your game on, go play. Hey now, you're a rock star, get the show on, get paid. And all that glitters is gold. Only shooting stars break the mold.</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td valign="top" style="width:300px;">
<![endif]-->
<div style="display:inline-block;vertical-align:top;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;" dir=”ltr”>
<tr>
<td align="left" valign="top" style="padding-left: 10px;">
<img src="http://via.placeholder.com/300">
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
リバーススタッキングハイブリッドバージョンでコーディングする際に留意すべき点：最初の<div>にあるものはすべて、右の 列に表示されます。これは直感に反し、慣れが必要です。 また、アクセシビリティにとって常に最適であるとは限りません。
2つの異なる列幅のコーディング 上記のように、異なるサイズのテーブルセルを使用する場合は、メディアクエリを追加して、モバイル用にそれらのテーブルセルを変更する必要があります。 これの最も一般的なケースは、CSSですでに設定している可能性のある100％クラスを使用することです。 そうでない場合は、次のようになります。
.w100p { width: 100% !important; }
次に、そのクラスをHTMLのdivとテーブルに次のように追加します（この例には、幅100pxの列と幅500pxの列があります）。
<tr>
<td style="font-size:0;" align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
<tr>
<td valign="top" style="width: 100px;">
<![endif]-->
<div class=”w100p” style="display:inline-block;vertical-align:top;">
<table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100px;">
<tr>
<td align="left" valign="top">
<img src="http://via.placeholder.com/300">
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td valign="top" style="width:500px;">
<![endif]-->
<div class=”w100p” style="display:inline-block;vertical-align:top;">
<table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:500px;">
<tr>
<td align="left" valign="top" style="padding-left: 10px;">
<p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Outlook for Desktop専用であるため、条件付きコードの幅を変更することを心配する必要はありません。
どの方法を使用しますか？ モバイル電子メールクライアントがメディアクエリをサポートするようになったため、これらの方法は両方ともうまく機能します。
メディアクエリ方式 ハイブリッド方式 長所 コードの負担が少ない スクリーンリーダーはコンテンツを順番に読み上げます 電子メールクライアントからの変更や更新によって混乱する可能性が低くなります 短所 電子メールクライアントからの変更や更新によって混乱する可能性が高くなります より多くのコードが重い スクリーンリーダーによってコンテンツが順不同で読み取られる
メディアクエリベースのメソッドはコードの負荷が少なく、どちらの列にもクラスを配置できるため、視覚的に意味のある方法でコンテンツを表示しながら、スクリーンリーダーにとって意味のある順序でコンテンツを残すことができます。 。
したがって、アクセシビリティが大きな懸念事項である場合は、メディアクエリバージョンがおそらく最善の策です。
ただし、より確実で、電子メールクライアントの気まぐれの影響を受けにくいバージョンを使用することを懸念している場合は、ハイブリッドバージョンが最適です。
モバイルでコンテンツをスタックしない 場合 これは、すべてをモバイルにスタックする必要があるということではありません。 スタックを狂わせないでください。 このメールの署名のように、モバイルでスタックする必要がない場合があります。
多くのメールの署名は、モバイルではスタックしない2つの列です。 または、デスクトップのスタックからモバイルの非スタックに移行したい場合。
2021年1月のニュースレターでは、すべての決議が3列に積み重ねられた各セクションに配置されていました。 これらをモバイルで積み重ねるとき、私たちはスペースをより有効に活用したかったのです。 そのため、画像、名前、タイトルは「スタック解除」され、各列は新しい行になりました。
デスクトップ モバイル
ご覧のとおり、すべてを積み重ねることが常に答えであるとは限りません。 モバイル向けに設計するときは、スペースを最大限に活用していることを確認してください。 場合によっては、コンテンツをスタックしないことも含まれます。
私の興味深いスタックバリエーションのコーディング ハイブリッドスタッキングコードの修正バージョンを使用して、上記の効果を作成しました。 この場合、私はハイブリッド3列から始めました。
<tr>
<td align="center" valign="top" style="font-size:0; padding-bottom: 60px;">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
<tr>
<td valign="top" style="width: 180px;">
<![endif]-->
<div style="display:inline-block;">
<table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
<tr>
<td align="center" valign="middle">
[--column 1 content goes here--]
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td style="width: 30px;">
</td><td valign="top" style="width: 180px;">
<![endif]-->
<div style="display:inline-block;">
<table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
<tr>
<td align="center" valign="middle">
[--column 2 content goes here--]
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td style="width: 30px;">
</td><td valign="top" style="width: 180px;">
<![endif]-->
<div style="display:inline-block;">
<table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
<tr>
<td align="center" valign="middle">
[--column 3 content goes here--]
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</td>
次に、各列に、2列のスタッキングを含む行と、見積もり用の2番目の通常の行を追加しました。 デスクトップ上で画像と名前を並べたくなかったので、div間のゴースト列区切り文字を省略しました。 そして、divのテーブルを最大幅に設定して、モバイルでdivがインラインになるようにしました。
列自体は180pxの幅に設定されていましたが、これはモバイルでははるかに小さいため、モバイルでのメディアクエリによってこれらのテーブルが100％に設定されるまで、divはスタックされていました。 したがって、各列は次のようになります。
<div style="display:inline-block;">
<table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
<tr>
<td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
<tr>
<td valign="top" align="center" style="width: 180px;">
<![endif]-->
<div style="display:inline-block;vertical-align:middle;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="left" valign="middle">
<img src="https://via.placeholder/79" alt="" width="79" height="79" >
</td>
</tr>
</table>
</div>
<div style="display:inline-block;vertical-align:middle;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="left" valign="middle">
[-- content that stacks on desktop, but not on mobile goes here--]
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="left" valign="top">
[--content that stacks on both desktop and mobile goes here--]
</td>
</tr>
</table>
</div>
次に、テーブルを最大幅の値に設定して、モバイル上でテーブルが隣り合って配置されるようにします。 しかし、デスクトップでは、含まれているセルが小さすぎて隣り合わせに配置できないため、コンテンツがデスクトップにスタックされていました。
<div style="display:inline-block;">
<table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
<tr>
<td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
<tr>
<td valign="top" align="center" style="width: 180px;">
<![endif]-->
<div style="display:inline-block;vertical-align:middle;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 79px;">
<tr>
<td align="left" valign="middle">
<img src="https://via.placeholder/79" alt="" width="79" height="79" >
</td>
</tr>
</table>
</div>
<div style="display:inline-block;vertical-align:middle;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="max-width: 221px;">
<tr>
<td align="left" valign="middle">
[-- content that stacks on desktop, but not on mobile goes here--]
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="left" valign="top">
[--content that stacks on both desktop and mobile goes here--]
</td>
</tr>
</table>
</div>
これを含む、スタッキングのすべての異なるバージョンの動作中のコードを参照してください。
最終的な考え ご覧のとおり、これらのさまざまな方法を組み合わせると、コンテンツをスタックして並べ替えるさまざまな興味深い方法を思いつくことができます。 したがって、サブスクライバーが最高の表示エクスペリエンスを利用できるようにし、読みやすさを最適化するためにこれらの列を積み重ねて、モバイルでデザインを際立たせるようにします。 それを試してみて、あなたが思いついたものを私たちに知らせてください！
