HTML電子メール開(kāi)発ワークフロー：効率を改善するための実用的なガイド

各Web開(kāi)発者には、優(yōu)先編集者、補(bǔ)助ツール、個(gè)人プロジェクトプロセスなど、獨(dú)自の獨(dú)自の作業(yè)方法があります。大規(guī)模または複雑なプロジェクトの場(chǎng)合、明確な開(kāi)発パスが重要であり、時(shí)間を節(jié)約し、エラーを最小限に抑えます。

これは、私の経験においてHTML電子メールプロジェクトで特に重要です。電子メールには、それ自體が特に複雑ではない多くの繰り返しタスクが必要です（少なくとも常にではありませんが）が、チェックする必要がある多數(shù)の要素とタスクのために難しい場(chǎng)合があります。

ここで、私の個(gè)人的なHTML電子メール開(kāi)発ワークフローを説明しようとします。私はあなたが彼らから好きなセクションを選ぶことができることを願(yuàn)っています。

キーポイント

• 著者は、HTML電子メールプロジェクトの明確な開(kāi)発パスの重要性を強(qiáng)調(diào)し、時(shí)間を節(jié)約し、多數(shù)の繰り返しタスクによって引き起こされるエラーを最小限に抑えます。
HTMLのJadeなどのPreprocessorsを使用すると、特にネストされたテーブルの観點(diǎn)から、長(zhǎng)いコードの必要性を減らすことにより、開(kāi)発プロセスを簡(jiǎn)素化できます。 CodeKitやCODAなどのツールを使用してファイルをコンパイルし、作業(yè)をリアルタイムでプレビューすることをお?jiǎng)幛幛筏蓼埂?
CSSファイルのインラインまたは埋め込み、Litmus APIでのテスト、追加のテストメールの送信など、ワークフローの最後のいくつかのステップを自動(dòng)化するために、Gulp Email Builderパッケージを使用することをお?jiǎng)幛幛筏蓼埂?
優(yōu)れたHTML電子メール開(kāi)発ワークフローは、生産性を大幅に向上させることができます。著者のワークフローには、ローカルテストの作成、CSSインライン、およびGulpメールビルダーを使用した自動(dòng)テストが含まれます。これらの手順をカスタマイズすることは、あなたの個(gè)人的な好みとニーズに合わせて推奨されます。

典型的な電子メール開(kāi)発ワークフロー

クラシックメール開(kāi)発ワークフローは、3つの主要な手順で構(gòu)成されています。

作成（予備のローカルテストを?qū)g施）

• cssインライン
• テスト

最終テスト（インラインCSSを使用）は、複數(shù)回繰り返す必要がある場(chǎng)合があるため、最も時(shí)間のかかるステップです。 「CSSインライン」および「テスト」タスクには、追加の作業(yè)と注意が必要です。まず、元の作業(yè)コピーをインラインコピーと區(qū)別するように注意する必要があります。さらに、最終テストでは、さまざまなメールクライアントに対してデザインを確認(rèn)するために、インラインHTMLをさまざまなアカウントに送信する必要があります。

ほとんどのクライアントはHTMLコードをボディに貼り付けることで電子メールを作成することを許可していないため、電子メールでコードを送信するのは少し難しいです（私が知っているのはThunderbirdだけです）。しかし、すべてのテストでは、電子メール、インラインCSS、貼り付けコードなどを記述するために多くの操作が必要です。

テストベッドアカウント（litmus、酸、キャンペーンモニターなどに関するメール）がある場(chǎng)合、インラインコードをテストベッドに送信することで最終テストタスクを簡(jiǎn)素化できますが、より正確なテストのためには、コードを送信する必要があります。郵便。過(guò)去には、小さなPHPスクリプトを使用してテストメールを送信しました。これにより、時(shí)間を節(jié)約できましたが、特定のタスクの繰り返しが必要でした。

CSSに戻ると、2つのファイルで作業(yè)する必要がある場(chǎng)合があります。1つはインライン用、もう1つはメディアクエリをサポートするクライアント用）です。

CSSをHTMLファイルに直接編集してから、インラインツール（MailChimpインラインツールなど）を起動(dòng)し、最後に2番目のCSSをインラインファイルに埋め込む必要があります（それを書(shū)き留めるのは面倒です！）

