Верстка html-писем - советы. Поля и отступы

10.09.2019 Снилс

Это самый объемный пост, который мы когда-либо публиковали, потому что недостаточно всего двух предложений или даже двух абзацев, чтобы пролить свет на всю тему. Стандартный размер для ширины составляет 600 пикселей для компьютеров, а также 320 пикселей для вертикального и 480 пикселей для горизонтального просмотра на мобильных устройствах. Высота не ограничена и зависит от длины содержимого. Это все!

Несколько лет назад ширина 600 пикселей была обязательным стандартом и не имела альтернатив. На данный момент 600 пикселей — самая популярная ширина для дизайна электронного письма, но стандарты стали гибкими.

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

«Резиновый» дизайн

В «резиновом» дизайне используется подход, основанный на процентном соотношении для размеров электронного письма из-за максимальной ширины и высоты различных почтовых клиентов. Элементы электронного письма соотносятся друг с другом таким же образом. Он позволяет использовать любую ширину и автоматически настраивается на те, которые есть у клиента электронного письма. «Резиновый» дизайн — лучшая практика для создания письма с тяжелым контентом.

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

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

Starbucks предпочитает такой дизайн напитков для почтовых рассылок:

Масштабируемый или мобильный дизайн

Масштабируемый дизайн электронного письма — это тот, который хорошо работает как для компьютеров, так и для мобильных устройств. Масштабируемый дизайн чаще всего называют мобильным. Согласно статистике, в 2018 году около 77% электронных писем открываются с использованием мобильных устройств. Это не так уж мало, поэтому ваши мобильные шаблоны для мобильных устройств должны создаваться c учетом этой статистики.

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

Адаптивный дизайн

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

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

Адаптивный дизайн как техника появился в конце 2001 года в качестве веб-концепции, позже он был успешно подхвачен при разработке шаблонов электронного письма. Например, почта Yahoo начала принимать подобные письма в 2005 году.

Из-за того, что некоторые электронные письма не оптимизированы для мобильных экранов, они имеют более низкий коэффициент конверсии в среднем на 28% , потому что элементы с интерактивным доступом становятся труднодоступными, и люди чаще ошибаются. Те, кто делает адаптивный дизайн при настройке маркетинговой кампании по электронной почте, с большей вероятностью преуспеют, чем другие. Выбор очевиден.

Какую ширину должно иметь электронное письмо?

Размер предварительного заголовка

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

Размеры поля предзаголовка варьируются от 50 пикселей до 65 пикселей по высоте. Ширина обычно составляет 600-640 пикселей из-за размеров шаблона.

Вот как выглядит стандартный заголовок в редакторе Stripo. Вы можете изменить сообщение предзаголовка, но следите, чтобы оно не превышало 75-140 символов:

Вот еще несколько примеров предзаголовка:

Размер заголовка

Самая распространенная высота заголовка, который не содержит меню или массивного логотипа, составляет 70 пикселей. Для тех, у кого есть панель меню, заголовок может быть высотой 150px-200px. Высота заголовка, которая увеличивается на 300 пикселей, не подходит для обзора.

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

Вот несколько примеров хорошего дизайна заголовка электронного письма:

Размер баннера

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

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

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

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

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

Вот несколько примеров креативных и информативных баннеров:

Вот, например, анимированный:

Размер кнопки

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

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

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

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

175px x 35px
120px x 90px
120px x 60px
88px x 31px

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

Размер кнопки по умолчанию в редакторе электронного письма Stripo составляет 235px x 55px, но вы можете легко изменить размер и цвет, если вам нужно.

Вот как Grammarly использует кнопки в своих рассылках:

Вот пример, когда немного поигрались контрастом:

Вот еще один широко используемый пример кнопки для баннера:

Вот анимированная кнопка:

Размер картинки

Согласно тому, что ширина будет составлять 600 пикселей — 640 пикселей для всего шаблона электронного письма, ширина изображения не является исключением. Поэтому высота является пропорциональной настройкой на указанную ширину, наиболее часто используемый размер изображения составляет формат 640 пикселей x 480 пикселей. Есть тонны изображений с таким размером в Pinterest или вы можете найти достаточно изображений с этими размерами, используя поиск Google или любую другую поисковую систему, которую вы хотели бы.

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

Представьте, что вы хотите добавить 3264px x 2448px изображение к своей электронной почте. Его вес будет составлять примерно 2,5 МБ, что равно 12-секундному времени загрузки для обычного интернет-соединения. Это слишком долго, чтобы ждать получателей электронного письма, потому что остальные элементы электронного письма имеют свой вес тоже. Возможно, половина пользователей не будет ждать, так что вы упустите и клиентов тоже. Уменьшите изображения, чтобы не сломать удобство использования и, как результат, процесс просмотра электронного письма.

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

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

