メールの10のHTMLレイアウトガイドライン

推奨事項1:ブロックレイアウトを忘れる。 すべてのレイアウトはテーブル上にある必要があります。 同時に、どうしても必要な場合を除き、使用しないことをお勧めします。 また、セマンティクス、短縮されたcssルール、検証、フローティングブロックなどについての頭の中のアイデアから抜け出す必要があります。 現在、ロシア連邦で最も一般的なメールサービス( mail.ru )は、スタイル(css)をまったく理解していません。 スタイルタグ/属性はすべてxstyleに置き換えられ、 機能しません。 それだけです。



実際、郵送用のhtmlレイアウトでは、前世紀の90年代に精神的に移行し、当時の一般的なトリックをすべて大胆に使用する必要があります。



(私がそうであったように)それらに慣れていない人のために-私は思い出します:



1)レイアウト



もう一度- テーブル上のレイアウト (cssを使用した配置 、フロート、クリアなどを使用しない)、さらに、 mail.ruはすべてのtdに非常に印象的なパディングを自動的に追加します。これも考慮する必要があります(たとえば、写真は細かく切り分けられ、別のセルに細断されます-シームレスな接続を実現することは不可能です ...しかし、神を称賛し、 mail.ruのスタイルからクラスを使用して、パディングをリセットします、それはpad_nullと呼ばれます ! おかげでrybyakov !;



2)css



それでもスタイルが理解されている場合-もう1つの制限がありますすべてのスタイルはインラインである必要があります (つまり、 スタイル属性にある必要があります):

< div style ="..." > ... </ div >







3)左詰め、右詰め



理論的には、水平インデントは、追加のテーブルセルの助けを借りて昔に行われました...! 通常のWebサービス( gmailyandexramblerなど)は、過去に多くの人に愛されている設計を理解しません。

< table cellpadding ="0" cellspacing ="0" border ="0" width ="100%" >

< tr >

< td width ="10" nowrap ></ td >

< td width ="100%" ></ td >

< td width ="10" nowrap ></ td >

</ tr >

</ table >








中央のセルは100%に拡大し( nowrapにもかかわらず)、左右のセルは消えます(つまり、幅はゼロになります)。したがって、 css (および「 mail.ru 」の組み合わせの場合) +ラバーデザイン "、明らかに、オプションはありません-すべてのセルの固定サイズのみ);



左のデフォルトのインデントで対応するタグを使用して、純粋なhtmlを使用して左のインデントを作成するというアイデアがありました-dd ...! Microsoft Office Word(!)のエンジンの助けを借りてhtmlページをレンダリングするoutlook 2007は怖くなり始めたため、オプションは表示されなくなりました。




4)パディングトップ、パディングボトム



使用する必要がある垂直インデントを作成するには、奇妙なことに- 写真 (!)、つまり、実際には「空の」画像を作成します(1×1ではなく、少なくとも10×10にして、フォルダに突然文字が表示されないようにします)スパム)そして、それに対応するインデントを形成するために希望の高さを設定することによって(もちろん、画像をdivに入れます、もちろん、なぜだと思いますか):

< div >< img src ="padding.png" alt ="" border ="0" height ="10" ></ div >





測定単位( px )は属性値に示されていないことに注意してください- 標準 (thanks、 alemiks )に従って。



5)フォント



ヘッドセット/フォントサイズ/色を変更するには、古風なフォントタグを使用して、毎回これらすべてのパラメーターを設定する必要があります(通常は、ブロックタグ内のすべてのテキストに対して)。

< font face ="tahoma,sans-serif" color ="#000000" size ="2" > </ font >





リンクの色を変更する必要がある場合、 フォントタグは;内にあります。



6)リンク



それでもリンクによって- ターゲット属性(はい、無効)に値_blankを追加することを忘れないでください(サイトがメールクライアントのウィンドウで直接開かないようにするため)。また、格子の空のリンクに「とりあえず」置くことに慣れている場合)、 Gmailyandexがそのようなリンクをリンクとしてカウントしないことに驚かないでください。つまり、すぐに実際のアドレスを設定する方が良いでしょう。



7)色



背景色で塗りつぶされたテキストで長方形のブロックを作成するには、テーブル、行、セル、セルを作成する必要があります-bgcolor属性には、オプションはありません...さらに、16進形式で色を設定する場合、短縮レコードを使用します(たとえば、 #FFFFFFの代わりに#FFF )-この方法で設定された色は自動的に黒に変換されます。



8)テキスト内の写真



同じ素晴らしい時代のHTMLチュートリアルでは、画像の周りにテキストをラップする方法(CSSなし) -imgタグの属性、すなわちalignvspacehspaceを使用する方法を教えられましたが、これも使用できません:)一部のメールクライアント(およびその中のbatなど )はこれらの属性を無視しますが、 float:leftも曲がりくねって動作します(またはまったく動作しません)-結論:再びテーブルを保存します。



9)デザインの写真



なぜなら 実際、写真のアドレスを書き込むことはできません。imgタグを使用してすべてのデザインパターンを含める必要があります。また、同じバットで不要な(理解できない)インデントを防ぐために行間隔をリセットすることをお勧めします。

< div style ="line-height:0;" >< img src ="border.png" alt ="" ></ div >





透明なコウモリの画像(gifでさえも) がコウモリを黒で塗りつぶしていることを知っています。



10)プログラムとツール



...より正確には、その不在-ニュースレターをテストするために、残念ながら(そして驚くべきことに)、 Outlook Expressよりも良いものは見つかりませんでした-テンプレートに基づいてhtml文字を簡単に作成できます(メッセージ→作成→フォームの選択...)私はこの部分についてのアドバイスをhabrasocietyに感謝します...そして実際すべてについて:)








私の記事が最初です。 つまり Habrahabrに関する私の最初の記事ですが、もちろん、この分野の最初の研究ではなく、有用なリンクです-ここに:







そして、私が書いたものは研究のふりではありませんが、すべては個人的な経験によって裏付けられています。 私が言ったように、意見や追加は大歓迎です。



PS :誰かが個々の電子メールクライアントとWebサービスの正確な(そして最新の)データに興味があるなら、私はさらなる出版物を続けることができます。



All Articles