Макет Email Рассылки

макет email рассылки

Из песочницы Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах.

Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению. Основные положения Для верстки писем используется табличная верстка.

Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Такие конструкции не будут работать в head и body: Если использовать ширину больше этого значения, то письмо по ширине не поместится в почтовый клиент. Обязательные свойства для HTML-тегов Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем.

Их нужно использовать всегда во всех html тегах письма. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами; -webkit-text-size-adjust: По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему; display: Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами: Отступы Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода.

Отступы можно делать с помощью CSS свойства padding. Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook. Советую применять padding к ячейке таблицы: Он показывает браузеру, каким образом интерпретировать HTML-разметку.

Для писем наиболее подходящим доктайпом является: Работа с текстом Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: Цвет Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр HEX dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, ffffff можно сократить fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи.

Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят.

Например, D4D4D4 нужно записать в таком виде: RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb ,, не будет работать. Картинки Существуют почтовые клиенты, которые по умолчанию не показывают картинки и только после клика на определенную кнопку картинки начинают отображаться.

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

Решение проблем В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом: Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку.

Также необходимо указать нужные стили для ссылок. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: Шрифты В почтовых рассылках допускается использование только стандартных шрифтовых наборов, которые присутствуют на всех устройствах.

Представляю вашему вниманию список безопасных шрифтов, которые есть на всех устройствах. Arial, Helvetica, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif; Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 Gmail.

Адаптивная верстка На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них. Суть данного метода заключается в следующем: Внутренние блоки, которые располагаются горизонтально, при нехватки места прыгают друг под друга, таким образом все элементы письма, которым не хватает, будут уходить вниз.

Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center: Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.

Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы: Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.

Емейл шаблоны. Бесплатные емейл HTML-шаблоны — zennoposter.club

Но больших отличий email писем от обычных сайтов на html нет. Единственные отличия, это css внутри html и наличие уже устаревшей на сайтах табличной верстки. Поэтому знания html будет достаточно для создания email письма. Для этого не нужно проходить профессиональное обучение web-дизайну.

Но ведь гораздо легче скачать варианты, которые ходят в интернете в свободном доступе. И вот один из таких вариантов. На фотографиях этого email шаблона представлены кожанные сумка, кошелек и чехлы для телефона. Шаблон, как таковой, не имеет тематики. Скачать Demo Полностью адаптивный резиновый легкий простой email шаблон Отлично сверстанный шаблон или платформа для email шаблона. Здесь нет картинок, иконок и так далее. Это пример как нужно верстать email шаблоны.

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

Ниже приведен пример шаблона электронного письма с широко используемой высотой Как вы можете видеть, 4 различных блока контента легко объединяются в простые для прокрутки размеры. Размеры предварительного просмотра У многих почтовых клиентов, таких как Outlook, Apple Mail, Thunderbird есть окно предварительного просмотра с ограниченным размером — пикселей в ширину и пикселей в высоту. Они не показывают уменьшенную копию всей электронного письма, но фиксируют верхнее поле электронного письма с соответствующим размером окна предварительного просмотра.

Убедитесь, что первые pxpx имеют ценную информацию, которая заставит пользователей открывать и читать электронную почту. Хорошее первое впечатление лучше, чем тысячи лайков. Шаблоны и редакторы шаблонов для e-mail рассылок Такое количество почтовых клиентов не составляет даже половины вашей базы данных электронного письма, поэтому это не является причиной разрушения дизайна шаблона электронного письма и перехода к началу всех элементов вызова для действия всего текста.

Обычно заголовок и баннер, или половина последнего, попадают в раздел предварительного просмотра. Вот как выглядит панель предварительного просмотра в почтовом клиенте mail. Размер предварительного заголовка Предзаголовок — это строка предварительного просмотра, где появляется только короткое вводное сообщение и возможность просмотра электронного письма в браузере или в виде веб-версии, если есть проблемы с просмотром электронного письма.

В соответствии с тем, что это поле более техническое, чем контекстуальное, вы не должны делать его большим или размещать там какие-либо дополнительные элементы. Размеры поля предзаголовка варьируются от 50 пикселей до 65 пикселей по высоте. Ширина обычно составляет пикселей из-за размеров шаблона.

Вот как выглядит стандартный заголовок в редакторе Stripo. Вы можете изменить сообщение предзаголовка, но следите, чтобы оно не превышало символов: Вот еще несколько примеров предзаголовка: Размер заголовка Самая распространенная высота заголовка, который не содержит меню или массивного логотипа, составляет 70 пикселей. Для тех, у кого есть панель меню, заголовок может быть высотой pxpx. Высота заголовка, которая увеличивается на пикселей, не подходит для обзора. Существуют сотни и тысячи стилей, которые используются для дизайна заголовков электронного письма, но выбирают тот, который удобен для пользователя и одновременно поддерживает мобильное расширение.

