完璧なHTMLニュースレターをデザインするための9のコツ

Eメールニュースレターは、あなたのクライアントやフォロワーと連絡を取り合うのに最適な方法です。多くの場合、あなたの会社やウェブサイトはあなたが共有したいと思う多数の製品アップデート、あるいはおそらく今後のイベントがあるでしょう。ブログやソーシャルメディアのストリームに新しい情報を投稿することは常に可能ですが、あなたのオーディエンスはこれまでのところあなたに到達することしかできません。この場合、電子メールは確かに死んだ技術ではなく、単に未開発の可能性があるだけです。.

ニュースレターを作成して送信するプロセスは、思っているよりはるかに簡単ですが、カスタムテンプレートを設計して独自のコードを作成するのです。これには少し時間がかかります。.

これまでにない高品質のHTMLニュースレターをデザインするための素晴らしいヒントをまとめました。あなたがこのテーマの初心者であっても、あなたは確かにあなたが電子メールマーケティングプロセスを始めるためにいくつかの非常に貴重な情報を見つけるでしょう.

ニュースレターの目的

デザインの側面に入る前に、ニュースレターを作成する目的を明確にする必要があります。あなたが運営するウェブサイトの種類に応じて、あなたのニュースレターに含まれる情報は他のものと劇的に異なるかもしれませんが、ニュースレターの中心的な目的 読者の受信トレイに便利なアップデートを配信することです。.

ヘビーインターネットユーザーは、1日に2回以上電子メールをチェックする可能性があります。常に忙しい人でも、少なくとも1日1回は自分のメッセージを読むのに時間がかかるでしょう。これは完璧な時期です 注目を集める あなたのサイトへの訪問を要求しなくても。誰もあなたのリンクをクリックしていなくても、情報は まだ受け取った, これはブランド名を構築するのに最適です。.

あなたのデザインであなたが提供する必要があるだろういくつかのトピックを考えてください。あなたのサービスへの申し込みへのリンクを含めていますか。おそらくブログへのリンク、またはあなたのサイトに最近公開された記事はありますか？あなたの時事通信のレイアウトはあなたがあなたの読者がどのように反応することを望むかを反映するでしょう、しかし最終的にあなたは興味を太鼓打ちして大衆にいくつかの興味深い情報を回して探しています.

1.レイアウトでテーブルを活用する

これは、今日の現代のWeb標準とは少し矛盾しているように思われるかもしれませんが、電子メールはまだそのレンダリングエンジンでは古風なので、古いモデルに向かって構築する必要があります。残念ながらテーブルは 最も簡単な方法 さまざまな電子メールクライアント間ですべてが適切に機能するようにするため。テーブルベースのレイアウトを構築することについてのあなたの知識に応じて、これは実際には良いニュースとして来るかもしれません!

なぜだろうか div そして他のブロック要素はそれほど良い考えではありません。ほとんどの電子メールクライアントは 無関係なCSSを削除するために構築された コンテンツ。これはあなたがを除いて何でもの多くを使用することができないことを意味します インラインCSS （そして全面的な支持でさえも不気味です）。 Microsoft Outlook 2007やGoogleのGmailなどのクライアントは、浮遊要素や直接位置のサポートが非常に不十分です。.

最善の解決策は 複数のテーブルを入れ子にする. パディングとマージンは、多くの電子メールクライアント間で特定のスケールに設定されていません。これは使用に固執する理由です width = "値" すべてのテーブルセル要素に。読者がどの電子メールクライアントを使用しているかに関係なく、これらは常に同じ幅を表示するので、たくさんあります。 より安全な そして より一貫性のある 空のテーブルセルを使用して余白と余白を設定する方法.

2.固定幅ポジショニング

