ビジネス 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 分析

推薦する

Vuex のコアコンセプトと基本的な使用法の詳細な説明

目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...

Centos での Python のアップグレードと Mongodb ドライバーのインストールに関する問題

Python バージョンを確認します (python -V)。2.7 未満の場合は、アップグレードす...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

MySQL パーティションテーブルのベストプラクティスガイド

序文:パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...

UbuntuはCUDAの複数のバージョンをインストールし、いつでも切り替えることができます

CUDA とは何かを紹介するのではなく、複数の CUDA バージョンの共存とリアルタイム切り替えをど...

docker を使用して Kong クラスター操作を構築する

docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...

ドキュメントの場所の比較

<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...

JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...

仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策

Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...

MySQL フラッシュリストとダーティページフラッシュメカニズム

1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...

Dockerイメージ作成の完全なプロセス

目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...

Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。

目次Portainerは複数のDockerコンテナ環境を管理します2. Dockerを管理する2.1...

MySQL のデフォルトのストレージ エンジンを変更する方法

mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...