HTMLメールニュースレターと電子メールテンプレートをコーディングする方法-CSSチュートリアル-php.cn

HTMLメールニュースレターと電子メールテンプレートをコーディングする方法

この記事は2006年に最初に公開され、2015年に更新されました。

HTMLメールニュースレターは、この記事が2006年に最初に公開されてから長い道のりを歩んできました。HTMLメールは、出版社と読者の両方にとって非常に成功したコミュニケーション媒体です。出版社は、電子メールの開き、フォワード、クリックスルーの料金を追跡し、製品やトピックに対する読者の関心を測定できます。読者には、より視覚的に魅力的で、スキャンしてナビゲートするのがプレーンテキストのメールよりもはるかに簡単な方法で、ウェブページのようにレイアウトされた情報が表示されます。

HTML電子メールのコーディングは、プログラマーが解決するための楽しく実用的な問題です。 Webページのコーディングとは異なり、HTMLメールは古いメールソフトウェアによく表示する必要があります。ThinkOutlookまたはMacメール、および電話やタブレットの画面に適応する必要があります。あらゆるデバイスによく表示されるHTMLメールを作成する方法に加えて、現在のHTML電子メールコードを携帯電話やタブレットに表示するためのアイデアを紹介します。

キーテイクアウト

テーブルは、コンテンツの位置付けと構造化のためにCSSよりも一貫してサポートされているため、さまざまな電子メールクライアント間の互換性を確保するために、電子メールニュースレターのレイアウトデザインにHTMLテーブルを利用してください。多くの電子メールクライアントは外部または埋め込まれたCSSスタイルシートをサポートしていないため、フォントや色などのスタイリング要素については、HTML内にインラインCSSを直接適用します。

モバイルファーストアプローチを備えたメールニュースレターをデザインします。メディアクエリなどのレスポンシブテクニックを使用して、電子メールクライアント全体でさまざまなレベルのサポートにもかかわらず、携帯電話やタブレットでの表示に対応します。

テストHTMLは、複数の電子メールクライアントとデバイスを広範囲に電子メールで送信して、一貫した外観と機能性を確保し、キャンペーンモニターやMailChimpなどのテスト用のツールを利用しています。