ニュースレターのレイアウトのドラフトを作成するときにはいくつかの選択肢がありますが、従うべき最良の選択肢は次のとおりです。 包含テーブルの固定幅を設定する. さまざまなモニタ解像度があります - あなたはみんなを喜ばせることができないでしょう。静的幅を持つ特定の要素がない場合は、常に使用できます。 幅= "100％" あなたの包含テーブルの上。これにより、コンテンツがすべての電子メールクライアントの幅いっぱいに表示されます。.

しかし、多くの人にとってこの方法は少しゆるすぎる. 建設的なニュースレター 特にバナーや特定のサイズに設定された画像を使用する場合は、ほとんどの場合、固定幅が必要になります。私は一緒に働くことをお勧めします 500px〜600pxの最大文書幅. iPhoneと一部のBlackBerryモデルの横画面サイズは320pxに制限されているため、500pxでも電子メールテンプレートは 正しく収まるように縮小.

とにかくHTMLを使わずに電子メールを表示することを多くのモバイルユーザーが選択していることを考えると、これは大きな問題ではないはずです。デスクトップクライアントとWebメールクライアントのユーザーは、使用するオペレーティングシステムに関係なく、おそらく同様の設定を経験するでしょう。疑問があるとき いくつかのテンプレートデザインを作成する そして あなたが一番好きなものを選択してください!

3.ピクセル単位

ニュースレターで流動的な要素を使用しないのであれば、いくつかのサイズを設定する必要があるでしょう。それを保つようにしてください ピクセル（ピクセル） 他の種類のユニットではなく。割合は、多くのWebメールクライアントやソフトウェアウィンドウと容易に混同される可能性があります。いくつかのバグがあるにもかかわらず、少ないページ要素で、流動的なレイアウトは無傷で出ることができます.

しかし、ピクセルは常に確実なものです。 600pxの最大幅制限内で作業すると、実際にはたくさんのコンテンツを中に収めることができます。レイアウトを2列または3列に分割し、常にサイズをピクセル単位で書き込むと、露出が簡単になります。唯一の例外は フォントサイズ どこで ems 読者をよりよくサポートできますが、 em サイズ設定はパーセンテージと同様に異なります。 簡単にするために、ピクセルベースの配置に固執する.

4. CSSの可能性

電子メールのデザインはCSSスタイルの使用を破壊するためのものではないように思われるかもしれません。サポートされていない機能はたくさんありますが、多くの場合、CSSは依然として完全に受け入れ可能です。 Campaign Monitorには、電子メールクライアントによってリストされたサポートされているCSSプロパティの美しい表があります。すべてのような基本をサポートします フォントファミリー そして フォントスタイル, だからあなたはスキップすることができますあなたが望むならタグ.

境界線を押しすぎないように、フォントスタイルには注意してください。インラインスタイルに不快を感じた場合は、非推奨となっていてもHTMLフォントタグを使用することは常に可能です。あなたがCSSデザイナーであれば、システムを終了する必要はありませんが、CSSコーディングを省略するとバグのあるデザインになる可能性があります。例として フォント：12px / 14px Arial、sans-serif。 短縮形は多くのスペースを節約するのに役立ちますが、インラインスタイルで使用されている場合でも、Eメール設計には完全には受け入れられません。.

あなたの色の選択さえ 手書きで書く必要があります. のような六角形の色 #ccc または ＃e3f として完全に書かれている必要があります #cccccc または ＃ee33ff, それぞれ。あなたがCSSなしで必要なものを作ることができるなら、私はその道をお勧めしますが、一般的な考えに反してそれはほとんどの場合サポートされているのでCSSから完全に敬遠しないでください.

5.アンカーリンクのベストプラクティス

あなたはきっとあなたのニュースレターにいくつかのリンクを含めたくなるでしょう。これらはウェブ上の他のページへのアウトバウンドリンク、あるいはあなたのウェブサイト上で最も人気のあるページへのリンクかもしれません。さらに、ほとんどのフッターには、読者が電子メールプロセスからオプトアウトするための購読解除リンクが含まれていますが、これらのリンクすべてをデザインでどのように処理する必要がありますか。?