ワークフロー計(jì)畫(huà)を詳細(xì)に確認(rèn)できるようになりました。

本當(dāng)に効率的なワークフローを取得するために、多くの問(wèn)題は未解決のままであり、創(chuàng)造的なステップよりもはるかに繰り返しのステップがあり、それがめったに良い結(jié)果につながることはありません。

幸いなことに、私たちはまだ使用する方法をいくつか持っています：プリプロセッサとタスクランナー。

HTMLおよびCSSプリプロセッサを追加 を追加します

私がプリプロセッサの使用を始めたとき、私はすぐにそれらが電子メール開(kāi)発にどれほど役に立つかに気付きました。 HTMLとCSSの両方で、プレ前セッサーは長(zhǎng)いコード（特にHTML）の必要性を簡(jiǎn)単に簡(jiǎn)素化できます。

私は主にHTMLにJadeを使用し、CSSには少ないですが、好きなテクノロジーを選択できます。 Jadeは、ネストされたテーブルなどの重複した混亂したコードを扱う場(chǎng)合に非常に便利です。次の3層ネストテーブルの例をご覧ください。

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

同じコードを生成するJadeコードは次のとおりです。

ご覧のとおり、閉鎖されていないタグに問(wèn)題はもうありません。コードは読みやすいです。

table(width="100%" )
  tbody
    tr
      td(width="100%")
        table( align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

Jadeを使用すると、複雑なテンプレートを作成し、獨(dú)自のコードスニペットのライブラリを構(gòu)築して、より多くのプロジェクトでコードを再利用できます。少ないか、SASSの場(chǎng)合、同じことができます。

GulpまたはGruntでファイルをコンパイルすることはできますが、作業(yè)の迅速なプレビューのために、CodaとCodeKitが最適なソリューションを提供することがわかりました。

ワークフローの「ローカルテスト」タスクは、作業(yè)に関する最初のフィードバックを提供し、重要なことに、他のアクションは必要ありません。

CodeKitは、Jadeをコンパイルし、保存しているファイルを減らし、プロジェクトをリアルタイムでプレビューできます。一方、Codaはファイルを編集し、別のウィンドウで自動(dòng)的に更新されたファイルをプレビューできます。

これらの手順はすべて完全に自動(dòng)化されており、あまり楽しくて繰り返しのタスクではなく、デザインに作業(yè)を集中できます。

今では、作成用のJadeと少ないファイルがあり、プレビュー用のHTMLおよびCSSファイルをコンパイルしました。次のステップは、最終テストのためにすべてをまとめることです。

gulp

でのクイックテスト

ワークフローの最後のいくつかのステップを自動(dòng)化するために、多くのガルプまたはグラントスクリプトを見(jiàn)ました。 NPMは多くのソリューションを提供していますが、最終的にはGulp Email Builderパッケージを選択しました。このパッケージは、大規(guī)模なプロジェクトのGulpバージョンであり、必要に応じてgruntバージョンもあります。

電子メールビルダーを使用すると、CSSファイルをインラインまたは埋め込み、Litmus APIを使用してテストし、追加のテストメールを送信できます。

電子メールビルダーを使用するには、もちろんGulpをインストールする必要があります。 「BootstrapアイコンをGulpでカスタマイズする」という投稿でこれを取り上げました。そのため、ヘルプについては投稿を確認(rèn)できます。さらに、GulpとGruntワークフローに関するEtienne Margraffの記事を読むことができます。

電子メールビルダーに加えて、Gulp-Replaceパッケージも使用するため、インストールする必要があります。

すべてのgulpタスクと同様に、gulpfile.js：

を設(shè)定する必要があります。

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

最初に、必要なすべてのパッケージを含め、4つの変數(shù)を設(shè)定します。

current_dateは、現(xiàn)在の日付を表す文字列です。
email_subject
remote_imgs_basepathは、畫(huà)像を含むリモートフォルダーのURLです。畫(huà)像の相対パスを設(shè)定してローカルテストを?qū)g行するために使用します（必要なすべての変更をすべて簡(jiǎn)単に作成できます）が、最終テスト（およびタスクを送信）では、畫(huà)像をリモートフォルダーにアップロードする必要があるため、使用します。すべてのsrcプロパティをremote_imgs_basepathに変更するためのgulp交換
email_builder_optionsは、電子メールビルダーの構(gòu)成に使用されるオブジェクト
この例では、email_builder_optionsオブジェクトには3つの要素があり、利用可能なすべてのオプションの完全なリストについては、email-builder-coreページを確認(rèn)できます。

