Blog

私たちは、私たちの製品とブランドの新しいデザインに一致するように、メールに新鮮な外観を与えたかったのです。 Outlookは同意しませんでした。メールのフォーマットについて何を学び、最終的に成功しましたか？

電子メールを開発するように依頼され、それをさまざまな電子メールクライアントで機能させることができたとしたら、それが何であるかを知っています。途中で諦めかけたにも関わらず、成功しました！私たちは多くのことを学び、希望する電子メールデザインの難しい部分に対処するためのいくつかの新しい方法を見つけました。

この記事では、私の調査結果の要約を紹介します。うまくいけば、彼らはあなたの一日を明るくするでしょう...またはあなたのメール。

最近、製品のUIを再設計し、光沢のある新しい外観を追加しました。

さまざまな機会にシステムによって送信された電子メール通知は、再設計の最後の欠落部分でした。当社のソリューションはSaaSコンテンツ管理システムであるため、基本的なユーザーアカウント関連の電子メールだけでなく、特定のコンテンツに関連するコメントやタスクなど、ワークフローとレビューに関連する通知も生成します。

これらの電子メールはすべて、Razorテンプレートを使用して.NETバックエンドで生成されるため、一部の1回限りのマーケティング電子メールとは異なり、好きなデザインを使用して大量の画像をつなぎ合わせることができませんでした。実際には、その場でレイアウトを生成し、さまざまなコンテンツを入力する必要がありました。

堅牢な電子メールを開発することがなぜそれほど重要なのですか？

結局のところ、電子メールはHTML本文をサポートしているので、平均的なWeb開発者にとっては簡単な作業ですよね。

さて、もしあなたがタイムマシンを使いたいと思ったことがあるなら、これはあなたが得ることができるのとほぼ同じくらいです。いくつかの電子メールの開発を開始し、そこにあるさまざまな電子メールクライアント（最近のものも含む）と互換性を持たせるようにしてください。そうすれば、2000年以前のチケットを手に入れることができます。 Internet Explorerは、さらに悪いことに、何度も繰り返します。それはOutlookとそのHTMLレンダリングエンジンに帰着します。これは驚くべきことにHTMLをレンダリングせず、インポートするだけです。

実際の例、私たち自身のメール

これは、UXチームによるそのような電子メール設計の例です。信頼できる方法で実装しようとすると、ブラウザーの世界では些細なことのように見えますが、電子メールクライアントの世界ではかなり複雑に見えるいくつかの側面に気付くかもしれません。

それらの機能は次のとおりです。

• 角が丸い容器
• 影付きの丸いボタン
• テキストに垂直に配置された丸みを帯びたタグ
• いくつかの画像
• max-widthを中心としたグローバルなメールレイアウト。

UXデザイナーから得たものの例を次に示します。

ネタバレ注意：私たちはそれをすべて実装することができました。この一連の記事を終えると、その方法もわかります。

Outlookは依然として最大の敵なので、近くに置いてください

マイクロソフトのさまざまなテクノロジや製品をすべて気に入っているのと同じくらい、Outlookを征服したとしても、Outlookは嫌いだと心から言えます。公式で、恥ずかしくないです。

問題は、HTMLのレンダリングエンジンとしてMSWordを使用していることです。はい、あなたはそれを正しく読んでいます、MSWord！ MS Word！...非常識です。理由は推測できます。その開発者は無料のリッチテキストエディタを手に入れました...しかし、どのくらいの費用がかかりますか？

これはWindows上のOutlookにのみ適用されると言わざるを得ません。 Macでは、ブラウザベースのレンダリングエンジンを使用します。

いくつかのアイデアを与えるために、これはOutlook固有のハックが欠落しているときにOutlookがかなり標準的なHTMLを提供するものです。それは完全に醜いわけではありませんが、多くの面で必要なデザインと一致していません。

これは基本的に、今日のHTMLで慣れている典型的なことのほとんどを実行できないことを意味します。それはずっと前に（2010年のように）まともなレンダリングエンジンに改良されるべきでしたが、そうではありませんでした。そのため、もう一度対処し、VMLなどの廃止されたテクノロジーを使用する必要があります。

「友達と敵を近づけて」ということわざはここでも当てはまります。それから逃れることはできません。あなたはそれと仲良くし、あなたの信仰を受け入れ、学び、そしてあなたの卓越性でそれを打ち負かすことができるだけです！