互換性を高め、特定の要素を電子メールクライアントによってレンダリングできない場合でも、ニュースレターにアクセスできるように画像とフォントのフォールバックを含めます。
Webサイトのクロスブラウザー互換性を確保することが難しいと思った場合、これはまったく新しいゲームであることに注意してください。これらの電子メールソフトウェアツールはそれぞれ、非常に異なる方法で同じ電子メールを表示できます。そして、これらのツールがHTMLメールを適切に表示している場合でも、たとえば、電子メールを読むときに読者がウィンドウをサイズする幅を説明することで、分散を説明します。 HTMLメールを手作業でコーディングするか（私の個人的な好み）、既存のテンプレートを使用するかどうかにかかわらず、HTMLメールを作成する際に留意すべき2つの基本的な概念があります：
1. インラインCSSを使用して、バックグラウンドカラーやフォントなど、メール内の他のプレゼンテーション要素を制御します。
2. HTMLテーブルとインラインCSSがHTMLメール内でどのように相互作用するかを確認する最も迅速で簡単な方法は、キャンペーンモニターとMailChimpからテンプレートをダウンロードすることです。これらのテンプレートのいずれかを開くと、後で詳しく説明することに気付くでしょう。
CSSスタイルの宣言は、ヘッドタグの間ではなく、ボディタグの下に表示されます。
CSSの速記は使用されません：略称スタイルルールフォントを使用する代わりに、12px/16px arial、helvetica、代わりにこの速記を個々の特性（フォントファミリー、フォントサイズ、ラインハイト）に分割する必要があります。 🎜>
スパンとDIVは特定の効果を達成するために控えめに使用されますが、HTMLテーブルはレイアウト作業の大部分を実行します。
- ステップ1：レイアウトにHTMLテーブルを使用
- そうです：テーブルが戻ってきた、大きな時間！ Web標準は、Webブラウザーで表示するためにページをコーディングする標準になっている可能性がありますが、これはWeb、Babyではありません。いくつかの電子メールソフトウェアクライアントは、CSSサポートの観点から8ボールに少し遅れています。つまり、すべての読者にニュースレターを一貫して表示したい場合は、レイアウトにテーブルを使用することに頼らなければなりません（終了の読書リストを参照してくださいメールクライアントでのCSSサポートに関するいくつかの優れたリソースに関するこの記事）。
1. ヘッダー、ロゴと親Webサイトからのナビゲーションリンクのいくつか（またはすべて）を含むヘッダーは、ブランドを強化し、サイト訪問者に親しみを提供します
2. 電子メールにさらに下に表示されるストーリーへのリンクは、ストーリーとコンテンツが続く電子メールの下部にあるフッター。これには、多くの場合、トップナビゲーションと同一のリンクが含まれています。
プロモーションメールは同様のルールに従いますが、コンテンツとリンクの方法ではるかに少ないことが含まれています。多くの場合、1つまたは2つのメッセージが含まれており、小さな説明テキストと画像の下にあるリンクを含む1つの大きな画像を使用することもあります。
これらの電子メールレイアウトの可能性はすべて、HTMLテーブルを使用してスペースを行と列に分割できるように簡単に作成できます。実際、HTMLテーブルを使用することは、さまざまなメールクライアントで一貫してレンダリングするレイアウトを実現する唯一の方法です。
メールがどのように設計されていても、最も重要なコンテンツがメールの上部またはその近くに表示されることを覚えておくことが重要です。そのため、読者がメールを開いたときにすぐに表示されます。電子メールメッセージの左上は、多くの場合、人々が電子メールを開くときに最初に見える場所です。
これは、HTMLメールの作成に使用するアプローチです。
- テーブル内の属性とTDタグを使用して、テーブルの表示を制御します。たとえば、border = "0"、valign = "top"、align = "left"（または中央、デザインに合った場合）、cellpadding = "0"、cellspacing = "0"などを設定します。これは主に、古い電子メールクライアントが（ほとんど）許容可能な方法で電子メールを表示するのに役立ちます。
CSSのサポートは郵便クライアントでは貧弱だったと言いましたか？まあ、そうです。ただし、ネストされたテーブルレイアウトが整ったら、電子メールのスタイルにCSSを使用することができます（そしてすべきです）。注意すべきことがいくつかあります。これが私が使用する手順を示します。

最初に、インラインスタイルを使用して、ここに示すようにすべてのスタイル情報を保存します。