最初の要素EncodespecialCharsは、すべての特殊文字がHTML數(shù)値にエンコードされることを保証します。

メールテスト要素は、電子メールテストのセットアップに使用されます。いくつかのパラメーターが必要です：

メール：テストメールを送信するコンマ分離電子メールアドレス。 Webメールページやモバイルアプリで迅速にチェックするために、テストする必要があるすべてのメールサービス（Gmail、Outlook、Yahooなど）のアカウントがあります。

• 件名：メールの件名（私が取り組んでいるバージョンをすばやく識(shí)別するためにcurrent_date変數(shù)を追加したことに注意してください）。
• トランスポート：送信者はパラメーター
を?qū)g行する必要があります
• GmailをTransportパラメーターとして使用する場(chǎng)合、Googleアカウント設(shè)定で「より少ない安全なアプリを許可する」をアクティブにする必要があります。 >

3番目のパラメーターを使用すると、Litmusプラットフォームでテストを設(shè)定できます（もちろん、Litmusアカウントが必要です）。アカウントパラメーター、オプションのトピック（複數(shù)のテストを?qū)g行する場(chǎng)合はグループ化されたテストに使用される）、およびテストする電子メールクライアントのリストを示す必要があります。

クライアントを追加するには、アプリケーションコードをテストするにはを使用する必要があります。 https://litmus.com/emails/clients.xmlファイルのApplication_Codeフィールドからこのコードを取得できます（このファイルにアクセスするにはログインする必要があることに注意してください）。 上記の例では、行

Gmailアプリ（Android）、Gmail（Explorer）、およびiPhone 5s（iOS7）を使用してメールをテストするようLitumsに伝えます。

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

結(jié)果は、手作りのものと同じように、リトマスで見(jiàn)ることができます：

もちろん、電子メールテストを?qū)g行したい場(chǎng)合は、email_builder_optionsからlitmusパラメーターを削除できます。

gulpfileの最後の數(shù)行はすべての作業(yè)を行います：

最初にexplore_and_taste.htmlファイルを使用して作業(yè)を行うようにgulpに伝えました（これは、最初のプレビューに使用したJadeファイルからcodekitによって生成されたHTMLです）

• Moduleを置き換えると、すべてのローカルパスは以前に設(shè)定したリモートパスに置き換えられます（/src = "imgs // g、 'src ="' remote_imgs_basepath）
• 最後に、emailbuilderタスクを?qū)g行し、テストをLitmusと電子メールアドレスに送信し、すぐに使用できるファイルを登録します。
• CSSファイルはどこにありますか？

電子メールビルダーはこのタスクを本當(dāng)に簡(jiǎn)素化します。リンクまたはスタイルタグにデータ屬性を追加するだけで、それらを管理できます。

データ屬性のないリンクまたはスタイルタグがインラキングされます

データが埋め込まれた屬性を持っている場(chǎng)合、CSSルールは埋め込まれます

• 最後に、Data-embed-Ignoreを使用すると、開(kāi)発目的でのみCSSルールを設(shè)定できます（処理されると無(wú)視されます）。
同様に、CODAはGULP処理を簡(jiǎn)素化し、內(nèi)部端子アプリケーションを使用できます。

結(jié)論

これで、ワークフローを最終的に再スケジュールすることができます：

ニーズに応じて各ステップをカスタマイズし、CodeKitの代わりに別のエディターを使用し、Gulpの代わりにGruntを使用し、SASSを使用します。どんなテクノロジーを選択しても、このようなワークフローは生産性を本當(dāng)に向上させることができます。

獨(dú)自のHTMLメールワークフローがあり、このチュートリアルでカバーされているワークフローとどのように異なる場(chǎng)合は、コメントでお知らせください。

HTML電子メール開(kāi)発

に関するよくある質(zhì)問(wèn)

HTML電子メール開(kāi)発のベストプラクティスは何ですか？