そうは言っても、VMLはこの旅の友達である必要があります。 VMLがどのように機能し、何が可能かを知っていれば、すでに戦いの半分を勝ち取っているからです。

ここで、電子メールのさまざまな側面を実装する方法を紹介します...少なくとも電子メールの再設計中に達成できたものについては...しかしそれでも何かです！

迅速で一括テスト：PaperCutSMTPのヘルプ

まず、メールをメールクライアントに送信したり、すばやく確認したりするための効率的な方法が必要です。

PaperCut SMTPは、電子メールをキャプチャするためのlocalhostサーバーを作成する優れたツールです。

単体テストによって生成およびアサートされたすべての電子メールをキャプチャし、テストが実行されるたびにテストlocalhostあなたがする必要があるのは、 new SmtpClient('localhost')新しいインスタンスを作成し、それを使用して電子メールを送信することです。これにより、電子メールの変更を検証する速度が劇的に向上します。

PaperCutは、HTMLレンダリングエンジンを使用して電子メールのかなり良いビューを提供するため、電子メールが期待どおりに表示されることを確認するための良い出発点です。

しかし...それは一見したところOutlookビューを検証しません。幸い、PaperCutターゲットフォルダーを開き、そこからOutlookで.eml手動で、1つずつ、またはスクリプトを使用して。

私のOutlookは、受信トレイ内のすべての電子メールを他のすべてのデバイスと自動的に同期するExchangeサーバーに接続されているため、Outlookにこれらを含めると、これらのさまざまなデバイスで簡単にテストするための非常に優れたエントリが得られます。それらを同じメールアカウントに接続する必要があります。

SmtpClient調整することにより、SMTPを介してテストするために同じ電子メールのセットをGmailにダンプします。

 new SmtpClient('smtp.gmail.com') { EnableSsl = true, Credentials = new System.Net.NetworkCredential(userName, password), Port = 587 }

簡単な実験のためのHTMLファイル

実際の.emlファイルをテストするだけでなく、代わりにローカルファイルシステムにダンプするか、SMTPサーバーと一緒にダンプすると、HTMLフォームを試すこともできます。

まず、file：/// c：/ temp / emailsなどの実際のブラウザでそれらを簡単に開いて参照し、HTMLベースの電子メールクライアント用にCSSとマークアップを調整してみることができます。

第二に、Outlookには巧妙なトリックがあります。そのHTMLファイルをOutlookのメッセージのリストにドラッグすると、そこから新しいドラフトメッセージが作成されますが、最初にWordへのHTMLインポートを実行します。これにより、メッセージがどのように表示されるかをほぼ完全にプレビューできます。実際に送信された電子メールと比較して、そこにわずか〜1pxの違いがあることに気付いたので、ほぼ言っていますが、それでも十分な概算です。

このようにして、Outlookの例外とVMLを使用して、あらゆる種類の実験を簡単に繰り返すことができます。

注：これらのファイルをMS Wordの新しいファイルダイアログにドラッグすることもできます。Wordドキュメントとして開きます（これもHTMLから変換されます）が、同じマシン上でもOutlookのように正確なビューを提供しません。 。

外部検証サービス

https://www.emailonacid.com/やhttps://www.litmus.com/などのサービスでプレビューを提供できるため、さまざまな電子メールクライアントで電子メールの内容がどのように表示されるかを知ることができます。

あなたが知っておくべき絶対に基本的なこと

電子メールを効果的にテストおよび実験する方法についていくつかの指針を学んだので、次に飛び込みましょう。

リンクされた画像は最高のようです

さまざまなアプローチを試みました。最初はBase64で画像をインライン化するのが最適であるように見えましたが、さらに徹底的なテストを行った結果、Outlookにはインライン画像のPNG透過性に問題があり、Gmailはインライン画像をまったくサポートしていないことがわかりました（おそらくセキュリティ上の理由から）。そのため、リンクされた画像に戻しました。

カスタムフォントが機能することを期待しないでください

これは単純です...すべての電子メールクライアントでカスタムフォントを機能させる方法はないので、時間を節約するために今すぐあきらめたほうがよいでしょう。既存のリソースに基づいて、カスタムリンクされたWebフォントで動作するクライアントをほとんど作成できない場合がありますが、それは本当に価値がありますか？私はそうは言いません。

