меню
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Требования к макетам и верстке html писем

Вы здесь:

Список требований

Основные требования перед версткой:

Ваш шаблон должен быть в формате psd в слоях.

Шаблон должен быть со стандартными шрифтами. Вот список стандартных:

  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Tahoma
  • Trebuchet MS

Рекомендуемые параметры:

  • Шрифты: от 12-13 px.
  • Ширина: 600-700 px.
  • Размер: до 8 мб.

1. Дизайн

1.1. Фон под текстом должен быть однородным (просто заливка цветом, желательно белый), градиент и картинки делать не стоит, т.к. письмо придется верстать картинкой;

1.2. Крайне желательно для текстового блока использовать общепринятые шрифты. Нюанс в том, что если у пользователя нет какого-то хитрого и дизайнерского шрифта, то в этом случае у него в письме он заменится на какой-нибудь Arial, и это может выглядеть не очень презентабельно.

Общепринятыми шрифтами для этих целей считаются:

  • Arial
  • Tahoma
  • Verdana
  • Trebuchet MS
  • Georgia
  • Courier
  • Courier New
  • Times New Roman

Старайтесь не делать белый текст , так как при получении письма этот текст не будет видно (картинки зачастую подгружаются уже после нажатия ссылки для отображения графики).

1.3. Не стоит делать очень широкие макеты. Совершенно достаточно ширины не более 700 px (самое адекватное отображение 600 px), в противном случае придется масштабировать письмо с возможным ухудшением его восприятия.

1.4. Не стоит делать очень длинные письма, чтобы для просмотра письма требовалось прокручивать скролл вниз.

1.5. Брендинг должен присутствовать, но он не должен отвлекать от сообщения в письме.

1.6. Подумайте, как будет выглядеть письмо на небольшом экране или в окне браузера, которое не развернуто на весь экран. Желательно смысловую часть письма поместить в первой трети сообщения слева, чтобы даже при неполном открытии письма/при небольшом разрешении экрана можно было понять, о чем идет речь.

1.7. Предусмотреть ссылку для просмотра письма в браузере

1.8. Никогда нельзя самое важное представлять в виде изображения. Важная информация должна быть только текстом, а не картинкой.

2. Технические требования к верстке

2.1. Все файлы в кодировке UTF-8

2.2. Использовать  <meta http-equiv=»content-type» content=»text/html» />

2.3. Структура файлов: index.html + *.jpg/gif/и тд, т.е. картинки в той же папке

2.4. Картинки должны называться только латинскими буквами, без пробелов. Пробелы можно заменять нижним подчеркиванием. Не допустимо использование других символов ( пример: можно atlanticheskiy_okean. Нельзя: atlanticheskiy okean или atlanticheskiy-okean

2.5. Имена картинок не должны совпадать, даже если разные по типу (img.jpg и img.gif,  так делать нельзя)

2.6. Верстка только табличная

2.7. Css прописывается только инлайн стилями ( style=»font-family:verdana; font-size:14px; color:#333333″)

2.7.1. Лучше всего прописывать общий стиль для <td>

<td style="font-family:verdana; font-size:14px; color:#333333" > </td>

2.7.2. Стараться не использовать тег <p> — делает слишком большие разрывы между строками.  Лучше всего для форматирования текста использовать теги  <span>  , на крайний случай <div>  и в них же указывать стиль текста ( если он разнится от прописанного стиля в <td>)

<tr>
<td width="382" style="font-family:verdana; font-size:14px; color:#333333">Текст для <span style="font-family:verdana; font-size:18px; color:red">примера</span></td>
</tr>

2.8 Не использовать отступы padding:0px; margin:0px — все выравнивание делать с помощью таблицы/колонок ( половина почтовиков игнорирует эти теги, по тому ваш текст может быть впритык к рамкам) . То же относится к атрибутам cellpadding,  cellspacing.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="260">
<tr>
<td width="9" style="font-size:1px" height="5">&nbsp;
</td>
<td width="242" style="font-size:1px" height="5">&nbsp;</td>
<td width="9" style="font-size:1px" height="5">&nbsp;</td>
</tr>
<tr>
<td width="9">&nbsp;</td>
<td width="242" style="font-family:verdana; font-size:14px; color:rgb(51,51,51); ">Текст для пример</td>
<td width="9">&nbsp;</td>
</tr>
</table>

2.9. Нельзя использовать внешние css

2.10. Лучше стараться не использовать style=”background:url(…);” (задний фон письма)  так как не все почтовики выводят этот атрибут. Желательно чтоб картинки выводились с помощью тега img (вставка изображения), и в таком случае обязательно использовать для тега img атрибуты width, height, border<img src=»…» width=»…» height=»…» border=»0″ alt=»» />

2.11. Применяйте функцию alt-text для изображений.

2.12. О теге font нужно забыть вовсе.

2.13. Код не должен отбиваться табами, так как некоторые почтовики превращают отступы (/t) на &nbsp

2.14. Старайтесь делать переносы строк.

2.15. Имейте ввиду что при использовании gif  png прозрачные точки , в The Bat могут быть заменены черным

2.16. В ссылках используйте атрибут target= “_blank”, чтобы страница не загружалась в отдельном окне с письмом.

2.17. Если вы все же решили сделать рассылаемое письмо с помощью картинок то необходимо каждую с частей загнать в табличку в соответствии с желаемой картиной.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="font-family:verdana; font-size:1px; text-align:center;">
<tr>
<td width="600" style="font-family:verdana; font-size:14px; text-align:center;">Название рассылки</td>
</tr>
<tr>
<td width="600" style="font-family:verdana; font-size:1px; text-align:center;"><img src="\wablon\1.JPG" width="600" height="120" border="0"></td>
</tr>
<tr>
<td width="600" style="font-family:verdana; font-size:1px; text-align:center;"><img src="\wablon\1.JPG" width="600" height="120" border="0"></td>
</tr>
</table>

2.18. Старайтесь не делать белый текст ,  так как при получении письма этот текст будет невидно ( картинки зачастую подгружаются уже после нажатия ссылки для отображения графики)

2.19.  Крайне желательно для текстового блока использовать общепринятые шрифты. ( пункт 1.2)

3.  Тестирование

Проще всего тестировать письма путем отправки письма на gmail и  на mail.ru. Gmail шлет html письма в неизменном виде.  Как показала практика, таким путем можно обнаружить максимум ошибок.

4.  Если вы высылаете ваш графический макет для верстки и оптимизации под почтовики.

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

4.1.2. .psd формат макета.

4.1.3. Слои не должны быть склеены

4.1.4. Если вы используете нестандартные графические шрифты, вы должны выслать их дополнительно ( просьба учесть пункт 1.2).

4.1.5. Цвета CMYK

4.1.6. Если это текстовый шаблон (а не баннер), советуем использовать ширину макета 600- 650 px.

4.1.7. Текстовое наполнение высылается отдельно в  Word файле.

4.2. У вас есть графическое представление макета, но оно сделано «от руки»

4.2.1. .jpg формат

4.2.2. Все используемые графические материалы (картинки) высылаются отдельно.

4.2.3. Текстовое наполнение высылается отдельно в Word файле. Текст должен быть оформлен (цвет и тип шрифта) в соответствии с желаемым результатом.  Использовать можно только стандартные типы шрифта.