ビジネス HTML メール作成に関する提案

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減できるだけでなく、情報を顧客に直接かつ正確に届けることもできます。

私が今日研究している問題は、技術的な側面から始めて、ユーザーのビジョンとメール クライアントの両方と互換性のある優れた電子メールを作成する方法です。

1. HTMLまたはプレーンテキストを選択する
シンプルなテキストを好む人もいれば、リッチな HTML を好む人もいます。どのように選択すればよいのでしょうか?
マーケティング メールの場合、HTML 形式 (画像) を使用することをお勧めします。

確認/リマインダー/通知メールの場合は、テキストまたはシンプルな HTML (画像) を使用することをお勧めします。

なぜこれら 2 種類の電子メールに異なる制作方法を使用するのでしょうか? その理由は次のとおりです。
マーケティング メールの内容は豊富で多様ですが、確認メールの内容は単一でユニークです。
マーケティングメールでは、顧客はコンテンツの豊富さと視覚効果の美しさに注目します。
確認メールでは、お客様に確認情報を非常に直接的に見ていただく必要があります。複雑なコンテンツや視覚効果は、お客様がメールのメインコンテンツである確認情報を無視するだけになります。
(以下では、マーケティングメールの HTML 作成に焦点を当てます)

2. テーブルレイアウト + CSS に基づく基本的な HTML スキル<br />カンフーには 2 種類あります。1 つは極度に陽で極度にハードなもの、もう 1 つは極度に陰で極度にソフトなものです。張三鋒が頂点に達したのは、武術の基礎がしっかりしていて、少林寺の基本的なスキルがしっかりしていたため、極度に陰で極度に陽であるこの太極拳を実現できたからです。
HTML メールについても同様です。現在、従来の Outlook、Thunderbird、Lotus Notes、オンラインの Mac Mail、Gmail、Hotmail など、さまざまな種類のメール閲覧クライアントがあることはご存じのとおりです。メールの解釈はそれぞれ異なります。ほとんどのオンライン メール システムでは、<head></head> タグ間のコードはブロックされます。

異なるクライアントを使用するすべてのユーザーが同じ電子メールを見ることができるようにするためには、HTML の基本的なスキルを十分に理解している必要があります。 DIV+CSS だと言う人もいれば、SEO タグ セマンティクスだと言う人もいます。Web 開発者として、これら 2 つの一般的な HTML 開発のアイデアを持つことは非常に人気があることは否定できません。ただし、これは電子メールの作成には当てはまりません。私たちの目標は、顧客がさまざまなメール クライアントで同じ情報コンテンツを表示できるようにすることです。そのためには、最も原始的な組版方法であるテーブル レイアウト + CSS が必要です。現在の電子メール クライアントの HTML と CSS のサポートを見てみましょう (画像):

*Hotmailは<body></body>間の<style>を解析できますが、<head></head>間の<style>もブロックします。

3. HTML メールを作成するときは、次の点に注意する必要があります。

  1. スタイルは、独立した外部ファイルではなく、HTML タグ内に記述し、<style></style> (picture) の間に記述しないでください。

  2. たとえ繰り返しが多くて面倒な場合でも、コンテンツを含むすべてのタグに CSS を追加します。
  3. HTML 要素タグを配置するために CSS を使用しないでください。
    配置には絶対サイズ (ピクセル) と相対サイズ (パーセンテージ) の組み合わせを使用します。
  4. 電子メールに Javascript、Flash、または特殊なタグ (marquee など) を挿入しないでください。
    ほとんどの電子メール クライアントは、Flash や Javascript、および一部の特殊なタグや属性をブロックします。
  5. 背景画像は使用しないでください
    ほとんどのオンライン メール クライアントでは、背景画像プロパティがブロックされています。Gmail では、背景画像は表示されません。
  6. 各画像の幅、高さ、Alt属性値を指定します。
    画像の src 属性には絶対アドレスを使用する必要があります。
    正解: <img src=”http://blog.54575.com/logo.gif” width=”297″ height=”160″ alt=”よく生きる = 有意義に生きる” />
    エラー: <img src=”logo.gif” />
  7. 重要な情報を示すために写真を使用しないでください。展示会の時間、場所、内容などの情報は非常に重要です。写真が表示されない可能性があることを考慮すると、これらの内容を写真で表示することは推奨されません。
    画像に配置する場合でも、メール本文ではテキストで表現し、画像のAlt属性にその内容を追加してください。
  8. 統合された UTF-8 エンコーディングを使用します。