font-familyを使用していますfont-family: 'Helvetica', Helvetica, Arial, sans-serif; GT Walsheim Proであるアプリフォントに最もよく一致します。

メールフォントの詳細については、こちらをご覧ください。

少し双極性で、使用条件（Outlookとその他）

見通しは悪く、他の人とはまったく異なりますよね？したがって、基本的には、「通常の」HTML電子メールクライアント用の電子メールを開発し、次にOutlook用に「個別に」開発することです。

経験則では、基本的に2つのバージョンの電子メールを1つにまとめ、互いに干渉しないようにします。

これを実現するために、2つの簡単な条件を使用しています。

Outlookのみのコード：

Outlookクライアント以外でのみ表示するコード：

 
< p > Something for everything but Outlook  p >                

2番目の条件では、Outlookの有効な条件を作成しながら、他の方法では無効なマークアップを適切に無視するために、追加のコメントラッピングを使用する必要があることに注意してください。

Outlookでコンテンツを中央に配置する方法

通常の（HTML成熟した）クライアントでは、標準のmax-widthとmargin-auto使用できます。 Outlookの場合、特別なラッパーを使用する必要があります。

コードのこの部分をBODY下に含めて、すべての電子メールクライアントで600px幅の中央揃えの電子メールを取得します。

 
< div style = 'width: 100%;display:block;margin:0 auto;max-width:600px;' >
 HERE COMES THE EMAIL CONTENT  div >

Outlookの場合に条件付きラッパーを簡単に適用する方法もここで確認できます。

常にインラインCSSですが、1つの例外があります

ほとんどの電子メールクライアントはHEAD BODY一部のプロセススタイルのみを処理するため（たとえば、Outlook-イェーイ！）、すべてが機能することを確認するためにCSSをHTMLにインライン化するのが最善です。

これを行うには、 PreMailerライブラリを使用します。ただし、注意して、次のことを確認してください。

• インライン化してもコメントは削除されません。Outlookの例外を発生させるためにコメントが必要になるためです。
• インライン化は、Outlook用の本文のstyleタグを削除しません（以下を参照）。

また、より複雑なCSSセレクターについては忘れてください。PreMailerはいくつかをサポートしていますが、範囲は非常に限られています。 :firstと:lastのみを使用したと思います。 CSSをインライン化しないと、クライアントはとにかくそれをサポートしません。

この規則には1つの例外があります。 Outlookでは、フォントファミリをグローバルに適用する必要があるため、この1つのスタイルタグを電子メールのBODYもちろん、お好みのフォントで。

Outlook用VML

これは与えられたものです。 HTMLコードで不可能なことはすべて、OutlookのVMLで行う必要があります。ただし、画像で模倣したり、完全に省略したりする場合を除きます。

電子メールでVMLオブジェクトを使用する前に、必ず名前空間ディレクティブをHTML

 < html xmlns = 'http://www.w3.org/1999/xhtml' xmlns:v = 'urn:schemas-microsoft-com:vml' xmlns:o = 'urn:schemas-microsoft-com:office:office' >

Outlookの適切なスケーリングと互換モード

HEADタグに配置する次の2つの調整を使用することをお勧めします。

IEの互換性メタデータを追加して、最新バージョンを使用します。これがないと、IEはVMLを認識せず、以前のバージョンは境界半径を認識しないため、誰かがブラウザオプションを使用して電子メールを開いた場合、角の丸みなどの高度な機能は機能しません。この互換性メタデータのおかげで、最新バージョンと、標準の電子メールクライアント用のHTMLおよびCSSが使用されます。

 < meta http-equiv = 'X-UA-Compatible' content = 'IE=edge' >

Officeドキュメントのメタデータとビューポートを追加して、適切なスケーリングを適用します。これがないと、画像サイズやVMLオブジェクトの配置が歪んで一貫性がなくなる可能性があります。

 
< meta name = 'viewport' content = 'width=device-width, initial-scale=1' >

設計システムとコンポーネント

いくつかのOutlook例外があるもののコードの繰り返しとコピー貼り付けを回避する方法を見つけてください。そうしないと、すぐにテーブルで迷子になり、HTML条件がいたるところに複製されます。

電子メールクライアントの依存関係の複雑さとOutlookのカスタマイズを抽象化する、いくつかの主要なコンポーネントを使用して、最小限の設計システムを構築しました。

