HTMLメールデザインの課題(およびフラストレーション)を理解する
コンテンツ管理システムを開いて Web ページを構築する場合、それは非常に簡単なプロセスです。最新の Web ブラウザのサポート HTML, CSS、および厳格な Web 標準に準拠した JavaScript。そして、それらはデザイナーが心配する必要があるブラウザのほんの一握りにすぎません。もちろん例外はあります。簡単な回避策やブラウザ固有の機能もいくつかあります。
全体的な標準のため、コンテンツ管理システムでページ ビルダーを開発するのは簡単です。ブラウザは HTML5、CSS、JavaScript に準拠しており、開発者はデバイスに応答し、ブラウザ間で一貫性のある Web ページを作成するための非常に堅牢なソリューションを構築できます。 XNUMX 年前、事実上すべての Web デザイナーはデスクトップ ソフトウェアを使用して Web ページを開発していました。現在、Web デザイナーが Web ページを開発することはかなり珍しいことであり、多くの場合、テンプレートを開発し、コンテンツ システムのエディターを使用してコンテンツを入力しています。ウェブサイトのエディターは素晴らしいです。
しかし、電子メール編集者はひどく遅れています。 これが理由です…
HTMLメールのデザインは、Webサイトよりもはるかに複雑です
会社が美しい HTML 電子メールをデザインしたい場合、そのプロセスは、次のような理由により、Web ページを作成するよりも大幅に複雑になります。
- 標準なし – HTML 電子メールを表示する電子メール クライアントには、Web 標準への厳密な準拠はありません。事実上、すべての電子メール クライアント、およびすべての電子メール クライアントのすべてのバージョンは、動作が異なります。 CSS、外部フォント、最新の HTML を尊重するものもあります。一部のインライン スタイルを尊重し、フォントのコレクションのみを表示し、テーブル駆動構造以外はすべて無視するものもあります。誰もこの問題に取り組んでいないというのはまったくばかげています。その結果、クライアントやデバイス間で一貫してレンダリングするテンプレートの設計は大規模なビジネスとなり、かなりの費用がかかる可能性があります。
- 電子メールクライアントのセキュリティ – 最近、Apple Mail が更新され、HTML メール内の電子メールに埋め込まれていないすべての画像がデフォルトでブロックされるようになりました。一度に電子メールを読み込む許可を与えるか、この設定を無効にするには設定を有効にする必要があります。電子メール クライアントのセキュリティ設定のほかに、企業向けの設定もあります。
- ITセキュリティ – ITチームは、電子メールで実際にレンダリングできるオブジェクトに厳密なルールセットを展開する場合があります。 たとえば、画像が企業のファイアウォールでホワイトリストに登録されていない特定のドメインからのものである場合、画像は単に電子メールに表示されません。 時には、自分の従業員が画像を見ることができるように、電子メールを作成し、会社のサーバーですべての画像をホストする必要がありました。
- メールサービスプロバイダー –さらに悪いことに、サービスプロバイダーに電子メールを送信する電子メールビルダー(ESPs) 問題を制約するのではなく、実際に問題を引き起こす。彼らはエディターが WYSIWYG (What You See Is What You Get) であることを宣伝していますが、電子メールのデザインではその逆が当てはまります。プラットフォームで電子メールをプレビューすると、受信者はデザイン上の問題をすべて確認できます。企業は、多くの場合、より多くの機能があると考えて、機能が限定されたエディタではなく、機能が豊富なエディタを無意識のうちに選択します。逆も真です。すべての電子メール クライアントで一貫して電子メールを表示したい場合は、問題が発生する可能性が低いため、シンプルであるほど良いでしょう。
- メールクライアントのレンダリング – 何百もの電子メール クライアントは、デスクトップ、アプリ、モバイル デバイス、Web メール クライアント間で異なる方法で HTML をレンダリングします。電子メール サービス プロバイダーの気の利いたテキスト エディターには電子メールに見出しを挿入する設定がある場合がありますが、パディング、余白、行の高さ、フォント サイズは電子メール クライアントごとに異なる場合があります。その結果、電子メールを一貫して表示するには、HTML を簡素化し、すべての要素を異なるコードでコーディングする必要があり (以下の例を参照)、多くの場合、電子メール クライアント固有の例外を書き込む必要があります。単純なブロック タイプはなく、30 年前の Web 用の構築と同等のテーブル駆動のレイアウトを実行する必要があります。新しいレイアウトには開発と電子メール クライアントとデバイス間のテストの両方が必要になるのはこのためです。あなたが受信箱に表示しているものは、私の受信箱に表示されているものとまったく異なる場合があります。そのため、レンダリング ツールは次のようなものになります。 酸に関する電子メール or リトマス 新しいデザインがすべての電子メールクライアントで機能することを保証するために必要です。 人気のあるメールクライアントとそのレンダリングエンジンの短いリストは次のとおりです。
- Apple Mail、Outlook for Mac、Android Mail、iOSMailの使用 WebKitの.
- Outlook 2000、2002、および2003の使用 インターネットエクスプローラ.
- Outlook 2007、2010、および2013の使用 マイクロソフトワード (はい、Word!)。
- Webメールクライアントはブラウザのそれぞれのエンジンを使用します(たとえば、SafariはWebKitを使用し、ChromeはBlinkを使用します)。
Web対のHTMLの例。 Eメール
電子メールとWebでの設計の複雑さを示す例が必要な場合は、Mailbakeryの記事からの完璧な例を次に示します。 19電子メールとWebHTMLの大きな違い:
メールHTML
ボタンを適切に配置し、どの電子メール クライアントでも見栄えがよいことを確認するために必要なすべてのインライン スタイルを組み込んだ一連のテーブルを構築する必要があります。クラスを組み込むために、付随するスタイル タグもこの電子メールの先頭に表示されます。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
HTMLウェブ
クラスを含む外部スタイルシートを利用して、ボタンとして表示されるアンカータグの大文字と小文字、配置、色、およびサイズを定義できます。
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
メールデザインの問題を回避する方法
電子メールの設計の問題は、適切なプロセスに従うことで回避できます。
- テンプレートテスト – テンプレートを展開する前に、購読者が使用している電子メール クライアントを理解し、HTML 電子メールがモバイルとデスクトップで完全にテストされていることを確認することが重要です。 Photoshop レイアウトから文字通り電子メールをデザインすることはできますが、最適で一貫性のある電子メール デザインを展開するには、それをテーブル駆動のクロス電子メール クライアントに分割して分割することが不可欠です。
- 内部テスト –テンプレートの設計とテストが完了したら、組織内の内部シードリストに送信して、レビューと承認を行う必要があります。 電子メールの内部レンダリングに関連するファイアウォールやセキュリティの問題がないことを最初に確認するために、非常に限られた個人のサブセットから始めることもできます。 これが新しい電子メールサービスプロバイダーでインスタンスを構築している場合は、電子メールを受信トレイに送信することにも関連するフィルタリングまたはブロックの問題が発生する可能性があります。
- テンプレートのバージョン管理 –設計、適切なテスト、および展開が可能な新しいバージョンのテンプレートで作業せずに、レイアウトやデザインを変更しないでください。 多くの企業は、すべてのキャンペーンのXNUMX回限りの設計を気に入っていますが、それには、すべての電子メールをキャンペーンごとに設計、開発、および展開する必要があります。 これにより、内部のEメールマーケティングプロセスに多大な時間が追加されます。 また、電子メールのどの要素が、どの要素がそうでないかよりもうまく機能していることを理解できないリスクがあります。 一貫性は、プロセスを簡単にする方法であるだけでなく、サブスクライバーの動作にとっても重要です。
- 電子メールサービスプロバイダーの例外 –事実上すべての電子メールサービスプロバイダーには、電子メールビルダーがもたらす問題を回避する手段があります。 会社が組み込みの電子メールエディタを利用して電子メールのデザインを壊さないようにするために、アカウントに生のCSSを追加したり、すべての電子メールに含める必要のあるコンテンツブロックを追加したりすることがよくあります。 もちろん、これらのステップを確実に順守するために展開するには、トレーニングとプロセス制御が必要になる場合があります。 または–文字通り、クライアントとデバイス間で機能することが証明されているソリューションで電子メールデザインを開発し、それを電子メールサービスプロバイダーに貼り付けたい場合があります。
メールデザインプラットフォーム
電子メールサービスプラットフォームは、クライアント間およびデバイス間で一貫してレンダリングされたビルダーを構築および維持するのに不十分な仕事をしてきたため、多くの優れたプラットフォームが市場に出回っています。 私たちが広く使用しているのは ストリポ.
Stripoは単なるメールビルダーではなく、簡単にインポートできる900を超えるテンプレートのライブラリも備えています。 メールをデザインしたら、60以上のESPにメールを送信したり、クライアントにメールを送信したりできます。 イントゥイット・メールチンパンジー, HubSpot, キャンペーンのモニター, AWeber、eスプートニク、 Outlook, Gmailの。何よりも Stripo テンプレートには電子メール レンダリング テストが含まれているため、テスト済みで 40 を超える電子メール クライアントで一貫して動作することを確認できます。