きれいな携帯最初の防弾電子メールを作成する方法🛡️ 🔫 ?

30399 ワード
mjml newbie email webdev テキストリンク
以前flexbox , div , or grid レイアウトtable レイアウトは標準であった.Webサイトのレイアウトは、テーブルを使用して作成され、それはいくつかの非常に困難な時期だった.私はFrontPageを使うのを覚えています.
高速2020年には、Webデザインのレイアウトははるかに簡単に作成し、管理します.Truwind、Bulma、ブートストラップ、および多くのような素晴らしいフレームワークのおかげで、今我々は簡単にWebレイアウトを作成することができます.
あなたが詳細をスキップして、チュートリアルに直接行くならばclick here
今、私たちは部屋の象について話しましょう.
HTMLメール<table> レイアウトや、少なくともすべてのメールクライアントと互換性のあるメールを維持する.
E . gは、Outlook(Windows)のこの写真を見て、どのように悪いサポートを実現します.( Source )

より良い視点を得るためにこのリストを見てください.

したがって、すべてのこれらのメールクライアントのために特定のHTMLコードを書くのは簡単ではありません.したがって、我々は我々の電子メールクライアント特有のHTMLコードを扱う電子メールマークアップ言語を使用するつもりです.
電子メールのマークアップ言語は、すべての電子メールクライアント(少なくとも最も使用されるもので)によく見える応答性のメールをコーディングするの痛みを減らすように設計されています.
2020年8月現在のトップ電子メールクライアントのリストは、ここにありますSource ):

電子メールマークアップ言語の電子メールのマークアップ言語のカップルがありますMJML 電子メールマークアップ言語として.

始めましょう！

This is going to be the final look of our email:

コーディングを始めましょう！


このチュートリアルの目的のために、私たちが使用するMJMLコンポーネントについてのみ説明します.詳細については、チェックアウトすることができますMJML Documentation

This email is one of 60+ free email templates available on Codedmails


また、シンプルさのために、我々は使用されますTry it Live by MJML MJMLを簡単に作成し、意味のHTMLコードを生成します.
「こんにちは世界」出力でメールを作成しましょう.ここでは、MJMLを使用してそれを書く方法です.
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in MJML Live Editor
エディターでHTMLをクリックすると、マークアップ言語を使用してどのくらいの労力を節約できます.10行対121行.MJMLは意味のコードを作成し、すべてのメールが応答していることを意味モバイル最初です.
今この時点で、電子メールマークアップ言語を使用する利点は次のとおりです.
私たちの電子メールデザインに戻る場合は、密接に私たちはアイテムのカップルなどを使用している画像、ボタン、テキスト、ソーシャルメディアのアイコン、アプリのアイコンを参照してください.
MJMLには、定義済みのコンポーネントがあります<mj-section> セクションを作成するには<mj-image> 挿入イメージ<mj-text> 見出しと段落を含むすべてのテキストについては、.<mj-button> ボタンを追加する<mj-social> 社会的アイコンとリンクを作成するには<mj-spacer> 空の垂直空間を作成するには考える<mj-section> 追加するコンテナとして<mj-column> .

基本構造


MJMLから始まる<mjml> タグ.<mj-head> and <mj-body> 唯一の子供たちです.<mj-head> グローバルなフォントファミリー、フォントサイズなどを宣言するグローバルな属性を追加するために使用されます.また、すべてのMJMLタグにデフォルト値を追加するために使用されます.すべての内容は<mj-body> タグ.あなたも、直接使用してGoogleのフォントを追加することができます<mj-font> タグ.

You can also use normal HTML tags inside the MJML tags e.g using an H1 text inside a <mj-text><h1>Heading</h1></mj-text>is also allowed and semantically correct.


<mjml>
  <mj-head>
    <!-- Define global attributes -->
    <mj-font name="Nunito" href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"></mj-font>
    <mj-attributes>
      <mj-all font-family="Nunito, Helvetica, Arial, sans-serif" font-size="16px" color="#54595f" />
      <mj-button border-radius="8px" background-color="#656285" color="white" align="center" />
      <mj-text font-weight="400" line-height="22px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#656285">
    <mj-section>
      <mj-column>

        <!-- Content --->

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in live MJML Editor

