1

HTMLメールの現在の傾向は何ですか？

応答性の高いデザインのHTMLメールを調べて、campaignmonitorでこの記事に出くわしました。

古い学校のテーブルレイアウトでは、インラインスタイルではなくスタイルブロックにcss@mediaクエリと他のcssが混在しているようです。

確かに、電子メールクライアントがcssを処理できる場合、divをどう処理するかを知っていますか？それとも、テーブルはまだできない人のためのフォールバックと同じですか？そして、メディアクエリとブロックcssの余分な甘さはそうしますか？

電子メールクライアントはWebブラウザほど急速に変化しないことはわかっていますが、それでもテーブルは最善の方法ですか？

この質問はこれまで何度も聞かれたことがあると思いますが、私は現代のトレンドを探しています。

おそらくこれは別の質問になるはずですが、この記事ではelement.class宣言とelement [class = "classname"]宣言が混在していることにも気づきました。これは、これまでinput [type="value"]でのみ使用した最後の宣言です。なぜクラスの角かっこですか？

4

2 に答える 2

2

最近、私の会社はメールのレイアウトを変更していました。まず、さまざまな電子メールクライアントと最新のhtml/css標準との互換性をテストすることにしました。tableただし、コーディングプロセス中に、適切なレンダリングで多くの問題が発生し、ベースのレイアウトに戻らざるを得なくなりました。

また@media-queries、クライアントが理解できるように、より洗練されたスタイルを使用しましたが、残念ながら、tables人気のあるメールクライアントをサポートしたい場合はまだ道のりです。非常に多くのビジネスクライアントが古いOutlookなどを使用しているのは残念です。

作業が完了した後、キャンペーンモニターテスターを使用してレイアウトをテストしていましたが、それだけでは不十分であったため、多くのクライアントを手動でテストする必要がありました。

まとめ：今すぐメールレイアウトをコーディングする場合は、テーブルとインラインスタイルを使用します。

編集：ブラケット-表記は正しいですが、要点がわかりません。さらに、この例では、という名前のクラスが1つだけある要素にのみ一致しますclassname。一致しません<p class="classname othername">。ここでそれを使用するための他の引数がない場合は、標準のドット表記（.classname）を使用します。

于 2012-12-02T10:27:48.130 に答える
0

互換性を最大にするために、すべてのcssをインライン化する必要があることに注意してください。Campaignmonitorには、自動インライン化するツールがあるため、提案を読むときはそのことに注意してください。

cssをインライン化する必要がある理由は、Gmailや（私もそう思う）yahooのようなWebベースのクライアントが、Webページを台無しにしないようにスタイル宣言（およびbodyタグの外側のすべて）を削除するためです。メディアクエリはインライン化できないため、レスポンシブメールを作成するのが現在の傾向ですが、Gmailでは機能しないことに注意してください。

さまざまな電子メールクライアント、特にさまざまなcssプロパティの処理方法に不整合があるため、引き続きテーブルで機能します。電子メールが「過去に行き詰まった」主な理由の1つは、MSWordレンダリングエンジンを使用するOutlookが原因です。Outlookは、特にB2Bで依然として最も人気のある電子メールクライアントです。

その情報がお役に立てば幸いです。

于 2012-12-05T15:57:36.153 に答える