Размер блока контента

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

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

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

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

Вот пример, где он был сделан отлично:

Количество блоков контента

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

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

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

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

Размер нижнего колонтитула

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

Я предпочитаю лаконичные нижние колонтитулы, которые содержат информацию, которая должна быть там со 100% вероятностью. Классический нижний колонтитул должен содержать контактную информацию, опцию отмены подписки и значки обмена социальными медиа. Вот и все, поэтому стандартное измерение нижнего колонтитула 600px x 200px более чем достаточно, чтобы собрать всю эту информацию.

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

Еще одна поразительная точка дизайна нижнего колонтитула электронного письма — как разместить длинный адрес компании в такой небольшой области, как нижний колонтитул. Прежде всего, не думайте, что кто-то отправит вам настоящее письмо или посетит вашу компанию после получения электронного письма. На мой взгляд, лучший выбор — дать ссылку на страницу «О нас», где эта информация будет выделена в полном классе.

Вот необычный нижний колонтитул электронного письма с симпатичным дизайном значков социальных сетей:

Материал из Email Маркетинг Вики

Особенности вёрстки email Вёрстка email-сообщений несколько отличается от web-вёрстки. Если для web-вёрстки современных сайтов используется CSS3, то для вёрстки email проблематично использование даже более ранних стандартов CSS. Это связано с тем, что многие пользователи до сих пор используют старые устройства и старые версии почтовых клиентов. Вместе с этим количество новых устройств постоянно растёт. А значит, чтобы письма корректно изображались на большинстве существующих устройств, придется сделать шаг назад и больше полагаться на возможности HTML-вёрстки.

В идеальном варианте при разработке письма дизайнер должен постоянно советоваться с верстальщиком.

Основные параметры

* Размер
Оптимальная ширина письма – 600-650px. При адаптивной вёрстке в медиа-запросах или в файлах стилей чаще всего прописывают максимальную величину экрана в 480px. При этом размеры контентных блоков и самого письма лучше задавать в процентах и указывать максимальную ширину. Так письмо будет автоматически сжиматься на экранах меньше 600px. Правда, этого приёма будет не достаточно для адаптивной вёрстки с учётом особенностей мобильных устройств.

* Фон и цвет
Для удобства чтения и привлечения внимания часто используют светлый фон, отличный от белого. Как обозначать цвета. RGB-запись цвета воспринимается не всеми почтовыми клиентами. Поэтому лучше использовать шестнадцатиричную запись кода цвета и не сокращать его .
* Разбивка контента на сегменты
Для писем и email рассылок используют табличную вёрстку. Несмотря на то что многие веб-дизайнеры считают такой подход устаревшим, для email он оптимален.

* Размеры элементов
Размеры элементов должны задаваться в абсолютных значениях. Размеры ячеек таблицы указываются в процентах, размеры элементов – в пикселах. При этом лучше указывать размер без обозначения px. Так можно избежать некоторых проблем отображения в Outlook (например, width="400").

* Доктайп (DOCTYPE)
Любой HTML-документ начинается с элемента DOCTYPE. Он сообщает браузеру, как интерпретировать код. Существует несколько версий языка HTML с разным синтаксисом. Для писем рекмендуется использовать доктайп:

* Шрифты
Список шрифтов, которые можно использовать в email-шаблонах :

* HTML-теги, которые можно использовать в email

* CSS-стили
В вёрстке email использование стилей CSS ограничено, практически не используется CSS3. Все стили прописываются инлайн (то есть рядом с элементом, к которому они относятся). Стили, прописанные внутри тега или игнорируются большинством почтовиков .

CSS-стили в email-вёрстке

Стили CSS позволяют задать основные параметры для элементов на странице (размеры, выравнивание, цвет фона и т.д.). Существует 4 способа задания стилей для HTML-тегов :

* Внедрённый стиль

Стиль задаётся в теге документа. Например:

Здесь 1 раз задаётся стиль для тега

, и все элементам с тегом

будет присвоен описанный стиль.
* Импортированный стиль
Импортированный стиль также прописывается в теге документа, но при этом все его параметры загружаются из файла. Пример:

* Стиль из файла
Этот способ задания стиля похож на предыдущий, с той лишь разницей, что не используется стиль , а стразу прописывается ссылка на файл стилей. Пример:

* Inline-стиль Стиль указывается непосредственно в теле тега. Например:

