検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >現在のHTMLメール開発ワークフロー

現在のHTMLメール開発ワークフロー

William Shakespeare
William Shakespeareオリジナル
2025-02-23 09:18:13579ブラウズ

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

各Web開発者には、優先編集者、補助ツール、個人プロジェクトプロセスなど、独自の独自の作業方法があります。大規模または複雑なプロジェクトの場合、明確な開発パスが重要であり、時間を節約し、エラーを最小限に抑えます。

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

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

キーポイント

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

典型的な電子メール開発ワークフロー

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

作成（予備のローカルテストを実施）
  • cssインライン
  • テスト

My Current HTML Email Development Workflow 最終テスト（インラインCSSを使用）は、複数回繰り返す必要がある場合があるため、最も時間のかかるステップです。 「CSSインライン」および「テスト」タスクには、追加の作業と注意が必要です。まず、元の作業コピーをインラインコピーと区別するように注意する必要があります。さらに、最終テストでは、さまざまなメールクライアントに対してデザインを確認するために、インラインHTMLをさまざまなアカウントに送信する必要があります。

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

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

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

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

ワークフロー計画を詳細に確認できるようになりました。

My Current HTML Email Development Workflow

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

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

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

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

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

<code class="language-html"><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>></code>
同じコードを生成するJadeコードは次のとおりです。

ご覧のとおり、閉鎖されていないタグに問題はもうありません。コードは読みやすいです。 
<code class="language-jade">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</code>

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

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

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

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

My Current HTML Email Development Workflow

これらの手順はすべて完全に自動化されており、あまり楽しくて繰り返しのタスクではなく、デザインに作業を集中できます。 My Current HTML Email Development Workflow

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

gulp

でのクイックテスト

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

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

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

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

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

を設定する必要があります。 
<code class="language-html"><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>></code>

最初に、必要なすべてのパッケージを含め、4つの変数を設定します。

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

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

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

メール：テストメールを送信するコンマ分離電子メールアドレス。 Webメールページやモバイルアプリで迅速にチェックするために、テストする必要があるすべてのメールサービス（Gmail、Outlook、Yahooなど）のアカウントがあります。
  • 件名：メールの件名（私が取り組んでいるバージョンをすばやく識別するためにcurrent_date変数を追加したことに注意してください）。
  • トランスポート：送信者はパラメーター
    • を実行する必要があります
  • GmailをTransportパラメーターとして使用する場合、Googleアカウント設定で「より少ない安全なアプリを許可する」をアクティブにする必要があります。 >

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

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

Gmailアプリ（Android）、Gmail（Explorer）、およびiPhone 5s（iOS7）を使用してメールをテストするようLitumsに伝えます。 
<code class="language-html"><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>></code>

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

My Current HTML Email Development Workflow もちろん、電子メールテストを実行したい場合は、email_builder_optionsからlitmusパラメーターを削除できます。

gulpfileの最後の数行はすべての作業を行います：

最初にexplore_and_taste.htmlファイルを使用して作業を行うようにgulpに伝えました（これは、最初のプレビューに使用したJadeファイルからcodekitによって生成されたHTMLです）
  • Moduleを置き換えると、すべてのローカルパスは以前に設定したリモートパスに置き換えられます（/src = "imgs // g、 'src ="' remote_imgs_basepath）
  • 最後に、emailbuilderタスクを実行し、テストをLitmusと電子メールアドレスに送信し、すぐに使用できるファイルを登録します。
  • CSSファイルはどこにありますか？
電子メールビルダーはこのタスクを本当に簡素化します。リンクまたはスタイルタグにデータ属性を追加するだけで、それらを管理できます。

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

データが埋め込まれた属性を持っている場合、CSSルールは埋め込まれます
  • 最後に、Data-embed-Ignoreを使用すると、開発目的でのみCSSルールを設定できます（処理されると無視されます）。
    • 同様に、CODAはGULP処理を簡素化し、内部端子アプリケーションを使用できます。

結論

My Current HTML Email Development Workflow

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

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

独自のHTMLメールワークフローがあり、このチュートリアルでカバーされているワークフローとどのように異なる場合は、コメントでお知らせください。 My Current HTML Email Development Workflow

HTML電子メール開発

に関するよくある質問

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

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

HTMLメール開発を学ぶにはどうすればよいですか？

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

どのHTMLメール開発ツールが必要ですか？

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

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

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

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

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

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

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

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

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

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

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

私のHTMLメールに画像を含める方法は？

「IMG」タグと「SRC」属性を使用して画像のURLを指定することにより、

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

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

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

以上が現在のHTMLメール開発ワークフローの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php css bootstrap less gulp html npm sass xml 字符串 预处理器 JS 对象 样式表 android iphone https 自动化 outlook
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS @supportsルール（機能クエリ）の紹介次の記事：CSS @supportsルール（機能クエリ）の紹介

関連記事

続きを見る