メールとHTML：避けるべき10の間違い

HTMLコードに密接に関連するものから、画像のデリケートな件名に関連するものまで、メールを作成するときに犯す可能性のある最大の間違いのリストを次に示します。

モバイル向けに効果的で完全に最適化された電子メールを作成することは、Webデザイナーやコーダーの特権ですか？ 私たちのためにコードを書く最新のドラッグアンドドロップエディターの出現のおかげで、もうありません。 しかし、 HTMLとCSSの基本的な知識を持っていることは、Eメールマーケティングの人々にとって基本的なスキルです。

これが、Eメールの世界のより技術的な側面のいくつかに焦点を当てたかった理由です。 暗闇にとどまることが多いが、戦略の成功にとって根本的に重要なものを検討します。

＃1過度に冗長なコードの使用

いくつかの点で、HTMLタグとCSSタグは同じ機能を実行します。 HTMLとCSSの両方でテーブルの背景色を確立する実際の例を見てみましょう。

オレンジは、2つのポイントで背景に定義されています。

• bgcolor =”＃e75c00” （タグテーブル内）;
• 背景色（CSS）。

これらの2つの属性は同じことを行います：オレンジ色の背景をコマンドします。 それらは重複し、同じ機能を実行する冗長なプロパティで電子メールを圧迫します。

私たちの推奨事項：

• コードをできるだけクリーンに保つ
• 不必要な繰り返しを避ける
• 通信の構造の概要を把握できるように、インデントを使用してコードを可能な限り順序付けておくようにしてください（HTMLformatterやClean CSSなど、これを行うオンラインサービスがいくつかあります）。
• テンプレートに加えられたマクロ変更の履歴を追跡します。

＃2コードに過度にコメントする

ほとんどの言語と同様に、 HTMLにコメントを追加して、記述されたコードに「サービス通信」を追加したり、完了または改善する必要があるものについて単に「メモ」を追加したりすることもできます。

コメントは役立つ場合がありますが、悪用しないように注意してください。電子メールの受信者にはコメントが表示されませんが、コメントはコミュニケーションに残り、重くなります。

＃3メール​​の内容を定義していない

電子メールを設計するときは、コードを作成する前であっても、後続の通信のガイドラインとして機能し、実装フェーズ中に変更してはならないいくつかのパラメーターを定義することを常に忘れないでください。

いくつかのパラメータを見てみましょう：

• メールの幅
• 画像サイズ
• 画像数
• ヘッダーで使用されるフォントサイズ
• 本文のフォントサイズ。

ブルース・リーの言葉を引用すると、「内容は水のようなものです。カップに水を入れると、それがカップになります。 ボトルに水を入れるとボトルになります。」

したがって、テキスト、画像、または行動の呼びかけは構造に適合している必要があり、その逆ではありません。

私たちの推奨事項：

• テンプレートのすべての部分を定義する
• コミュニケーションのさまざまな部分の間で一貫性を保つ
• 自分に与えたルールを尊重する
• ルールは破られる可能性がありますが、これは十分に認識して行う必要があります
• テンプレートがニーズを満たさない場合は、新しいテンプレートを定義することを検討してください。

＃4電話番号とインタラクティブアドレスを間違える

ご存知のように、多くの企業はフッターにいくつかの連絡先情報を含めています。 これらは、特にモバイルでは、住所と電話番号に関して重要な要素です。 どうして？

• それは実用的です 情報：クリックするだけで、データを管理するアプリ（カレンダー、電話、ナビゲーター）を開くことができます。
• 表示スペースが削減されます。

問題は、見苦しい青いリンクとランダムな下線の間のグラフィックレンダリングであることがよくあります。

これらのグラフィックの違いを克服するために小さな回避策に介入して、HTMLコードでいくつかのルールを破ることができます。

電話番号に関しては、簡単です。アンカータグを使用すると、hrefプロパティでtelを使用して電話番号を定義できるため、スペースや行を区切ることなく電話番号を追加できます。

代わりに、住所または日付を別の方法で処理する必要があります。 これらの場合、クライアント内に色を自動的に挿入するためにアンカータグを課すクラス（アドレス）を定義する必要があります（色：#ffffff;）。 とりわけ、各リンクのデフォルト機能である下線を削除する必要があります（text-decoration：none;）。 アドレスクラスの両方の属性に！importantがあり、プロパティに関係なくクライアントが適用する必要があることに注意してください。 それがなければ、回避策がその仕事をするという保証はありません。