独自のコンポーネントセットは次のもので構成されています。

• ボックス-境界線、背景、内側と外側の間隔、さらには境界線の半径など、慣れ親しんだすべての機能を備えたDIVについて考えてみてください。
• スタック-水平または垂直の間隔が定義されたアイテムのリスト。
• ボタン-角が丸いボタン、さらには影も付いたボタンです。
• ワークフローラベル-定義された色、テキスト、および丸みを帯びた角がテキスト内にインラインで配置された「ピル」（タグ）。
• 言及-言及されたのがあなたである場合は、色付きのテキストまたはワークフローラベルに類似した「ピル」のいずれか。
• 見出し2-小さい見出しを使用しないH2には特別な処理のみが必要ですH1は常にメール本文の上部にあり、Outlookの間隔に特別な処理は必要ありません。通常のテキストに関連する他のすべてが使用されます。

個々のコンポーネントがデザインにどのようにマッピングされるかの例を次に示します。

そして、これは、それらがコンテナを表すかスタンドアロンエンティティを表すかに基づいて、Razorコードで通常使用する方法です。

 @using (Kentico.BeginBox( new BoxModel( padding: Spacing.XL, backgroundColor: Color.Desk ) { Paddings = { X = Spacing.XL, Y = Spacing.L } })) {  '150' height= '46' class = 'header__img' alt= 'Kentico Kontent' src= '@Icons.KontentLogo' > } @Kentico.Button(Model.GoToActionUrl, 'Open subscription details' )

技術面では、Razorの部分ビューまたは単純なヘルパーを使用してHTML文字列を返し、マークアップをレンダリングしています。

役立つリソース

あなたは勝つために適切な知識でこの戦いを戦う必要があります。これは、私たちの旅の中で非常に役立つと思ったリソースのリストです。彼らは行き止まりを回避するのに役立ち、適切な代替案の提案を提供します。

• https://www.campaignmonitor.com/css/-個々の電子メールクライアントでサポートされている機能の膨大なリスト、および各電子メールクライアントとその詳細の簡単な説明。
• https://www.caniemail.com/-基本的にメールには「使用できますか」。特定の機能に興味がある場合に非常に便利です。
• https://buttons.cm/-丸いボタン。しかし、次の記事の1つでさらに詳しく説明します。
• https://backgrounds.cm/-電子メールの背景画像。これらは使用しませんでしたが、VMLオブジェクトを全幅に拡張するなど、いくつかの概念を見るのは良いことです。
• https://www.w3.org/TR/NOTE-VML-Outlookの戦いのためのあなたの主要な大砲。 VMLは非常に柔軟性があり（ちょっと昔ながらのSVG）、電子メールでXとYを実行する方法を検索するときに通常表示されるよりもはるかに多くの機能を提供します。今後の記事でお見せします。

グーグルだけで通常の疑わしいキーワード（電子メール、Outlook、そしてあなたが今しているトピック）はもっとたくさんあります、これらのほとんどがあなたが知識を使って少し曲げる必要があるかもしれないかなり具体的なアドバイスを与えることを期待してください上記の情報源から。

全体としての私の最善のアドバイス：最終的なコードだけでなく、概念について考えてください。

もうそこにいますか？

これは始まりにすぎない。このシリーズの次の記事では、これらの個々のコンポーネントのいくつかの実装の詳細とそれらの特定の課題について説明します。それらのいくつかは、私がどこでもグーグルできないオリジナルのソリューションを作成することを私に要求しました。以下のそれぞれの部品を見つけてください。

• 2021年の電子メールの実装：生成された電子メールの基本とテスト方法
• 2021年の電子メールの実装：Outlookで機能する影付きの丸いボタン（7月21日発売）
• 2021年の電子メールの実装：Outlookで機能する垂直方向の配置でインラインタグを作成する方法（7月28日予定）
• 2021年の電子メールの実装：テーブルの間隔と垂直方向の配置に関するOutlookの詳細（8月4日公開）
• 2021年の電子メールの実装：Outlookのコンテナーに丸みを帯びた角を追加する方法（8月11日予定）

次の記事では、丸みを帯びたボタンを作成する方法と、最も重要なこととして、一見不可能に見える影が実際にどのように可能であるかを示します。