×

Внимание

Lack of access rights - File ':/images.ping-admin.ru/i/uptime/b0be7032dddd3d32a6196e281d8fd64672457_111.gif'

Верстка писем для Емейл рассылок.

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

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. Использовать

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. Лучше всего прописывать общий стиль для

2.7.2. Стараться не использовать тег- делает слишком большие разрывы между строками. Лучше всего для форматирования текста использовать теги , на крайний случай

и в них же указывать стиль текста ( если он разнится от прописанного стиля в )

Текст для примера

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

Текст для пример

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

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

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

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

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

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

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

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

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

Название рассылки

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

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

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

Каждое письмо перед Отправкой проходит спам тест на соответсвие!

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

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

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

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

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

4.1.5. Цвета CMYK4.1.4. Если это текстовый шаблон (а не баннер), советуем использовать ширину макета 600- 650 px.4.1.5. Текстовое наполнение высылается отдельно в Word файле.

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

4.2.1. .jpg формат

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

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

На нашем сайте мы используем cookie, данные об IP-адресе и местоположении для сбора информации технического характера, в соответствии с политикой организации по обработке персональных данных