контент
В веб-разработке CSS-стили позволяют уменьшить количество кода. Для email-писем этот приём не работает, так как большинство почтовых программ игнорирует атрибуты, заданные в , а также внешние css-файлы. Именно поэтому для вёрстки email следует использовать inline-стили. В разных сервисах есть разные ограничения на поддержку CSS-атрибутов. Подробная таблица поддержки стилей для наиболее популярных почтовых сервисов была создана специалистами campaignmonitor. Здесь ее можно посмотреть онлайн: … для 10 основных сервисов или скачать таблицу для 18 сервисов. Многие сервисы для email-маркетинга имеют свои инлайнеры, которые конвертируют код в инлайн-вёрстку автоматически.

Использование табличной вёрстки

Блочная вёрстка, которая используется для создания современных веб-сайтов, не подходит для email. Для вёрстки email лучше использовать таблицы. Так, скорее всего, шаблон не разъедется в устаревших почтовых клиентах. Сначала нужно создать контейнер, т.е. основную таблицу, которая обозначит границу письма. Таблицы внутри этого контейнера будут выполнять роль ячеек. И уже внутри ячеек можно будет расположить собственно контент письма. При этом следует избегать объединения ячеек (атрибуты colspan, rowspan), а для форматирования контента в ячейках использовать вложенные таблицы. Простейший код основной таблицы письма может выглядеть так :

контент письма

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

Эта часть кода будет проигнорирована другими почтовыми сервисами, но сработает в Outlook. Можно разделить фоновое изображение на части и разместить его по ячейкам таблицы письма. Однако в этом случае могут возникнуть проблемы с отступами в ячейках и не во всех почтовых сервисах картинки «сошьются» корректно. Поэтому еще на этапе разработки макета лучше отказаться от фоновых изображений вообще.

Оформление ссылок

Для оформления ссылок необходимо использовать атрибут target="_blank", чтобы почтовый сервис не пытался открыть ссылку внутри письма. Чтобы ссылка правильно отображалась в Outlook, ее необходимо обернуть в . Для кроссмейлерной вёрстки можно использовать вот такую конструкцию:

link

Телефонные номера

