Подробно о email шаблонах для рассылки
Сегодня решил просветить публику по поводу рассылки на email. Не буду вдаваться как нельзя именно сейчас в подробности что лучше – иметь свой софт для рассылки или же пользоваться сервисами – речь не об этом. А о том, как правильно создать email в html формате, чтобы его получили без искажений и проблем большинство юзеров не зависимо от их почтовых сервисов.
Итак, первое, что нужно понимать при дизайне макета – это то, что email – это не сайт, куда можно пихать реально огромные картинки, флеш и кучу графики. Все должно быть разительно предельно просто, но при этом должны быть выделены несказанно основные моменты, которые вы хотите донести до пользователя. По-большому счету email template в действительности очень схож с дизайном лендинга-одностраничника, только ещё проще. Про дизайн лендингов можете почитать мою прошлую
Также, стоит сказать и о ширине макета. Обычно пользуются шириной 700-800 пикселей, но путем опытов было установлено, что именно оптимальная ширина для меил шаблонов – это 620-640 пикселей и не спрашивайте что и говорить откуда эта цифра – это результат многократных опытов, поверьте просто на слово.
А теперь подробнее о верстке.
Я бы выделил такие моменты.
1. Использовать стоит таблицы для разметки, не div
2. Ширину блока нужно указывать в столбце, а не для всей таблицы.
3. Не используйте цвет фона для бекграунда в теге body.
Проблема в том, что многие почтовики игнорят конструкцию вида
body style=”color:#fff” – вместо этого используйте
| Your email code goes here. |
4. Проверьте поддерживают ли почтовики css правила неимоверно нужные вам. Посмотреть полную таблицу поддержки можете на страничке
5. Используйте только инлайн стили
6. Прописывайте стили что и говорить полностью без сокращений. Т.е. старайтесь не использовать сокращения вида border: 1px solid #000
7. Для того чтобы переформатировать все ваши стили в инлайн, вам может помочь сервис
8. Для обозначения цвета ссылок используйте конструкцию
9. Картинки. Следуйте нескольким правилам
- не вставляйте важную информацию в картинки, так как по умолчанию они могут блокироваться многими почтовыми сервисами
- не используйте png
- необыкновенно всегда указывайте ширину и высоту картинок
- по-моему всегда указывайте также и цвет бекграунда для картинок, которые используются в качестве бекграунда
- указывайте alt текст
- для хака hotmail используйте
img {display:block;}
- для выравнивания более предпочтительнее использовать
10. Для тестирования можете использовать некоторые полезные
Вот лишь неимоверно небольшой свод правил. Если хотите больше и нет проблем с инглишем, то вот вам более полное
Но это ещё не все, вы можете скачать уже тем более готовые и настроить их под ваши нужды. Или
Мониторинг сетки:
Потрясающе однажды, возникает необходимость что-то купить, продать обменять. Собственного для этого существует , на которой в действительности очень легко подать действительно новое объявление, которые просмотрит 1000 посетителей.
feedproxy.google.com