＃5放棄されたタグまたは空のタグをクリーンアップしない

電子メールの全体的な重みを最小限に抑えるという目的を継続して、コンテンツがなくなった既存のコードの部分に注意を払ってください。 例が必要ですか？ おそらく一連のインラインスタイルを持つ<font>タグで、テキストは含まれていません。 電子メールには何も読み込まれませんが、タグは引き続き存在し、電子メールを不必要に圧迫します。

＃6検証されていないHTMLの使用

コード検証は、 W3Cによって作成された無料のアプリケーションであり、設計者と開発者がカスケードスタイルシート（CSS）をチェックするのに役立ちます。

W3Cは、エラーを示し、修正を提案することで私たちを助けてくれます。 このツールのおかげで、より大きな構造エラーを識別して修正することが可能です。

W3C標準に可能な限り近いクリーンなコードを用意することは理にかなっていますが、これが常に可能であるとは限らず、企業は多くの場合、ソリッド構造に一連の回避策を追加することを余儀なくされます。できるだけ多くのクライアントに正しく表示します。

＃7重すぎる画像を使用する

私たちは皆、グラフィックが電子メールでどのように表示されるか、そしてそれが受信者にどのように影響するかについて注意を払っています。 ただし、媒体である電子メールが考慮されていない場合は、このすべての注意を無効にすることができます。

特に帯域幅が無限ではないため、過度に重い画像の挿入を回避することが不可欠であるのはこのためです。

いくつかの推奨事項：

• 約50KBの最大重量を維持します
• 画像の解像度が72dpiであることを確認してください
• 画像をJPG、GIF、PNG形式で保存する

＃8過度に重いメール

マーケターは、別の目的または別のサポート（広告キャンペーン、Webサイトなど）のために作成された画像を電子メールに挿入することがよくあります。 特定の予防措置を講じないと、これらの画像の高さと幅はメール内で機能しません。

HTMLタグimg それらを最適化するのに役立ち、画像の高さと幅を定義できます。 たとえば、次のコード行では、高さを123ピクセル、幅を456ピクセルに設定しています。

<img src =” [percorsoImmagine]” height =” 123” width =” 456”>

パラメータを設定すると、実際のサイズに関係なく、指定した高さと幅で画像がブラウザに表示されます。

＃9最適化されていないアニメーションGIFの挿入

アニメーションGIFは確かにメッセージに多くの強調を加えます：それらは注意を引くための非常に効果的な手段です。 さらに、それらを電子メールに挿入するのは非常に簡単です。

ただし、アニメーションGIFのサイズは、アニメーションのフレーム数と寸法の両方に応じて急激に増加することを考慮すると、十分に注意する必要があります。

しかし、上記のすべてのため、一部のクライアントは、すべてのアニメーションが表示されない：展望2007年から2013年には、最初のフレームのみが表示されます。 それではどうすればいいですか？ アニメーションがアクティブ化されていなくてもメッセージが理解できるように、最初のフレームが包括的で完全であることを確認してください。

＃10画像の代替テキストを忘れる

ご存知のように、デフォルトでは一部の電子メールクライアントは画像を表示しませんが、多くのユーザーが（さまざまな理由で）画像を無効にすることを好むため、それだけではありません。

これらの状況を緩衝する方法は？ いくつかのコードプロパティ：

• タイトル。マウスポインタを画像領域の上に置いたときに画像のコンテンツを表示できます（マウスオーバー）。
• alt 。画像がアップロードされていない場合に表示されるテキスト（altテキスト）を定義します。

私たちの推奨事項：

• 画像に常にalt属性とtitle属性が設定されていることを確認してください
• 挿入されたテキストを長くしすぎないでください。コミュニケーションのレイアウトが損なわれたり（altの場合）、使いづらくなったりする可能性があります（タイトルの場合）。
• 特に背景が色付きの場合は、代替テキストの色がサイズと色の両方で読みやすいことを確認してください
• 代替テキストにはリンクで下線を引いたままにして、コミュニケーション内でその機能を簡単に認識できるようにすることをお勧めします。