Некоторые почтовые сервисы, оформляют текст хоть как-то похожий на телефон в виде ссылок. Чтобы этого избежать, можно сразу оформить телефон в ссылку: (например так - href=tel:+79876543210). Или сделать так, чтобы текст не распознавался, как телефон (например, так - +79876543210

Тестирование email

Для того чтобы убедиться в правильном отображении письма, перед отправкой его стоит протестировать. Для этого можно использовать сервисы тестирования HTML-писем.

Платные сервисы для проверки отображения писем:

eDesign Optimizer Проверяет отображение писем в почтовых клиентах и на различных устройствах (как международных, так и в некоторых локальных).

Litmus Позволяет предварительно просмотреть отображение письма в 32 самых популярных почтовых сервисах и приложениях на разных устройствах

Email on Acid Просмотр писем в 48 почтовых клиентах и браузерах. Кроме того сервис позволяет автоматически сгенерировать текстовую версию вашего письма, даёт анализ поддерживаемых и неподдерживаемых файлов и советы по исправлению ошибок вёрстки.

Preview My Email Сервис отправляет письма на самые популярные почтовые сервисы, на выходе вы получаете скриншоты настоящего доставленного письма с вашей версткой. Во время тестирования и корректировки шаблона письма стоит ориентироваться на аналитику по количеству пользователей, которые используют те или иные почтовые клиенты и устройства. И больше ориентироваться на те устройства и почтовики, которые наиболее популярны у вашей ЦА. При этом самым надежным и действенным способом тестирования остаётся ручной анализ доставленных писем. Для этого стоит зарегистрировать ящики на всех почтовых сервисах, которыми пользуются ваши клиенты.

Примечания==

http://habrahabr.ru/post/252279/
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://habrahabr.ru/post/252279/

Советы основателя маркетингового агентства Criminally Prolific Дмитрий Драгилев

В закладки

Основатель маркетингового агентства Criminally Prolific Дмитрий Драгилев поделился в своем блоге несколькими способами поиска необходимого email-адреса. В рубрике Growth Hacks - перевод заметки

Name2Email выполняет эти шаги прямо в окне Gmail Compose, без всяких копипастов email-адресов и без их последовательной проверки. Name2Email сама подставит все ваши адреса в поле "To", и вы тут же увидите, активны они или нет.

Анимированное GIF, размещённая ниже, показывает, как это работает.

Ещё один способ найти нужный адрес через Gmail/Google+ заключается в том, чтобы использовать Rapportive . Эта программа работает сходным образом: введите предполагаемый адрес, и Rapportive покажет вам на боковой панели все связанные с ним профили в социальных медиа. Единственная причина, по которой я не включил сюда эту программу, - то, что она стала меньше поддерживаться с тех пор, как её приобрёл LinkedIn.

Способ 5. Получите нужный email-адрес из рассылки

1. Подпишитесь на его рассылку

Например, здесь я заполняю форму подписки на рассылку Рамита на IWillTeachYouToBeRich.com :

2. Нажмите кнопку ответа на первое же письмо, которое к вам придёт

Большинство новостных рассылок требуют от вас подтвердить подписку. Когда вы получите такое письмо, просто нажмите "Ответить" - и нужный email в ваших руках.

Вот, что я получил после того, как ответил на письмо Рамита:

Вы можете проделывать этот трюк с любыми новостными письмами.

Способ 6. Просто спросите

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

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

Вы хотите найти человека, который помог бы вам продвигать продукт? Просто напишите кому-нибудь из нужного вам департамента на LinkedIn и спросите, кого они могут вам посоветовать.

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

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

1. Контактные формы на сайтах

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

Вы, конечно, можете использовать контактную форму, чтобы поинтересоваться, с кем вам лучше связаться в данной организации (см. шаблоны для холодных писем из моего прошлого поста). Но не ждите, что вы получите 100%-ный результат.

2. Данные WHOIS

ICANN - руководящий орган для организаций, занимающихся регистрацией доменов - требует, чтобы все эти организации публиковали доменные имена и контакты их владельцев. Это называется «данными WHOIS».

Некоторые блоги рекомендуют просматривать эти записи, чтобы найти email-адрес владельца того или иного сайта. Например, набрав IWillTeachYouToBeRich.com на странице Who.is , вы получите следующее:

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

В подходе WHOIS есть два недочёта:

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

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

Верстка писем

Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами - различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.

1. Основные положения

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

Такие конструкции не будут работать в head и body:

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

2. Обязательные свойства для HTML-тегов

Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем. Их нужно использовать всегда во всех html тегах письма.

Контент блока Контент блока Некоторый текст в ячейке.

border=«0» - толщина рамки в пикселах;
cellpadding=«0» - отступ от рамки до содержимого ячейки;
cellspacing=«0» - расстояние между ячейками;
style=«margin:0; padding:0» - обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

color: #333333; font: 10px Arial, sans-serif - всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
line-height: 30px - тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
-webkit-text-size-adjust:none - обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
display: block - делает строчный элемент блочным:

alt=" " - обязательное свойство, должно всегда использоваться, можно оставлять пустым;
border=«0» - толщина рамки в пикселях (px);
width=«100 » - ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=«100» . Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=«30» и она будет пропорционально менять и высоту и ширину;
display:block; - хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

3. HTML теги которые мы можем использовать в верстке

4. Наложения фона

Свойства background="" bgcolor="" можно применять только для тега

так как gmail не воспринимает эти свойства в других тегах, если заходить на почту с помощью браузера Safari.

Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами:

Background: background-image: background-position: background-size:

5. Отступы

Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода. Отступы можно делать с помощью CSS свойства padding. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу span, то десктопный Outlook 2007/10/13 + не будет применять отступы.

Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook.com.

Советую применять padding к ячейке таблицы:

Или использовать для отступов пустые ячейки таблицы.

7. Доктайп (DOCTYPE)

Для любого HTML документа необходимо использовать DOCTYPE. Он показывает браузеру, каким образом интерпретировать HTML-разметку. Есть разные версии языка HTML и XHTML, которые имеют разный синтаксис.

Для писем наиболее подходящим доктайпом является:

8. Работа с текстом

Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: bold; font-style: italic; или теги:

Жирный текст, аналог стиля font-weight: bold;

Наклонный текст курсив, аналог font-style: italic;

Перевод строки.

9. Цвет

Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр (HEX) #dddddd . Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, #ffffff можно сократить #fff . Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи. Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, #D4D4D4 нужно записать в таком виде: #d4d4d4 .

RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb (240,248,250 ) не будет работать.

10. Картинки

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

11. Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:

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

Для телефона:

0 800 303 505
Для электронной почты:

[email protected]
2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

Не нужно задавать таблице height=«100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.

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

Display: block;" - решает проблему отображение свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

12. Шрифты

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

Font-family: Arial, Helvetica, sans-serif; font-family: "Arial Black", Gadget, sans-serif; font-family: Georgia, serif; font-family: "MS Sans Serif", Geneva, sans-serif; font-family: "MS Serif", "New York", sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif;
Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail).

13. Адаптивная верстка

На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.

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

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

контент письма

Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями:

Контент блока
Общая структура разметки будет выглядеть следующим образом:

Контент блока Контент блока

Контент блока

Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.

Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.