現在のHTMLメール開発ワークフロー-CSSチュートリアル-php.cn

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層ネストテーブルの例をご覧ください。

<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コードは次のとおりです。

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

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を使用すると、複雑なテンプレートを作成し、独自のコードスニペットのライブラリを構築して、より多くのプロジェクトでコードを再利用できます。少ないか、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：

を設定する必要があります。

<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つの変数を設定します。

最初の要素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に伝えます。

<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>>

ログイン後にコピー

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

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ルールを設定できます（処理されると無視されます）。

結論

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。