HTML電子メール開(kāi)発は、コーディングと設(shè)計(jì)の原則を深く理解する必要がある複雑なプロセスです。いくつかのベストプラクティスには、インラインCSSを使用してスタイルを正しく適用すること、テーブルを使用してすべての電子メールクライアントとの互換性を確保し、複數(shù)のプラットフォームとデバイスでメールをテストして、どこにでも見(jiàn)栄えを良くすることが含まれます。さらに、コードを簡(jiǎn)潔で整然と保持し、畫(huà)像にAltタグを使用し、HTMLメールを表示できない、または表示したくないユーザー向けの電子メールのプレーンテキストバージョンを含めることが重要です。

HTMLメール開(kāi)発を?qū)Wぶにはどうすればよいですか？

HTMLメール開(kāi)発を?qū)W習(xí)するために利用できるリソースがたくさんあります。 UdemyとSkillshareが提供するオンラインコースは、このトピックの包括的な紹介を提供できます。さらに、SitePointのブログや記事と酸に関するメールは、貴重なヒントと洞察を提供できます。練習(xí)も重要です。プロセスを理解するために、獨(dú)自のメールをゼロから作成してみてください。

どのHTMLメール開(kāi)発ツールが必要ですか？

HTML電子メール開(kāi)発には、書(shū)くコードを作成するためのテキストエディター、メールをテストするための電子メールクライアント、そしておそらく電子メールレイアウトを作成するための設(shè)計(jì)ツールが必要です。これらのツールには、利用可能な多くの無(wú)料の有料オプションがありますので、ニーズと予算に最適なオプションを選択できます。

HTML電子メールを応答する方法は？

HTML電子メールのレスポンシブを作成するには、メディアクエリを使用して、メールを表示するデバイスの畫(huà)面サイズに基づいてレイアウトを調(diào)整することが含まれます。これには、畫(huà)像のサイズの変更、テーブルのレイアウトの調(diào)整などが含まれます。プロセスをガイドするために、オンラインで利用できる多くのリソースがあります。

HTMLメール開(kāi)発におけるいくつかの一般的な課題は何ですか？

HTML電子メール開(kāi)発の一般的な課題には、さまざまな電子メールクライアント間の矛盾の処理、さまざまなデバイスでメールが見(jiàn)栄えを良くすること、コードを簡(jiǎn)潔かつ秩序あるものに保つことが含まれます。さらに、魅力的な設(shè)計(jì)要件と電子メールコーディングの制限のバランスをとることも困難です。

HTMLメールをテストする方法は？

HTMLメールのテストは、開(kāi)発プロセスの重要な部分です。これは、自分にメールを送信し、さまざまなデバイスや電子メールクライアントで表示することで実行できます。また、さまざまなデバイスをシミュレートし、クライアントにメールを送信できるオンラインツールもいくつかあります。

HTML電子メール開(kāi)発でフォームを使用する方法は？

テーブルは、すべての電子メールクライアントと互換性のあるレイアウトを作成する方法を提供するため、HTMLメール開(kāi)発の重要なツールです。これには、HTMLテーブルタグを使用してメールのグリッドのような構(gòu)造を作成し、この構(gòu)造にコンテンツを配置することが含まれます。

HTML電子メール開(kāi)発でインラインCSSを使用する方法は？

インラインCSSには、CSSスタイルを別のスタイルシートではなく、HTMLタグに直接配置することが含まれます。一部のメールクライアントは外部スタイルシートをサポートしていないため、これはHTMLメール開(kāi)発で重要です。インラインCSSを使用するには、HTMLタグの「スタイル」プロパティにスタイルを含めるだけです。

私のHTMLメールに畫(huà)像を含める方法は？

「IMG」タグと「SRC」屬性を使用して畫(huà)像のURLを指定することにより、

畫(huà)像をHTMLメールに含めることができます。また、「alt」屬性を含めて、畫(huà)像のテキストの説明を提供できない、または表示したくないユーザーに提供することも重要です。

HTML電子メールのプレーンテキストバージョンを作成する方法は？

HTML電子メールのプレーンテキストバージョンを作成するには、すべてのHTMLタグの削除とテキストコンテンツのみを殘すことが含まれます。これは手動(dòng)で行うことができます。または、これを行うことができるオンラインツールがいくつかあります。メールを含むプレーンテキストバージョンは、HTMLメールを表示したくないユーザーにとって重要です。

以上が現(xiàn)在のHTMLメール開(kāi)発ワークフローの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。