Подробно о email шаблонах для рассылки

Сегодня решил просветить публику по поводу рассылки на email. Не буду вдаваться сейчас в подробности что лучше – иметь свой софт для рассылки или же пользоваться сервисами – речь не об этом. А о том, как правильно создать email в html формате, чтобы его получили без искажений и проблем большинство юзеров не зависимо от их почтовых сервисов.

Итак, первое, что нужно понимать при дизайне макета – это то, что email – это не сайт, куда можно пихать огромные картинки, флеш и кучу графики. Все должно быть предельно просто, но при этом должны быть выделены основные моменты, которые вы хотите донести до пользователя. По-большому счету email template очень схож с дизайном лендинга-одностраничника, только ещё проще. Про дизайн лендингов можете почитать мою прошлую статью о лендингах

Также, стоит сказать и о ширине макета. Обычно пользуются шириной 700-800 пикселей, но путем опытов было установлено, что оптимальная ширина для меил шаблонов – это 620-640 пикселей и не спрашивайте откуда эта цифра – это результат многократных опытов, поверьте просто на слово.

А теперь подробнее о верстке.

Я бы выделил такие моменты.

1. Использовать стоит таблицы для разметки, не div

2. Ширину блока нужно указывать в столбце, а не для всей таблицы.

3. Не используйте цвет фона для бекграунда в теге body.

Проблема в том, что многие почтовики игнорят конструкцию вида

body style=”color:#fff” – вместо этого используйте

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
   <td bgcolor=”#000000”>
   Your email code goes here.
   </td>
</tr>
</table>

4. Проверьте поддерживают ли почтовики css правила нужные вам. Посмотреть полную таблицу поддержки можете на страничке css поддержки клиентов

5. Используйте только инлайн стили

6. Прописывайте стили полностью без сокращений. Т.е. старайтесь не использовать сокращения вида border: 1px solid #000

7. Для того чтобы переформатировать все ваши стили в инлайн, вам может помочь сервис premailer

8. Для обозначения цвета ссылок используйте конструкцию

<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>

9. Картинки. Следуйте нескольким правилам

- не вставляйте важную информацию в картинки, так как по умолчанию они могут блокироваться многими почтовыми сервисами

- не используйте png

- всегда указывайте ширину и высоту картинок

- всегда указывайте также и цвет бекграунда для картинок, которые используются в качестве бекграунда

- указывайте alt текст

- для хака hotmail используйте img {display:block;}

- для выравнивания более предпочтительнее использовать

<img src="image.jpg" align="right">

10. Для тестирования можете использовать некоторые полезные сервисы

Вот лишь небольшой свод правил. Если хотите больше и нет проблем с инглишем, то вот вам полное руководство по верстке email template

Но это ещё не все, вы можете скачать уже готовые email шаблоны и настроить их под ваши нужды. Или здесь

Мониторинг сетки:

Однажды, возникает необходимость что-то купить, продать обменять. Собственного для этого существует доска объявлений, на которой очень легко подать новое объявление, которые просмотрит 1000 посетителей.

 

Похожие статьи:

• Кастомизируемая логин панель на wordpress
• Плагин похожие записи
• Добавляем кнопки социальных сервисов на wordpress + плагин
• Работа с миниатюрами в MODX – автоматический ресайз
• Кроссбраузерные техники css3 которые можно использовать уже сейчас