最初に注意する必要があるのは、電子メールクライアントは自分たちの設計に非常に気を悪くしていることです。インラインCSSを使っていても、リンクスタイルを上書きすることを多くの人が選択します。きちんとしたトリックは アンカー要素内にインラインカラーと追加のspanタグの両方を含める. リンクの色とスタイルがデザイン全体にとって重要な場合は、特別な注意を払う必要があります。以下に小さなコード例を追加しました。

リンクテキスト

ホバー効果は Outlook 2007/2010、Gmail、iOS、Androidではサポートされていません. あなたはまだ含めることをお勧めします a：ホバー Outlook 2000/2003、Hotmail、Apple Mail、そしてYahoo！アンカーセレクターはあまりサポートされていないので、個人的には部分的なユーザーエクスペリエンスにはあまり利点はありません。 2-3色のリンクを提供するだけ デザイン全体に使用する.

推定として、ユーザーはあなたのリンクが新しいタブまたはウィンドウで開くことを期待するでしょう。理想的には target = "_空白" すべてのブラウザがこの機能を認識するのに十分な属性である必要があります。アンカーリンクにこの属性を含めても、Lotus NotesやOutlookなどの電子メールソフトウェアに悪影響を及ぼすことはありません。.

6.すべての主要クライアントでテストする

最も人気のあるEメールクライアント（Campaign Monitorによって行われた）に関する最近の調査では、過去1年間で最も人気のあるEメールクライアントのうちの10つが示されています。ちょっと面倒ですがデザイナー すべての主要なEメールクライアントで彼らのニュースレターをチェックする習慣を身につけるべきです, 少なくともGmail、Hotmail、Yahoo！などのより一般的なクライアントについては郵便物.

これにはウェブメールだけではなく、Mac OS XとWindowsの両方でソフトウェアを操作することも含まれます。また彼らの図表に従って iOSメール そして アンドロイド 過去数年間で、両方ともトップ10に入った。実際、iPhone、iPod Touch、iPad MailはOutlookのすぐ下で最も人気のある2位にランクされています。残念ながら、いずれかのデバイスを所有せずにこれらをテストする方法はありません - したがって、他のオプションで解決する必要があります。.

モバイルサポートに関する1つのバグは、多くのiPhoneおよびAndroidモデルにあります。モバイル電子メールのレンダリングはしばしば テンプレート内のテキストのサイズを変更する. これはあなたのデザインにあまり影響を与えないかもしれませんが、それは何人かの読者にとって迷惑なことがあります。 CSSを使う -webkit-text-size-adjust：なし。, 意志 すべての構文解析エンジン全体で、デフォルトのテキストサイズでさえも確保する テストする必要なしに.

他のソフトウェアを使用している友人や同僚を知っているなら、 ニュースレターをテストする上で彼らの助けを求める. どちらでもできます 電子メールのコピーを送ってください 自分のデバイスをチェックする デバイスを借りる コーディングのバグを積極的に解決する。幸いなことに、OutlookはMacインストールバージョンを提供しているので、これらの最適化についてWindowsユーザーを追跡する必要はありませんが、Lotus NotesやWindows Mailに関しては、運が悪くなる可能性があります。.

代替案は 解決策を支払う Preview my E-mailのような、残念ながら無料のデモアカウントは提供されていませんが、彼らのサービスはあなたのデザインの素晴らしいプレビューを提供することで有名です。 AcidのEメールも同様のサービスで、無料のアカウントを提供していますが、すべてのクライアントでテストすることはできません。このような目的では、この目的は無効になります。オンラインレンダリングサービスは、代替コンピュータを使用せずに長期にわたって多くのニュースレターのテンプレートをテストする必要がある場合に便利ですが、基本的なことではありません。 強調しないで 全部テストできない場合!

7.常にWebベースのビューを提供する

