HTMLメールでのCSSの使用

HTML形式で電子メールを送信することは、常に重要なポイントでした。 手紙が本当にオリジナルのデザインでまともに見えるはずなのに、どうしてそれをフォーマットするのかということを自分で言うことができます。 誰もがHTMLレターを作成するからといって、それを作成する価値はないと思います。 それでもこのようなレターを作成することにした場合は、HTML形式でレターを作成するための5つのゴールデンルールがあります。



*このような手紙を閲覧できるユーザーに送信できます

*手紙はすべてのメールプログラムで同じように見えるはずです

*そのような手紙を乱用しないでください。 週に一度でもそのような手紙を送ることは多すぎる

*レターには代替テキストが含まれている必要があります

*手紙に外部リンクを追加することを忘れないでください。



最初にメールしてからデザインする



最初に平文で手紙を書きます。 これは、最初に読むことができる手紙を提供します。どのような場合でも、この手紙に相当するテキストを提供する必要があるためです。 HTMLとプレーンテキストで文字を送信することは、同時にマルチパート/代替メール形式またはMIMEと呼ばれます。 ほとんどの電子メールプログラムがサポートしています。



プレーンテキストの電子メールの作成に関する注意事項:行の長さを60文字に制限し、完全なURLのみを使用します。



手紙のテキスト版を作成した後、デザインについて考えることができます。 各ユーザーは独自の方法でHTML形式の文字で到着するため、すべての電子メールプログラムで同じように見えるデザインを作成する必要があります。 リストは十分に大きいので、モバイルメールクライアントを忘れないでください。



単一のデザインを作成するには、 できないことをリストする方が簡単です



できないこと



*



をセクションに



こと



GmailとHotmailは間違いなくサポートされていません。

* 外部スタイルシートへのリンクを追加します すべてのクライアントが外部スタイルをサポートしているわけではありません。 彼のことをまったく忘れた方がいいです。

* Background-image / Background-positionを追加します。 Gmailはサポートしていません。

* フロートをクリアします。 再びGmail。

* 境界を設定します。 ほとんどの場合、CSSポジショニングはまったく機能しません。

* フォントスタイルを追加します Eudoraがそれらを無視する可能性があります。



避けるべきことがいくつかあります。 この記事では、オンラインメールクライアントがサポートするものの完全なリストを見つけることができます



私にできること



使用できるのはインラインスタイルのみです。 タグでスタイルを直接設定できます。











*画像を使用できます

*デザインでテーブルを使用できますし、使用する必要があります。



テーブル



HTMLメールのコードを見てください-それらのほとんどはテーブルを使用して作成されています。 スプレッドシートは、すべてのメールプログラムで同様に機能するレターデザインを作成するのに最適です。 文字を表示するためのウィンドウの幅は、プログラムによって大きく異なります。 幅が100%のテーブルを作成して中央に配置し、固定幅の別のテーブルを配置することをお勧めします。 外部テーブルでは、背景色を追加で設定できます。 自動境界線でセンタリングするためにコンテナ(ブロック)を使用することを忘れた方が良いです。



ツール



スタイルを扱うのが面倒なら、メールを作成するための既製のツールがあります。 無料のもののうち、既製のHTMLページからレターを作成するオンラインサービスであるPremailerです。 有料-MailChimp



さらに、ネットワークにはこのトピックに関する膨大なリソースがあります。 この資料から始めることができますHTMLメールの設計、コーディング、配信:初心者向けサバイバルガイド



役に立つヒント



*相対ではなく、完全な画像パスのみを使用してください(例: www.yourserver.com/email/images/logo.gif

*数千通の手紙を送る前に、あなたのプロバイダーがあなたの郵便物をブロックしないことを確認してください

*さまざまなメールプログラムで手紙をテスト、テスト、再テストします。

*文字の幅を600ピクセルに制限します。 理想は440pxです

*スタイルを追加するときは、スタイルを無効にしてデザインを確認してください。文字は、アクセス可能で、理解可能で、読みやすいように見えるはずです。

*バイアグラの広告に似た文字を作成しないでください。スパムのようなばかげた冗談をしないでください。

*フッターを本来の目的に使用し、電話、登録解除、住所などのすべてのサポート情報に投資します。

*常に法律を尊重してください。 商用の電子メールニュースレターを扱う際には、多くの規則に従う必要があるCAN-SPAM行為があることに注意してください。 郵送先住所を文字で示し、購読解除への有効なリンクを指定する必要があります。



オリジナル記事

翻訳



All Articles