列の作成


同じサイズの2列のセクションを作成したいなら、次のように書きます
<mjml>
  <mj-body>
    <mj-section>
      <mj-column background-color="#dadada">
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">50% Width</mj-text>
      </mj-column>
      <mj-column background-color="#cacaca">
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">50% Width</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in MJML Live Editor
そして、その最初のように、小さな画面では、列がデフォルトで一緒にスタックされます.したがって、ブートストラップ、bulmaなどのCSSフレームワークを使用している場合は、単に行と列と考えてください.

コンテンツの追加


画像を追加するには<mj-image> タグ.同様に、UI要素の大部分については、<mj-component 利用可能です.すべてのコンポーネントについては、次のようにします.Official MJML Documentation 
<mjml>
  <mj-head>
    <!-- Define global attributes -->
    <mj-font name="Nunito" href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"></mj-font>
    <mj-attributes>
      <mj-all font-family="Nunito, Helvetica, Arial, sans-serif" font-size="16px" color="#54595f" />
      <mj-button border-radius="8px" line-height="30px" background-color="#656285" color="white" align="center" />
      <mj-text font-weight="400" line-height="22px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#656285">
    <mj-section>
      <mj-column>
        <mj-image align="center" padding="8px 0" width="150px" src="https://codedmails.com/images/logo-white.png"></mj-image>
      </mj-column>
    </mj-section>

    <mj-section border-radius="20px 20px 0 0" css-class="noradius" background-size="cover" background-repeat="no-repeat" background-url="https://images.unsplash.com/flagged/photo-1575665081424-b9ebebfd7eee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
      <mj-column>
        <mj-spacer height="250px"></mj-spacer>
      </mj-column>
    </mj-section>

    <mj-section background-color="#fff" border-radius="0 0 20px 20px">
      <mj-column>

        <mj-text>Content goes here</mj-text>
        <mj-button align="left">This is a Button</mj-button>
         <mj-social mode="horizontal" align="left">
          <mj-social-element alt="twitter-logo" icon-size="32px" src="https://codedmails.com/images/social/color/twitter-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="facebook-logo" icon-size="32px" src="https://codedmails.com/images/social/color/facebook-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="instagram-logo" icon-size="32px" src="https://codedmails.com/images/social/color/insta-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="youtube-logo" icon-size="32px" src="https://codedmails.com/images/social/color/youtube-logo-transparent.png" href="#"></mj-social-element>
        </mj-social>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in MJML Live Editor
MJMLコンポーネントを使用していくつかのコンテンツを追加した後<mj-button> ここまで我々はこれまで達成している

そして最後に、いくつかのより多くの微調整とコンテンツで最終的なバージョン:

