良い一日
Dribbble.comから正直に借りた画像
最初のトピックトピックが公開されてから2年弱が経過しました。 この間に何が起きましたか？ Mail.ru、Rambler、Yahoo、Yandexは一緒にメールインターフェースをシャベルで削りました。その結果、文字のパーサーは楽しい感情をもたらしました。 多くの厄介なバグが修正されました。 Gmailは背景画像をサポートし始めました。 さて、モバイルプラットフォーム市場の発展のおかげで、メディアクエリは私たちの助けになります。
この投稿の意味は、化石クライアントを忘れずに、今日の現実に合わせて文字を組版する方法論を要約することです。
そして、はい、投稿にはほとんど写真がありません。 写真については、css3機能のレビューをお願いします。
現時点では、趣味としてではなく組版の手紙に取り組んでいるので、オペラメール、スズメ、およびその他の「人気のある」クライアントをテストする時間はありませんでした。 次のことについてです。
-MS Outlookのすべてのバージョン
-Mail.ru
-ランブラーメール（バグは新しいインターフェイスで除外されません）
-Yandexメール
-Gmail
-Yahoo!
- バージョン2.0以降の Thunderbird
-Hotmail
-Windows Liveメール
-Apple Mail は第3バージョンから始まります
-AOLメール
-Lotus Notes 8-8.5。
-theBat！ 細心の注意を払ってテストされていませんが、苦情もありませんでした
ラッパー（文字ラッパー）
<table width="600" align="center" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> // </td> </tr> </table>
テーブルに固定幅を設定する場合、必要な配置にalign属性を使用します。 マージンなし：自動。 通過しません。
次はカラータスクです。 色の背景は、bgcolor属性を介して、ラティスの後の3文字にトリミングせずに、完全な16進形式で示します。 もちろん、style属性を使用して色を設定することはできますが、なぜ非常に古い顧客を最初から遮断するのでしょうか。
グラフィックの背景では、スコアリングを強くお勧めします。 結局、対応するテーブルセルにimgタグを挿入することで、美しい要素を実現するような方法で、いつでもレターレイアウトを描画できます。
Collapseは、Outlook Expressのセル間のスペースを処理するため、レイアウト内のすべてのテーブルにこの値を指定します。
くぼみ
hederスタイルはまだ多くのメーラーで彫られているため、インラインのもののみを使用します。 しかし、ここではそれほど単純ではありません。 パディングとマージンは忘れます。
セル間隔
YandexメールとThunderbirdでは非常に不器用に動作します。 他のクライアントもチェックしませんでした。 この属性は常にゼロに設定してください。
セルパディング
ここで彼は-レイアウトデザイナーの親友です。 どこでも時計のように動作します！
スペーサー
セルパディングでは実装に十分ではなく、テーブルがより複雑な場合は、スペーサーが役立ちます。 これを行うには、透明な10 x 10ピクセルgifを取得します。 ただし、theBat！の古いバージョンが心配な場合は、スペーサーの色がその配置の背景色と一致する必要があります。 透明なピクセルを黒でペイントできます。
スパムフィルターは1ピクセルの画像にうまく応答しないという伝説があるため、私は10x10で途方もなく停止しました。 スペーサーを挿入する場合は、空のalt属性を指定する必要があります。指定しない場合、ファイル名が小さなロードされていないイメージで光り、レイアウトが台無しになる可能性があります。
スペーサーを使用した場合と使用しない場合の動作コードの例を示します。
<table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cc 1px solid;"> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> </table>
この場合、写真と写真の間に20px、極端な画像とテーブルの外壁の間に10pxのギャップがあります。
しかし、セル間と境界の両方で10ピクセルのインデントが必要な場合はどうでしょうか。 従来のHTMLのセル間隔はこのタスクに対処しますが、実際にはありませんでした。 胸にかかとで当たらないので、この場合は特にバグがあることを証明していますが、同様のバグが観察されたため、次の解決策を提案します。
<table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;"> <tr> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> </tr> <tr> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> </tr> <tr> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td> </tr> </table>
画像
写真は2つの方法でレターに挿入されます。添付ファイルのレターと一緒に転送するか、リモートサーバー上のどこかに写真を配置し、レイアウトへのパスを単純に示します。 違いは、私の知る限り、添付された写真は、設定で無効にされていても、クライアントに自動的にダウンロードされることです。 私は間違っている可能性があります。 もしそうなら、これは悪い背景だと思います。 これは、（受信者からの）自分、トラフィック、およびトラフィックに応じて発生しない場合、少なくとも不快です。
写真がどこか遠くにあり、ユーザーが設定でそれらを無効にしている場合、いくつかの簡単なヒントに従う必要があります。
-画像にセマンティックロード（たとえば、これがロゴまたは重要な画像）がある場合、アンロードされた画像を説明し、ユーザーがアップロードすることに興味を持たせるために、幅、高さ、高さ、タイトルでそれぞれ設定する必要があります。彼女。
-画像が意味をなさないが、装飾品（影、リボン）である場合、上記のいずれも単に設定されません。 レターにすべての画像が含まれるまで、ユーザーには表示されません。 サイズの不足がレイアウトを台無しにしない限り、適用可能です。 それ以外の場合は、寸法を示す必要があります。
もう1つポイントがあります。 画像が表のセル内にある場合、下の数ピクセルのインデントが表示される場合があります。 次の2つの方法で処理されます。
-ブロックで画像を折り返す
-値の表示で画像のスタイル属性を設定します：ブロック;
この松葉杖は、画像をブロック要素にします。 マイナスと見なすことができます。 しかし、私の実践では、それは横向きではありませんでした。 時々、このインデントは干渉しません。
理論的には、画像のブロックラッパーは、行の高さがゼロのスパンに置き換えることができますが、これはまだテストされていません。
書式設定
すでに書いたように、段落タグの使用は、すべてのクライアントで正確に表示するための最良の解決策ではありません。 いくつかの余分なインデントが重要でない場合に使用できますが。 一部の古いクライアントは、独自の方法で段落のデフォルトのインデントを設定し、マージンとパディングをカットします。 そのため、以下に段落の実装に2つのオプションを示します。
ピクセル間隔の段落
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> </td> </tr> <tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td> </td> </tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td> </td> </tr> </table>
行の高さで区切られた段落
<span style="line-height:1.5em;"> <br><br> <br><br> </span>
line-heightプロパティはすべてのクライアントで機能するわけではありませんが、心配する必要はありません。 1.5の間隔はテキストにとって非常によく見え、「通常の」メーラーによって適切に認識されます。 さて、クライアントがこのプロパティを削除した場合、何もありません。 いずれかの方法を選択する理由は次のとおりです。 コードの量または同じ表示。
フォント、サイズ、色
以前は、フォントタグと顔、色、サイズの属性を持つ純粋なhtmlコンストラクトを使用していました。 動作します。 しかし、次の理由で拒否しました。 配布システムでレターを送信する際、tinyMCEエディターを使用してレターのソースコードを作成しました。 この悪名高いエディターは、曲がったスタイルでスパン上のすべてのフォントを中断しました。
そのため、フォントの代わりにspanを使用し、style属性を使用してインラインcssスタイルを設定する必要があるという結論に達しました。
1つのわずかな例外を除いて、すべてが問題ありません。 古代の顧客は、CSSを無効にするように構成された顧客と同様、私たちのすべての美しさを見ていませんでした。 はい、そして彼らと地獄に。 人が装飾を必要としない場合、それを課す必要はありません。
これですべてです。 cssでのジョブの完全な16進カラー形式の表示のみを思い出します。 ただし、黒などの直接的な名前で対応できます。
参照資料
簡単かつ簡単に。
-mailto：を除くすべてのリンクに対して、ターゲット属性に値_blankを設定します（それらには重要ではありません）。
-リンク画像のゼロボーダー
-重要を指定してください！ ホバーおよびアクティブへの色の変更を回避するためのリンクの色（少なくともYandexメールはこれを行います）
モバイルプラットフォーム
はい、media_queriesを使用できます。 原則として、これはレターのラッパーの幅をハードに設定するために使用されます。 結局のところ、ゴムのモックアップでは、すべてが非常に悪いです。 たとえば、max-widthはどこでも機能しません。 多くのモバイルメールクライアントはmedia_queriesをサポートしているため、お気軽に実験してください。
何を読む
誰かが見逃した場合、私はトピックに関する以前の出版物へのリンクを提供します。
- メーリングリストのレイアウト
- ユーザビリティメーリングリスト
- メーリングリストのレイアウト：内部からの外観
- メーリングリストのレイアウト：デブリーフィング
- メーリングリストのレイアウトの松葉杖
- メーリングリスト-バカについて
- メーリングリスト：松葉杖でダウン！
- メーリングリスト：書かれたキッチン
- メーリングリストに関するよくある質問
- 美しく効果的なメールマーケティング
-HTML HTMLレイアウト：バグのように考える