これには、テーブル、TD、P、Aなどが含まれます
Webページを作成するときと同じように、HTMLヘッドタグでCSSスタイルの宣言を使用しないでください。代わりに、スタイル宣言をボディタグのすぐ下に配置します。ただし、Google Mailは、電子メールのスタイル宣言を探し、（役立つ）削除します。また、リンク要素を使用して外部スタイルシートを参照しないでください。Googleメール、hotmail、およびその他の電子メールソフトウェアは、これらの外部参照をスタイルシートに無視、変更、または削除します。コンテナテーブルの場合、ヘッダー、コンテンツ、フッターテーブルを収容するコンテナテーブルの場合、テーブル幅を98％に設定します。 Yahoo！メールを適切に表示するには、両側に1％のクッションが必要です。サイドガターがメールの設計に重要である場合、潜在的な問題を回避するために幅を95％または90％に設定します。もちろん、コンテナテーブル内のテーブルは100％に設定する必要があります。
コンテンツに最も近いテーブルTDに一般的なフォントスタイル情報を入れます。はい、これは複数のTDセル内で繰り返しスタイルの宣言をもたらす可能性があります。フォントスタイルの定義を見出し（例：H1、H2）、P、またはAタグに必要な場合にのみ配置します。
divを使用して、テーブルのTDセル内の右または左にコンテンツとリンクの小さな箱を浮かびます。 Google Mailは、CSSフロート宣言を無視しているようです（まだYahoo!とHotmailは問題なく対処します）。フロート宣言に依存するよりも、より複雑なテーブルレイアウトをコーディングする方が良い場合があります。または、電子メールを乱雑にするのは非常に簡単なので、デザイナーにフローティングコンテンツを狭いサイド列に置くように依頼してください。フロートのフレーク状のサポートは、電子メールのデザインを再加工する可能性のある1つの問題です。
divはかろうじて有用であるように見えますが、スパンはインライン要素であるため、ほぼ毎回動作しているように見えます。場合によっては、スパンはテキストの色やサイジングだけではありません。コンテンツの上または下のテキストを配置するために使用できます。
一部の電子メール配信サービスは、スタイルの定義を開梱して、それらをより明確にし、したがって、すべての電子メールソフトウェアでより読みやすくすることに注意してください。たとえば、CSSの速記スタイル= "マージン：10px 5px 10px 0;"前述の長いスタイルの宣言に拡張される場合があります。各電子メールをテストし、電子メールコードに何が起こるかを確認してください。最悪の場合、すべての電子メールソフトウェアでうまく機能するように見えるため、CSSの速記から始めてください。
キャンペーンモニターとMailChimpから電子メールテンプレートをダウンロードして調査した場合、コンテナテーブルをHTMLボディタグであるかのように扱うことがわかります。キャンペーンモニターチームは、このテーブルを「Bodymposter」と呼びます。これは、フレームまたはラッパーテーブルについて考えるのに最適な方法です。 CSSの観点から、コンテナテーブルは、Google Mailのようなサービスがボディタグを無効または無視しなかった場合にHTMLボディ要素が行うことを行います。
ステップ3：ベストプラクティスを採用
私が提案したガイドラインを使用して有効なHTMLメールを作成したことを知っていることは、ソリューションの一部にすぎません。メールが好評を博していることを確認するために従うべきベストプラクティスがいくつかあります。
次のステップは、さまざまなメールクライアントでHTMLメールをテストすることです。多くの場合、これにより回避策が必要な問題が識別されます
最初のテストツールは、FirefoxおよびInternet Explorer Webブラウザーです。電子メールが両方のブラウザによくまたは完全に表示される場合、Outlook、Yahoo！、Googleメール、およびその他のサービスでメールをテストする可能性が高くなります。可能であれば、インターネットエクスプローラー6であなたのメールをテストすることをお勧めします。これにより、Outlook 2003でメールがどのようにレンダリングされるかを適切に示しているはずです（この記事の最後にあるリソースのリストを参照してください。エクスプローラー6）。最後に、iPhoneまたはiPadでメールがどのように見えるかをテストするには、Safari WebブラウザーでHTMLメールを確認してください。
これらの2つのWebブラウザーでメールが問題に表示されたら、電子メール配信サービスを使用して、さまざまなテストメールアカウントにメールを送信します。理想的には、これにはYahoo！、Hotmail、Google Mail Servicesのアカウントが含まれる必要があります。もちろん、使用するテストアカウントは、電子メールを受け取る人のメーリングリストのドメイン名によって決定される必要があります。たとえば、このリストにAOLサブスクライバーがいない場合、AOLメールアカウントを設定してテストするのは時間とお金の無駄です。
このテスト段階で必要だと思った最も一般的なコードの調整を次に示します。

時々、幅から固定幅への切り替えが必要です。これは理想的ではありませんが、読者は読み取り中に電子メールウィンドウを変更することができます。これは、幅を使用することが、複数の電子メールクライアントにレイアウト表示を適切に表示する唯一の方法である場合があります。
電子メールデザインの列に間隔の問題がある場合、最初にHTMLテーブルのセルパディングおよびセルスペシング属性を調整します。それがうまくいかない場合は、CSSマージンとパディング属性を適用してください。 HTML間隔は、古い電子メールソフトウェアでより適切に機能します