写真でArtur Wayne on Unsplash 
<mjml lang="en">
  <mj-head>
    <mj-title>Welcome to [Coded Mails]</mj-title>
    <mj-preview>Preview -You have a new support message</mj-preview>
    <mj-font name="Nunito" href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"></mj-font>
    <mj-attributes>
      <mj-all font-family="Nunito, Helvetica, Arial, sans-serif" font-size="16px" color="#54595f"></mj-all>
      <mj-button border-radius="8px" line-height="30px" background-color="#656285" color="white" align="center"></mj-button>
      <mj-text font-weight="400" line-height="22px"></mj-text>
      <mj-class name="heading" font-weight="400" font-size="18px" line-height="30px" />
      <mj-class name="footer-text" color="#D0DBEA" font-size="14px" line-height="18px" />
    </mj-attributes>
    <mj-style inline="inline">
      h1, h2 { margin: 0; font-size: 24px; line-height: normal; font-weight: bold; } h2 { font-size: 20px; } p { margin: 0; } a { color: #54595f; text-decoration: underline; } .footer-link{color: #D0DBEA;}
    </mj-style>
    <mj-style>
      a, span, td, th { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media only screen and (max-width: 600px) { .noradius {border-radius: 0 !important;} }
    </mj-style>
  </mj-head>
  <mj-body background-color="#656285">
    <mj-section>
      <mj-column>
        <mj-image align="center" padding="8px 0" width="150px" src="https://codedmails.com/images/logo-white.png"></mj-image>

      </mj-column>
    </mj-section>
    <mj-section border-radius="20px 20px 0 0" css-class="noradius" background-size="cover" background-repeat="no-repeat" background-url="https://images.unsplash.com/flagged/photo-1575665081424-b9ebebfd7eee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
      <mj-column>
        <mj-spacer height="250px"></mj-spacer>
      </mj-column>
    </mj-section>


    <mj-section background-color="#ffffff" border-radius="0 0 20px 20px" css-class="noradius">
      <mj-column width="100%">

        <mj-text mj-class="heading">
          <h2> Hey Mike,</h2>
        </mj-text>
        <mj-text>
          <h1>You have a new support message.</h1>
        </mj-text>

        <mj-text font-style="italic">
          <p><strong> Message </strong> : It has survived not only five centuries, but the normal behaviour of the loream is not about just the values you get from the mathamatical equation but also... </p>
        </mj-text>

        <mj-button align="center" href="https://google.com">
          Read the complete message
        </mj-button>

        <mj-text>If you have any questions simply reply to this email and we would be more than happy to reply. :)</mj-text>

      </mj-column>

    </mj-section>

    <mj-section padding-bottom="0px">
      <mj-column width="100%">
        <mj-text align="center">
          <a href="#" style="display: inline-block; text-decoration: none;">
        <img src="https://codedmails.com/images/google-play.png" alt="play-store-logo" width="150px" />
      </a>
          <a href="#" style="display: inline-block; text-decoration: none;">
        <img src="https://codedmails.com/images/app-store.png" alt="app-store-logo" width="150px" />
      </a>
        </mj-text>
      </mj-column>
      <mj-column width="100%">
        <mj-social mode="horizontal" align="center">
          <mj-social-element alt="twitter-logo" icon-size="32px" src="https://codedmails.com/images/social/color/twitter-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="facebook-logo" icon-size="32px" src="https://codedmails.com/images/social/color/facebook-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="instagram-logo" icon-size="32px" src="https://codedmails.com/images/social/color/insta-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="youtube-logo" icon-size="32px" src="https://codedmails.com/images/social/color/youtube-logo-transparent.png" href="#"></mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>

    <mj-section padding-top="0px">
      <mj-column>

        <mj-text align="center" mj-class="footer-text">
          123 Medalling Jr., Suite 100, Parrot Park, CA 12345<br /> © 2020 [Coded Mails] Inc.</mj-text>
        <mj-text mj-class="footer-text" align="center">
          Update your <a class="footer-link" href="https://google.com">email preferences</a> to choose the types of emails you receive, or you can <a class="footer-link" href="https://google.com"> unsubscribe </a>from all future emails.
        </mj-text>

      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-spacer height="1px"></mj-spacer>
      </mj-column>
    </mj-section>


  </mj-body>
</mjml>
Edit the final version online

あなたのHTMLメールを送信する準備が整いました。


あなたはE . G Mailchimp、sendgrid、ワードプレス、ポストマークなどを使用して防弾メールを送信することができます.

次は何ですか。


あなたが電子メール開発についての詳細を知りたい場合は、従うことを忘れないでください.
また、コメントやフィードバックがある場合は、コメントをお気軽に.

最後のこと😍


私もメールテンプレートのライブラリを作成したと呼ばれるCodedmails 60 +メールのテンプレートやテーマを作成するには、同じ戦略とフレームワークを使用します.詳しくはこちらをご覧ください.

あなたは多くの時間をHTMLメールを作成過ごすか？

アラムシェール・ 9月15日・ 1分読む

#email #newsletter #webdev #beginners
[CAMEL] Processing
[プログラマー]スープ