Топ контрибуторов
loading
loading
Знаете ли Вы, что

После прохождения теста можно комментировать вопросы теста, а Ваши комментарии увидят модераторы теста и пользователи, которым когда-либо эти вопросы попадались.

Лента обновлений
ссылка Jul 9 05:01
Комментарий от guenn6797:
Вопрос неоднозначный (
ссылка Jul 8 17:11
Комментарий от IZI1:
Хоть где-то я прав)
ссылка Jul 8 17:10
Комментарий от IZI1:
Интересный вопрос)
ссылка Jul 7 22:58
Комментарий от Zorayr:
это уже не так )
ссылка Jul 7 16:06
Комментарий от arfesdt:
4 вариант в 3 питоне не работает
SyntaxError: invalid sy...
Статистика

Тестов: 153, вопросов: 8597. Пройдено: 463679 / 2265566.

Верстка HTML-писем

head tail Статья
категория
Веб технологии
дата19.10.2010
авторHripunov
голосов15

Сегодня я вам расскажу, как правильно верстать HTML-письма, которые только начинают набирать обороты. Почему я решил посвятить отдельную статью именно верстке HTML-писем, спросите вы. Да потому, что процесс их создание отличается от традиционного метода верстки страниц, т.к. верстать и обходить баги, приходиться не только для различных браузеров, но и для почтовых клиентов. Но на самом деле все намного проще, чем кажется на первый взгляд.

Все описанные ниже примеры и советы работают в следующих популярных почтовых клиентах: mail.ru; Rambler почта; MC Office Outlook 2003, 2007, 2010; Google Mail; Яндекс почта; Yahoo! Mail (Classic); Lotus Notes 8, 8.5; Thunderbird 2.0, 3.0; Hotmail; Windows Live Mail; Apple Mail 3, 4; AOL Mail; iPad, iPhone.

Начнем:

1. Блочная верстка не подойдет! Поэтому про такие свойства как clear и float можно забыть. За основу нужно брать только таблицы. Хотя уже сегодня большинство клиентов поддерживают и блочный метод, но мы же говорим об «кроссмайлерной» верстке. Не буду писать, как верстают таблицами, а лишь приведу основу для 1 и 2 колоночных шаблонов с фиксированной шириной, расположенных по центру:

1 колоночная основа:

<body style="margin: 0; padding: 0;">

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

        <tr>

           <td align="center" valign="top">

              <!-- HEADER STARTS -->

              <table width="600px" cellspacing="0" cellpadding="0" border="0">

                  <tr>

                     <td align="center">

                         <!-- ... -->

                     </td>

                  </tr>

              </table>

              <!-- HEADER END -->

              <!-- CONTENT STARTS -->

              <table width="600" cellspacing="0" cellpadding="0" border="0">

                  <tr>

                     <td align="left"valign="top">

                         <!-- ... -->

                     </td>

                  </tr>

              </table>

              <!-- CONTENT END -->

              <!-- FOOTER STARTS -->

              <table width="600" cellspacing="0" cellpadding="0" border="0">

                  <tr>

                     <td align="center">

                         <!-- ... -->

                     </td>

                  </tr>

              </table>

           <!-- FOOTER END -->

           </td>

        </tr>

   </table>

</body>


2 колоночная основа:

<body style="margin: 0; padding: 0;">

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

      <tr>

         <td align="center" valign="top">

            <!-- HEADER STARTS -->

            <table width="600px" cellspacing="0" cellpadding="0" border="0">

               <tr>

                  <td align="center">

                     <!-- ... -->

                  </td>

               </tr>

            </table>

            <!-- HEADER END -->

            <!-- CONTENT STARTS -->

            <table width="600px" cellspacing="0" cellpadding="0" border="0">

               <tr>

                  <!-- LEFT CONTENT STARTS -->

                  <td width="400"  align="center"valign="top">

                     <table width="360" cellpadding="0" cellspacing="0" border="0">

                        <tr>

                           <td align="left">

                              <!-- ... -->

                           </td>

                        </tr>

                     </table>

                  </td>

                  <!-- LEFT CONTENT END -->

                  <!-- RIGHT CONTENT STARTS -->

                  <td width="200"align="center">

                     <table width="160" cellpadding="0" cellspacing="0" border="0">

                        <tr>

                           <td align="left">

                              <!-- ... -->

                           </td>

                        </tr>

                     </table>

                  </td>

                  <!-- RIGHT CONTENT END -->

               </tr>

           </table>

           <!-- CONTENT END -->

           <!-- FOOTER STARTS -->

           <table width="600" cellspacing="0" cellpadding="0" border="0">

              <tr>

                 <td align="center">

                    <!-- ... -->

                 </td>

             </tr>

           </table>

           <!-- FOOTER END -->

         </td>

      </tr>

  </table>

</body>

 

Обратите внимание на то, что шаблоны сделаны с боковыми отступами в 20px, т.к. margin и padding использовать не рекомендуется. Т.е., чтобы задать боковые padding-и нужно внутри ячейки сделать отцентрированную таблицу меньшего размера (как в примере выше) и разница этих таблиц и будет размер отступов.

