今日は、「ローテク」の問題について書きたいと思います。 ちなみに、私は JavaScript Weekly など、いくつかのニュースレターを購読しています。毎週、その週の大きなニュースをメールで受け取ります。 ある日、私もこんなメールを作れるかな?と考えました。 すると、それはそんなに簡単なことではないと気づきました。バックエンドと編集作業は別として、電子メール テンプレートを設計するだけでも多くの考慮が必要です。 このフォーマットされた電子メールは実際には Web ページであるため、正式名称は HTML 電子メールです。正しく表示できるかどうかは、電子メールクライアントによって完全に異なります。ほとんどの電子メール クライアント (Outlook や Gmail など) は HTML 設定をフィルター処理するため、電子メールが認識できなくなります。 HTML メールを書くコツは、15 年前に Web ページを作成するときに使用されたのと同じ方法を使用することだということが分かりました。私がまとめた執筆ガイドはこちらです。 1. ドキュメントタイプ 現在、最も互換性のある Doctype は XHTML 1.0 Strict です。実際、Gmail と Hotmail は Doctype を削除し、この Doctype に置き換えます。 XML/HTML コードコンテンツをクリップボードにコピー
この Doctype を使用すると、HTML5 構文は使用できなくなります。 2. レイアウト Web ページのレイアウトにはテーブルを使用する必要があります。まずは背景となる大きな外側のテーブルを配置します。 XML/HTML コードコンテンツをクリップボードにコピー
テーブルの border プロパティは 1 に設定されており、これは開発の便宜上のためです。正式にリリースされたら、このプロパティを 0 に設定します。 内側の層に2番目のテーブルを配置します。コンテンツを表示するために使用されます。 2 番目のテーブルの幅は、クライアントの表示幅を超えないように 600 ピクセルに設定されています。 XML/HTML コードコンテンツをクリップボードにコピー
メールの内容と同じ数の行を設定します。 3. 画像 引用できる外部リソースは画像のみです。スタイルシート ファイル、フォント ファイル、ビデオ ファイルなどのその他の外部リソースは一切参照できません。 一部のクライアントは画像リンクに境界線を追加するので、それを削除する必要があります。 CSSコードコンテンツをクリップボードにコピー
多くのクライアントではデフォルトで画像が表示されないため(Gmail など)、画像がなくてもメインコンテンツが読めることを確認してください。 4. インラインスタイル すべての CSS ルールはインラインで使用するのが最適です。 Web ページのヘッダーに配置されたスタイルは、クライアントによって削除される可能性があるからです。 CSS ルールのクライアント サポートについては、こちらをご覧ください。 また、一部のクライアントでは CSS の省略形がサポートされていないため、使用しないでください。たとえば、次のように書く代わりに、 XML/HTML コードコンテンツをクリップボードにコピー
表現したいなら XML/HTML コードコンテンツをクリップボードにコピー
次のように書きます: XML/HTML コードコンテンツをクリップボードにコピー
5. W3C 検証およびテストツール 一部のクライアントは非修飾属性を削除するため、最終的なコードが W3C チェックに合格することを保証します。また、テスト ツール (1、2、3) を使用して、さまざまなクライアントでの表示結果を確認します。 HTMLメールを送信する場合、MIMEタイプは使用できないことに注意してください。 XML/HTML コードコンテンツをクリップボードにコピー
代わりに、 XML/HTML コードコンテンツをクリップボードにコピー
送信ツールとしては、MailChimp と Campaign Monitor の使用を検討してください。 6. テンプレート 他の人がすでに作成したテンプレート (こちらとこちら) を使用することをお勧めします。インターネット上でさらに多くのテンプレートを見つけることができます。 独自のものを開発したい場合は、「HTML Email Boilerplate」と「Emailology」を参照してください。 |
<<: TypeScript のユニオン型、交差型、型ガード
>>: CentOS 8.4 に Docker をインストールする詳細なチュートリアル
この記事のガイド: テーブル内のデータを削除するには、削除と切り捨ての 2 つの方法があります。TR...
HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性も...
目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....
以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...
目次メイクファイルMakefile の命名とルールMakefile の仕組みMakefile変数Ma...
目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...
Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...
<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...
1. はじめに以前は、Python アプリケーションの作成を開始したい場合、最初のステップはマシンに...
<br />1年前、インターネット上にはinline-blockプロパティに関する記事は...
テーブル user があり、フィールドは id、nick_name、password、email、p...
目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...
1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...
Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...
この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...