Кроме этого, выберите стиль и цветовую схему, которая способна подчеркнуть фирменную идентичность и не разбивать на части пользовательский интерфейс. Вот несколько примеров хорошего дизайна заголовка электронного письма: Размер баннера Баннер — это место, где вы можете реализовать свое творчество, и вы не должны быть связаны размерами. Чем меньше контента вы вкладываете в него, тем лучше результат.

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

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

Чем больше вес ваших писем, тем больше времени ваши пользователи ожидают его загрузки. Наиболее распространены размеры px x px и px x px для баннеров. Многие дизайнеры электронного письма экспериментируют с размерами баннеров, хотя ширина ограничена стандартным размером шаблона электронного письма px, длина может быть различной и варьироваться от размеров фонового изображения.

Любой баннер не может идти без кнопок, которые широко используются, чтобы привлечь внимание пользователей. Вот несколько примеров креативных и информативных баннеров: Размер кнопки Нет правил, связанных с стандартами размерности электронного письма.

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

Иногда трудно даже найти кнопку, потому что она очень маленькая и безликая, и когда дело доходит до нажатия, никто этого не делает. Размер 46px x 46px является минимальным для большого пальца. Это же правило работает и для размера значков в социальных сетях.

Хотя для кнопок нет стандартов, лучше использовать те же размеры, которые используются в веб-дизайне, потому что пользователи с большей вероятностью задумывают те вещи, которые являются общими для них. Наиболее распространенные размеры кнопок: Возьмите в качестве предпосылки вашу концепцию дизайна электронного письма и перейдите к ее улучшению. Более важным является правильное размещение кнопки в теле письма. Размер кнопки по умолчанию в редакторе электронного письма Stripo составляет px x 55px, но вы можете легко изменить размер и цвет, если вам нужно.

Вот как Grammarly использует кнопки в своих рассылках: Вот пример, когда немного поигрались контрастом: Вот еще один широко используемый пример кнопки для баннера: Размер картинки Согласно тому, что ширина будет составлять пикселей — пикселей для всего шаблона электронного письма, ширина изображения не является исключением. Поэтому высота является пропорциональной настройкой на указанную ширину, наиболее часто используемый размер изображения составляет формат пикселей x пикселей.

Есть тонны изображений с таким размером в Pinterest или вы можете найти достаточно изображений с этими размерами, используя поиск Google или любую другую поисковую систему, которую вы хотели бы. Если вы используете изображение с другими размерами, нет никаких гарантий, что они будут отображаться правильно и иметь оптимальный вес.

Например, вы можете подумать, что, если вы используете адаптивный шаблон независимо от того, какие изображения вы загружаете в электронное письмо, они будут автоматически скорректированы до нужных размеров, но вы не будете упоминать о том, что качество изображения не будет изменено, поэтому общий размер будет достаточно большим, чтобы повлиять на скорость загрузки. Представьте, что вы хотите добавить px x px изображение к своей электронной почте.

Его вес будет составлять примерно 2,5 МБ, что равно секундному времени загрузки для обычного интернет-соединения. Это слишком долго, чтобы ждать получателей электронного письма, потому что остальные элементы электронного письма имеют свой вес тоже.

Возможно, половина пользователей не будет ждать, так что вы упустите и клиентов тоже. Уменьшите изображения, чтобы не сломать удобство использования и, как результат, процесс просмотра электронного письма. Вы можете создать отдельную версию электронного письма для мобильных устройств с шириной пикселей и использовать изображения JPEG вместо PNG, потому что они имеют меньший размер, чем изображения с разрешением и размером PNG.

Хотя качество изображения будет хуже. Еще одна хорошая идея — не включать столько изображений в мобильный шаблон, как у вас для десктопной версии. Это упростит прокрутку, которая может показаться бесконечной во многих случаях для мобильных пользователей. В этом случае скорость загрузки также увеличится. Размер блока контента Максимальная длина текстового контента без прерывания изображения должна быть длиной около pxpx.

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

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

Так вы можете значительно сократить текст. Текст не сильно влияет на размер, поэтому в соответствии с оптимизацией размера электронного письма вы можете использовать столько текста, сколько вам нужно, не влияя на общий вес электронного письма. Чем более длинный контент вы используете, тем меньше шансов, что он будет прочитан пользователями. Если у вас много изображений и гораздо меньше текста для них, есть возможность разместить изображения и их описание в шахматном порядке даже в шаблоне одного столбца.

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

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

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

Бесплатный сервис для верстки и тестирования html шаблонов для email рассылки. SendPulse предоставляет адаптивные макеты для любого события и вида деятельности. © Главная · Возможности · Email рассылка; Шаблоны . Воспользуйтесь качественными шаблонами e-mail рассылок для создания красивых писем для своих клиентов.

Предыдущая статья: анонимный чат бот вконтакте

Следующая статья: смс зеннопостер