Для всех встречающихся в письме таблиц обязательно задавайте свойства cellspacing="0", cellpadding="0" и border="0".

2. Множество статей, посвященные верстке HTML-писем единогласно пишут, что все стили нужно прописывать исключительно inline. Это конечно правильно, но уже в настоящий момент, все перечисленные мною выше почтовые сервера (кроме Yandex, Lotus
Notes
и Google Mail), понимают и встроенные стили (даже MC Office Outlook всех версий), т.е.:

<style type="text/css">

     span

        {

            font-family: Arial, sans-serif;

            font-size: 12px;

            color: #404040;

        }

</style>

будут работать для письма остальных "почтовиков". Выбор остается за вами. 

Внешние таблицы стилей по прежнему использовать нельзя.

3.  Для того чтобы текст письма отображался во всех почтовых клиентах одинаково, его необходимо оборачивать в дополнительный инлайновский тег (используя старый – добрый font), для которого указывать соответствующие стили. 

Пример:

<p>

   <font face="Arial" size="2" style="font-size: 12px;" color="#404040">Это тестовый текст</font>

</p>

 

Размер шрифта в style указывайте только px. Для почтовых клиентов, которые не понимают инлайновские стили прописывайте размер в атрибуте size, который должен следовать перед style.

Не используйте теги h1, h2, …, h6. Лучше оберните заголовок в тег <font>  и пропишите необходимые свойства.

Чтобы сделать текст жирным, не стоит писать «font-weight: bold;», лучше просто использовать теги <b> или <strong>. Соответственно вместо «font-weight: italic;», лучше использовать тег <i> или <em>. Это дает 100% гарантию одинакового отображения во всех почтовых клиентах.

Для ссылок используем следующую конструкцию, которая позволит сделать не только текст, но и подчеркивание во всех почтовых клиентах одинаковым:

<font face="Arial" size="2" style="font-size: 12px;" color="#0077c0"><a href="#"

  target="_blank" style="color: #0077c0;"><font face="Arial" size="2" style="font-size: 12px;"

color="#0077c0">Это тестовая ссылка</font></a></font>

Не забывайте про target="_blank".

4. К сожалению, фоновые изображения не поддерживается некоторыми почтовыми клиентами, поэтому не стоит его использовать в своем письме, либо задавайте альтернативный однотонный фоновый цвет. Единственный способ добиться отображения фонового рисунка во всех перечисленных выше почтовых клиентах это прописать исключительно в тег <body> следующий стиль:

   style="background: url();"

Хотел бы отметить, что запись должна быть именно такой. background-repeat задать не получиться, только потеряете фон. Единственное что можно, так это указать расположение рисунка (background-position).

5. Если вы хотите сделать отступ между «блоками» в письме, создавайте пустую строку, внутрь которой помещайте прозрачную картинку в формате .gif, которая в свою очередь обернута в элемент div и у элементов td/img следует обязательно указывайте нужную (одинаковую) высоту. 

Пример:

<table width="600px" cellspacing="0" cellpadding="0" border="0">

   <tr>

      <td>

         <!-- BLOCK 1 -->

      </td>

   </tr>

   <!-- VERTICAL MARGIN STARTS -->

   <tr>

      <td height="20">

          <div style="margin: 0; padding: 0; line-height: 0;">

               <img src="indent.gif" border="0" height="20"

                   style="display: block;" alt="" /></div>

      </td>

   </tr>

   <!-- VERTICAL MARGIN END -->

   <tr>

      <td>

         <!-- BLOCK 2 -->

      </td>

   </tr>

</table>

Не буду объяснять эту конструкцию, но это правильно на 99.8%.

Добавлять в разделяемую строку пробел в виде &nbsp; так же не стоит, т.к. высота не получиться точной.

6. Абсолютное позиционирование (position: absolute;) в некоторых почтовиках работает неккоректно. Если вам необходимо на картинке выделить кнопку или какой-либо предмет в виде ссылки используйте старую добрую Image Maps.

Пример:

<img src="img.png" usemap="#btn_link" width="0" height="0" alt="" />

<map name="btn_link">

   <area shape="rect" coords="0,0,0,0" href="http://www.quizful.net" target="_blank" alt="" />

</map>

7. Дополнительные советы:

Для  «кроссмайлерного»отображения маркированных списков, их лучше делать не с помощью тегов <ul> и <ol>, а все теме же таблицами.

Для картинок, которые единственные занимают всю ячейку таблицы прописывайте свойство display: block;  - это избавит вас от лишних пикселов снизу.

MC Office Outlook добавляет  padding в 1px внутри всех ячеек таблицы. Чтобы этого избежать в своих HTML-письмах, для ячеек указывайте свойство border-collapse: collapse;.

Это были основные тяжелые места в верстке продвинутой HTML-рассылки, существует и множество других нюансов, но их преодолеть гораздо легче.

И последний мой совет: делайте ваши HTML-письма валидными.


Если Вам понравилась статья, проголосуйте за нее

Голосов: 15  loading...
mariam   videotutor   ksy   svlanavk   KPKanimator   mospek   oyeme   Hripunov   ivanna   krieger_   ybigus   flash13   hollowinside   zharsky   olimp2020