電子メールのHTMLテーブル：何がうまくいかない可能性がありますか？
公開: 2017-08-01電子メール業界に長期間携わっている場合は、電子メールキャンペーンで多くの問題が発生している可能性があります。 画像の欠落から配信可能性の問題まで、Eメールマーケティングには課題がたくさんあります。 ただし、考慮していなかった可能性があるのは、電子メールの基盤となるテーブル（実際のコード）で問題が発生する可能性があることです。
残念ながら、HTMLテーブルで問題が発生する可能性のあるものはたくさんあります。 今日は、HTMLテーブルで見られる最も一般的な問題のいくつかを分析し、自分の電子メールで同じ問題が発生しないようにするためのヒントをいくつか紹介します。
テーブルを使用する理由
まず、電子メールのコーディングにHTMLテーブルを使用する理由について簡単に復習します。 過去に説明したように、Eメールマーケティングキャンペーンには、独自の特別なコーディング上の考慮事項が必要です。 Webと電子メールは同じテクノロジ（HTMLとCSS）に基づいて構築されていますが、電子メールアプリケーションはWebブラウザと同じ標準に準拠していません。 各電子メールアプリケーションには、サポートされているコードと電子メールの表示方法を決定する独自のレンダリングエンジンがあります。 私たちにとって悪いニュースは、これらのレンダリングエンジンのすべてが異なるHTMLタグとCSSプロパティをサポートしていることです。
このため、Webデザインで使用されているのと同じコーディング原則を使用することはほとんどできません。 ほとんどの電子メールクライアントで電子メールが正しく表示されるようにするには、HTMLテーブルを使用して電子メールキャンペーンの構造を作成する必要があります。
これは最近変更されていますが、特に昨年のGmailのメジャーアップデートでは、一部の電子メールクライアントはまだ多くのHTMLとCSSをサポートしていません。 最も注目すべき点は、MicrosoftWordをレンダリングエンジンとして使用するMicrosoftのOutlookファミリの電子メールクライアントです。 Outlookは依然として非常に人気があるため（現在、Eメールクライアントマーケットシェアトラッカーで5位）、Eメールデザイナーは、キャンペーンをサブスクライバーに対して適切に表示するために、ある程度の容量のテーブルを使用する必要があります。
また、HTMLテーブルに依存する必要がある場合、問題が発生する可能性のあることがいくつかあります…
物事を複雑にする
テーブルの使用でよく見られる問題の1つは、レイアウトが複雑すぎることです。 これは、数年以内に更新されていない従来の電子メールテンプレートに特に当てはまります。
やや最近まで、ほとんどの電子メールは多くのテーブルで作成されていました。 テーブル内のテーブル内のテーブル—ネストと呼ばれる方法。
別のテーブル内に複数のテーブルをネストすると、コード内に問題が発生する可能性があります。 物事を移動するときに、誤ってテーブルを間違った場所に配置したり、重要なHTMLタグを貼り付けたりするのは非常に簡単です。 また、一部のクライアント（Lotus Notesを見てください）では、テーブルを深くネストしすぎると、電子メールのレンダリングが不十分になることがあります。 このため、友人のBrian Gravesが書いたように、モジュール式のアプローチでメールを作成することをお勧めします。 そして、ネストされたテーブルを最小限に抑えるようにしてください。 テーブルのネストはほぼ避けられませんが、ネストの深さを最大4〜6テーブルに保つと、問題を回避するのに役立ちます。
複雑なネストと同様に、過度に複雑な設計も問題になる可能性があります。 複数の列の電子メールが表示されることは珍しくありませんが、電子メールに列を追加しすぎると、潜在的な障害に備えることになります。
一部の電子メールクライアントは、基本的な計算でさえ問題を抱えています。 Microsoft Outlookの特定のバージョンは、テーブルの列に余分な間隔を追加し、電子メールのレイアウトを壊すことが知られています。 25％の幅に設定された4つのテーブルセルを使用することは理にかなっていると思うかもしれませんが、Outlookはそれらのセルに余分なスペースを追加し、レイアウトを100％より広くします。 結果の電子メールは、それらのセルの一部を独自の行にドロップし、適切に設計され、完全に計画された電子メールキャンペーンを台無しにします。
メールのレイアウトをシンプルに保つことは、キャンペーンの潜在的な問題を回避し、購読者を満足させるのに役立ちます。
タグがありません
通常、メールには多くのコードが含まれています。 また、ほとんどの電子メールチームは、非常に迅速で厳しいスケジュールで作業しています。 この組み合わせは、電子メールキャンペーンを台無しにする可能性のある間違いにつながる可能性があります。
簡単な復習として、HTMLがどのように記述されているかを見てみましょう。 HTMLは、コンテンツを囲むタグで構成されています。 ほとんどの場合、適切なマークアップには開始タグと終了タグの両方が必要です。 このHTMLテーブルを例として取り上げます。
<table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>テーブル、テーブル行、テーブルセルの3つの異なるタグがあることがわかります。 これらのタグは開かれ、次に閉じられます（/記号で示されます）。
HTMLは寛容なマークアップ言語ですが、HTMLタグがない場合、電子メールクライアントとそのレンダリングエンジンはしばしば窒息します。 残念ながら、終了タグの欠落は、電子メールでは非常に一般的な問題です。 これらの速いターンアラウンドタイムは、電子メールデザイナーのコーディングが速すぎて、テーブル、行、またはセルを閉じるのを忘れる可能性があります。 これは一部のクライアントでは問題ない場合がありますが、他のクライアントではキャンペーンの失敗につながります。
W3C Markup Validation Serviceなどのツールは、欠落しているタグを特定するのに役立ちます。 タグがないことやマークアップが不適切に形成されていることも、メールテンプレートやBuilderのパーシャルやスニペットなどのツールを使用してメールを作成することをお勧めする理由です。 これらは、コードが適切に記述され、適切にテストされていることを確認するのに役立つだけでなく、ワークフローを高速化するという追加の利点もあります。これにより、厳しい締め切りに間に合い、チームを満足させることができます。
欠落している属性
タグが欠落していると問題が発生するのと同じように、テーブルにHTML属性が欠落していると、ファンキーなデザインになる可能性があります。
HTML属性は、HTMLタグに設定できる追加のプロパティです。 これらのプロパティは、要素の幅と高さ、配置、さらには間隔などを制御します。 テーブルセルの周囲の予期しない間隔は、HTMLテーブルで発生する最も一般的な問題の1つです。
ほぼすべての電子メールアプリケーション（およびWebブラウザ）は、独自のスタイルをHTMLテーブルに追加します。 HTMLテーブルは、従来、表形式のデータを表示するために使用されており、元々はコンテンツのレイアウトと設計を目的としていませんでした。 このため、テーブルが正しく表示されるようにするには、ブラウザと電子メールアプリケーションのデフォルトの動作を上書きする必要があります。
セル間隔属性とセルパディング属性をテーブルに追加し、両方をゼロに設定することで、電子メールクライアントがテーブルセルまたはその周囲に余分なスペースを追加しないようにすることができます。
<table cellpadding="0" cellspacing="0"> </table>同様に、テーブルの幅やテーブルコンテンツの配置で問題が発生した場合は、テーブルまたはテーブルセルの幅または配置属性を忘れていないことを確認する必要があります。
トラブルシューティングの方法を学ぶ
独自の電子メールキャンペーンのトラブルシューティングを行い、サブスクライバーにとって厄介な問題を回避する方法を学びたいですか？ Litmus Liveに参加して、プロのような電子メールのトラブルシューティングに関する完全なワークショップに参加してください。 最も一般的な電子メールの落とし穴、その解決策、およびキャンペーンのトラブルシューティングに最適な方法について説明します。
 | Litmus Liveチケットを入手してください！私たちと一緒にメールを祝うために今日登録してください！ 今すぐ登録→ |