メールは応答性がありますか?


8

好きでも嫌いでも、HTMLメールの人気を否定することはできません。また、以前のWebと同様に、受信トレイは正式にモバイルに移行しました。メールの50%以上がモバイルデバイスで開封されています。

それでは、EメールHTMLサックの方法を考えると、Eメールは本当に応答性がありますか?


電子メールアプリケーションに依存しませんが、ほとんどの場合、Web電子メールフォームはHTMLをラップするため、目標を先取りします
joojaa

YouTubeでDEVTIPSを確認してください。レスポンシブメールに関する動画があると確信しています。
コメンタル2014年

私はあなたの質問が好きですが、現時点では「デザイン」の領域に収まるように編集してもかまいません。これはSOに適しているという意味で、これはコード関連の質問であり、デザインではないことを保証します。関連する質問。
–DᴀʀᴛʜVᴀᴅᴇʀ

テーブルで%を使用するだけの問題ではないですか?私はすでにだけ...それはすべてのデバイスのための完璧な作ら%としてmailchimpテンプレートを作成
rwzdoorn

回答:


3

メールは本当に反応がいい

あなたの質問への簡単な答え..はい

HTML電子メールは、Webサイトの同じルールにいくらか当てはまりますが、通常は対処が難しく、<table>タグを使用した古い日付のコードスタイルに依拠しています。HTML デザインの電子メールを始めたときに、Web Design Tutsによるすばらしい記事があったと思います。

チュートリアルについて少し説明すると、レスポンシブなメールを作成する方法が説明されています。HTMLメールを作成する際の重要な注意点の1つは、CSSを最後にインラインにする必要があることです。それはYahooのCSSをターゲットにする方法を議論しbody[yahoo] .class {}、彼らは「レスポンシブHTMLメール:異なる戦略」に関するTina Yeの記事を参照します

Webdesign Tutsの記事はTinaの記事についてあまり詳しく説明していないので、モバイルの最初の設計方法に取り組み、Lotus 8、Outlook 00-03、Outlook 2007+、およびAppleの設計方法を示しているので、読んでおくことをお勧めします。 :

Lotus Notes 8およびOutlook 2000-2003

 <!--[if IE]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if IE]>
      </td>
    </tr>
  </table>
<![endif]-->

Outlook 2007以降

<!--[if (gte mso 9)|(IE)]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
  </table>
<![endif]-->

アップルメール

@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
}

レスポンシブ電子メールテンプレートをGoogle検索すると、Mashableによる「32 Small Business用のレスポンシブ電子メールテンプレート」と呼ばれる記事があります。
それはあなたの電子メールのための無料と有料のテンプレートについて議論し、それはあなたがウェブデザインのために財団を使用しているなら私がお勧めするZurbに行きます。


1

彼らは確かにできる!レスポンシブHTMLメールを作成するために使用できるテンプレートは次のとおりです:http : //zurb.com/ink/。HTMLメールを最初から作成するには、メールクライアントがメールを解析する方法に関する多くの知識が必要です。このテンプレートにより、メールがすべてのメールクライアントで正しく表示されるようになります。

必要なのは、ファイルの内容を電子メールに置き換え、このファイルを、電子メールの送信を処理するアプリケーションのスクリプトを介して実行することだけです。


1
現時点ではリンクのみの回答であるため、提供したリンクについての詳細をお知らせください。今後、サイトがダウンした場合、いくつかの反対票を受け取る可能性があります。
–DᴀʀᴛʜVᴀᴅᴇʀ

1
回答を編集しました。
Nag、

とても興味深い(そして十分に文書化された)リソースです。
user56reinstatemonica8 2014年

1

はい、できますが、これに対する多大な情熱がない限り、気にしないでください。IE5のコーディングを想像して、それをテストする必要があるとします。独自のカスタムソリューションを実行するよりも、この種のテンプレートを購入した方がよい場合があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.