読者があなたのEメールをネイティブに閲覧できるとは限らない. Web上のどこかに別のバージョンを提供する 安らぎと互換性の感覚を与えます。このプロセスを含める必要がない限り、完全に自動化することはできません。平文バージョン.

こうすれば、 すべてのHTMLタグを取り除く ニュースレターのレイアウトから。リンクやスタイルを含めることはできません。すべてのコンテンツは単純に プレーンテキストファイルとしてレイアウトする レンダリング機能のない読者のためのものです。これは確かに良い代替手段ですが、あなたが同じニュースレターの完全なWeb版を提供するときそれはそれを レンダリングのバグによるダメージを取り除きます. ほとんどの読者は最新のウェブブラウザを走らせているでしょう。それはあなたがあなたのニュースレターを完成させるためにスタイルを整えそして構築することができます.

ページの設定方法は 完全にあなたの選択. いくつかのウェブサイトは ブログ投稿全体を電子メールの内容の複製に充てる, 多分 追加情報. その他の意志 ナビゲーションに直接リンクせずにメインWebサイトから別のページを作成する. 読者はあなたのメインウェブサイトのテンプレートやサイドバーの内容に気を取られることはないので、この方法は有益です。.

8.画像コンテンツを追加する

画像は、読者にWebベースのソリューションを提供するもう1つの理由です。デフォルトでは、電子メールクライアント コンテンツから画像を削除するように設定されている. あなたのアドレスが安全なリストに追加されると、すべての画像がデフォルトで表示されますが、ユーザーは この設定を受け入れなければなりません それは確かに保証ではありません。ただ 画像がメインコンテンツの一部として必要とされていないことを確認する, しかしページ美学のための追加のトッピングとして含まれています.

グラフィックのエクスポートに着手したら、Eメール専用のイメージを作成するためのヒントがいくつかあります。あなたはいつもしたいと思うでしょう 幅と高さの両方の属性を設定します。 img タグ. 順番にこれらの指定なし, 一部のクライアントは画像コンテンツを歪める. あ オルト タグも有用であることが証明されるので、訪問者は画像コンテンツがロードされる前に何が含まれているのかを知るでしょう。.

前述のように、画像を電子メールに配置するのは難しい場合があります。. フロートを使用しない どうしても！画像 align = "left" アトリビュートはもっとうまく機能するでしょう。 正確な表のセルをマップする ニュースレターの上部、左側、または右側にイメージを合わせます。非常に多くのクライアント（特にモバイルクライアント）と完全に一致させることはできませんが、 画像を最適化する そして 最良の結果を得るためにファイルサイズを小さくしておく.

画像保存に関しては、 すべてのファイルを自分のWebサーバーに保管する. これは、他のイメージホストを使用するよりも、オンラインのニュースレターサービスにファイルをアップロードするよりも良い方法です。さらにあなたはすべき ニュースレターのコンテンツをフォルダ構造内の他の画像から分離する そのようです / img / email または / img / email / 2011.

9.迷惑メールフォルダを避ける!

これは聞き取りにくいですが、 すべての電子メールクライアントがニュースレターに優しいわけではありません. 毎日何十億もの電子メールが送信されており、その大多数にスパムや悪意のあるコンテンツが含まれているため、これらのセキュリティ対策を受信トレイに組み込んでおくことは明らかに安全対策のためです。.

しかし、インターネットマーケティングに関しては、最新のニュースレターががらくたに追いついてしまうのをお勧めできます。これが起こる可能性を減らすためにあなたはすべきです 簡単にするためにデザインを整理する. 迷惑な画像を作成しないでください または 何百ものキーワードでタイトルテキストを爆破する.

またしようとする あなたのコンテンツを簡潔にして話題にしておく. あなたはあなたのすべての記事やページに完全なコンテンツを含める必要はありません。長いリストの代わりにあなたのウェブサイトへの代替リンクで1つか2つの文を追加してみてください。の 電子メールの表示が短くなればなるほど、スパム検査に合格する可能性が高くなります。.