4.メールの幅は 650 ピクセルですか? それとも 600 ピクセルですか?
ウェブページの現在の標準の幅は 950/960 ピクセルであり、これはモニターの解像度によって異なることは誰もが知っています。
電子メールは通常、ソフトウェア クライアントとオンライン クライアントの 2 つの方法で開かれます (画像)。
*マイクロソフトOutlook2003

*NetEase 163 メールボックス

図からわかるように、メールは全画面で表示されないことがよくあります。
ウェブページの標準幅である960/950pxを使用すると、メールコンテンツの一部が隠れてしまい、水平と垂直の2つのスクロールバーが表示され、顧客が閲覧するのに不便になります。
しかし、幅が狭すぎるとスペースの無駄が生じます(図)

では、HTML メールの最適な幅はどれくらいでしょうか?まず、いくつかの有名企業が HTML メールを作成するときに使用する幅を見てみましょう。

網易有道: 600ピクセル

QQメンバー: 650px

Dell ホーム&オフィス: 650px

シスコウェブエックス: 600ピクセル

これらの有名な IT 企業のマーケティング メールには、600 ピクセルと 650 ピクセルの 2 つの幅があることがわかります。
EDM と Web デザインにおける 4 年間の経験に基づいて、私は後者、つまり HTML マーケティング メールの標準幅として 650 ピクセルを好みます。
650px の利点:
メールの内容を2列に分割する場合、650pxはX+10+Yに分割できます。ここで、X=左列、Y=右列、10は間隔、X+Y=640、640は20で割り切れるので、 640=2×2x2×2x2×2x10です。
メールの内容を3列に分割すると、650pxはX+10+Y+10+Zに分割できます。同様に、X+Y+Z=630となり、630は30で割り切れるので、 630=3×3x7×10となります。
なぜこれが分割されるのかを理解するには、Web ページのラスタライズに関するこの調査を確認してください。
そのため、600px ではなく 650px を選択しました。
もちろん、これはあくまでも私の個人的な標準であり、まだ世界標準ではありませんが、いつの日かこの幅が HTML メールの作成者と受信者の大多数に認識されるようになることを願っています。

<<:  ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります

>>:  Douyin ロゴを作成する手順の CSS3 分析

推薦する

Nodejs のグローバル変数とグローバルオブジェクトの知識ポイントと使用方法の詳細

1. グローバルオブジェクトすべてのモジュールは呼び出すことができます1) global: ブラウザ...

MySQL スケジュールされたデータベース バックアップ操作の例

この記事では、MySQL のスケジュールされたデータベース バックアップ操作の例について説明します。...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

docker tagとdocker pushの使い方の詳しい説明

Dockerタグの詳しい説明docker tag コマンドの使い方と、ローカルイメージを daocl...

Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...

CSS で TikTok テキスト揺れエフェクトを実装する例

日々の開発において、フロントエンドの学生はアニメーションやデザインについてよく議論します。デザイナー...

CSSフロートの特性についての簡単な説明

この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...

docker を使用してコード サーバーをデプロイする方法

画像をプルする # docker pull codercom/code-server # Docke...

フロートをクリアするための CSS メソッドの概要

フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...

完全なMySQL学習ノート

目次MyISAM と InnoDBパフォーマンスの低下と SQL の速度低下の理由: MySQL 実...

写真とテキストによる MySQL 8.0.21 インストール チュートリアル

1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

シンプルな画像切り替えを実現するJavaScript

この記事では、JavaScriptで簡単な画像切り替えを実現するための具体的なコードを参考までに紹介...

MySQL スロークエリログの有効化と設定

導入MySQL スロー クエリ ログは、問題のある SQL ステートメントのトラブルシューティングや...