Публикую перевод статьи “How to Code HTML Email Newsletters”, написанной Тимом Слэйвином (Tim Slavin) для сайта sitepoint.com.
Электронное письмо в HTML формате по-прежнему является весьма успешным видом коммуникации между издателями и читателями. Издатели могут отслеживать разные показатели по таким письмам, например, чтение письма, пересылка, переход по ссылкам в тексте письма, а также интерес читателей к тем или иным продуктам и темам. Читатели воспринимают информацию как обычную веб страницу, она визуально более привлекательна и гораздо легче читаема, чем текстовые письма.
В последнее время сверстать письмо в HTML формате стало легче – некоторые почтовые провайдеры, такие как Google Mail, улучшили поддержку CSS. Однако, в тоже время, Outlook 2007 сделал шаг назад на пути отображения HTML писем: в прошлом году Microsoft заменила движок рендеринга HTML, который использовался Outlook, на новый, уступающий предыдущему в плане поддержки CSS.
Другими достижениями в этой области за последние несколько лет стало появление сервиса Email Standards Project , который направлен на то, чтобы улучшить соответствия между почтовым программным обеспечением; появление услуг тестирования того, как письма будут отображаться в разных почтовых десктопных и веб приложениях; появление множества бесплатных шаблонов для использования в своих целях. В этой статье мы рассмотрим некоторые сервисы и шаблоны, которые помогут вам понять, как правильно сверстать письмо в HTML формате.
Не смотря на эти успехи, верстка может стать нетривиальным делом. В этой статье я попробую раскрыть все секреты правильной верстки писем и при этом добиться хорошего отображения в большинстве почтовых клиентов. Я опишу результаты моего личного опыта создания HTML писем, а также затрону некоторую техническую информацию сети Интернет.
Это, по сути, вторая версия статьи, которая была написана и опубликована на sitepoint.com в 2004 году, и включает в себя новые материалы, которые помогут вам убедиться в том, что ваши электронные письма отвечают всем требованиям сегодняшних почтовых клиентов.
Основы html для e-mail
При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб-интерфейс — Yahoo!, Hotmail, Google Mail и др. Если Вы думали, что придерживаться кросс-браузерности при верстке веб-страниц было трудным, то приготовьтесь к новой игре, так как каждый из выше упомянутых клиентов может отображать одно и то же электронное письмо совсем по-другому. И даже когда эти средства будут отображать все отлично, вы должны помнить, что читатели, могут изменять размеры окна при чтении, при этом могут возникать разного рода неприятности.
Если вы решите заниматься ручной версткой HTML писем (мое предпочтение) или использовать уже готовый шаблон, вы должны помнить о двух вещах:
- Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб-страниц, но эти принципы плохо работают в почтовых клиентах.
- Используйте вложенный в HTML-тэги CSS код, например, цвет фона или стили для текста.
Простой и быстрый способ увидеть, как взаимодействуют HTML таблицы и inline-CSS в электронном письме – скачать несколько бесплатных шаблонов с Campaign Monitor и MailChimp. Когда вы просмотрите исходный код, вы увидите несколько вещей, которые мы обсудим немного позже:
- Объявление CSS-стилей описано ниже тэга body.
- Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height.
- Таблицы исполняют всю работу по представлению письма, а с помощью тэгов span и div можно добиться специфических эффектов.
- CSS-стили — базовые.
Шаг 1: Используйте таблицы для представления
Именно таблицы! Веб-стандарты стали нормой при верстке страниц, но ни в этом случае. Почтовые клиенты немного отстают в поддержке CSS-стандартов, а это означает, что мы должны вернутся к таблицам для представления, если мы хотим, что бы наши письма корректно отображались для каждого читателя.
В этом случае вам придется отойти от ваших отличных навыков верстки веб-страниц, здесь нужно использовать немного другие подходы.
На первом шаге создания HTML письма вы должны решить, как оно будет выглядить. Если очень много информации хочется предоставить читателю, для этих целей подойдет одна или две колонки – это поможет упорядочить хаос.
Одноколоночный формат типично состоит из:
- Шапки, куда помещается логотип и некоторые (или все) навигационные ссылки из оригинального веб-сайта, для того, чтобы обеспечить схожесть с сайтом.
- Ссылки на новости, которые находятся ниже в письме.
- Подвал (футер) — внизу письма, который обычно содержит ссылки, которые идентичны ссылкам в шапке письма, а также инструкции о том, как отписаться от рассылки.
Двухколоночные электронные письма также содержат шапку и подвал, а так же как и двухколоночные веб-страницы у них есть узкая колонка (справа или слева), в которой содержатся навигация, ссылки и дополнительная информация, и колонку пошире.
В промо-письмах придерживаются аналогичных правил, но они содержат меньше текста и ссылок. Зачастую, они содержат одно или два главных сообщения, и одну большую картинку с пояснениями и ссылками под картинкой.
Все это можно с легкостью создать, используя таблицы, разбивая с их помощью документ на блоки. На самом деле, использование таблиц — единственный способ добиться правильного отображения в разных почтовых программах.
Не играет роли, какой дизайн у вашего письма, главное, что нужно помнить — помещайте важную информацию как можно выше, чтоб при открытии читатель сразу же видел самое важное. При открытии письма читатели зачастую обращают внимание на левую верхнюю часть, а уже потом на все остальное.
Вот какой подход я использую при создании писем в HTML формате:
- Для двухколоночного представления создайте три таблицы — одну для шапки, одну (двухколоночную) для контента (главной части) и одну для подвала. Поместите эти три таблицы в одну большую таблицу. Используйте такой же подход и для одноколоночного документа. Не нужно скупиться на таблицы, используйте для каждого элемента свою, так вы будете уверены, что ваше письмо будет отображаться хорошо почти во всех почтовых клиентах.
- Используйте атрибуты в тэгах таблицы (table) и ячеек (td), для контроля отображения. Например, border=»0″, valign=»top», align=»left», cellpadding=»0″ и так далее. Это поможет старым почтовым клиентам корректно отображать письмо.
- Даже если ваш дизайн не предусматривает границ вокруг таблиц, вы найдете очень полезным во время разработки установить значение border=»1″ для того, чтобы найти возможные ошибки. После того, как ошибки будут устранены, установите border=»0.»
Подход с использованием описанных выше приемов является наиболее приемлемым на сегодняшний день, хотя и может показаться оскорбительным для верстальщиков, привыкших использовать современные стандарты.
Давайте посмотрим, как можно стилизировать текст в электронном письме.
Шаг 2: Добавляем стили CSS
Говорил ли я о том, что поддержка CSS стилей была очень слабой в почтовых клиентах? Да, это именно так. Тут есть несколько вещей, за которыми нужно следить. Вот методы, которыми я пользуюсь.
Во-первых, используйте inline-стили, как показано здесь:
Такой же прием нужно использовать и в тегах таблиц, ячеек, параграфов, ссылок и др.
Не используйте объявления стилей в теге
как для веб-страниц. Вместо этого прописывайте стили ниже тега — Google Mail, в частности, сканирует документ и, если находит объявление стилей выше этого тэга, удаляет. Также не используйте элемент для подгрузки внешних стилей: Google Mail, Hotmail и другие почтовые клиенты могут игнорировать их, удалять или модифицировать.Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.
Прописывайте основную информацию о стилях шрифта в теге ячейки ближе к контенту. Это может привести к повторению стилей в других тегах . Прописывайте стили в тегах заголовков (h1, h2), p или a, когда это необходимо.
Используйте тэг div для позиционирования блоков слева или справа в ячейках таблицы. Google Mail игнорирует блоки, описанные как плавающие (float), но в Yahoo! и Hotmail не возникает проблем. В некоторых случаях лучше всего будет создать таблицу посложнее, с большим количеством ячеек, чем полагаться на плавающие блоки
В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.
Заметьте, что некоторые сервисы, которые доставляют электронные письма, могут модифицировать стили так, что, например, короткое правило style=»margin: 10px 5px 10px 0;» будет разбито на несколько меньших правил. Делается это для того, что бы письмо было понятно большинству почтовых клиентов. Тестируйте каждое письмо и смотрите, что происходит с кодом, избегайте частое использование коротких правил.
Если вы уже скачали и просмотрели некоторые шаблоны из Campaign Monitor и MailChimp, вы могли увидеть, что основная таблица описана так, как-будто это тэг body. Команда разработчиков из Campaign Monitor дает внешней таблице название “BodyImposter,” что дает представление о ней, как о главной таблице – каркасе, в середине которого размещаются все остальные элементы.
Шаг 3: Лучшие приемы e-mail верстки
Если вы создали рабочее и хорошо отображаемое HTML письмо, используя советы, описанные выше, то это только часть работы – есть еще несколько шагов, которые вы должны знать, чтобы убедится, что ваше письмо получено в наилучшем виде.
Следующий шаг – тестирование письма в разнообразных почтовых клиентах. На этой стадии чаще всего находятся некоторые ошибки, которые нужно исправить.
Первыми инструментами для тестов служат браузеры Firefox и Internet Explorer. Если все отображается прекрасно в обоих браузерах, есть все надежды, что тестирование в Outlook, Yahoo!, Google Mail и других сервисах могут показать только незначительные ошибки. Я также рекомендую тестировать все ваши шаблоны писем в браузере Internet Explorer 6 – он сразу же покажет, как ваше письмо будет отображено в Outlook 2003.
Как только ваш шаблон корректно отображается в этих двух веб-браузерах, переходите к тестам, используя сервис доставки писем, разослав их на свои тестовые почтовые адреса в различных почтовых службах. В идеальном случае это могут быть Yahoo!, Hotmail и Google Mail. Почтовые аккаунты, которые вы будете использовать для тестов должны определяться тем, какими сервисами пользуются ваши подписчики. Для примера, если среди ваших подписчиков нет пользователей с почтовыми адресами из сервиса AOL, то, возможно, тестирование и наладка шаблона под этот сервис будет пустой тратой времени и денег.
Важные приемы на этом шаге:
- Иногда смена ширины таблицы с процентов на фиксированную ширину очень важна. Пользователи могут менять размер окна при просмотре, фиксированная ширина таблицы – единственный способ добиться правильного отображения.
- Если наблюдаются проблемы с пространством в колонках, нужно в первую очередь настроить значения атрибутов cellpadding и cellspacing для таблицы. Если это не приводит к желаемому результату, примените CSS-атрибуты margin и padding.
- Неправильное перемещение картинок может возникнуть, когда тэг закрывается ниже тэга
. Это очень старая HTML проблема. Если поставить тэг сразу же после тэга
(на той же строке) это может решить проблему одно-пиксельного разрыва.
- Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.
- Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.
- Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.
- Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.
- Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2007 не поддерживает атрибут alt.
- Используйте атрибут target=»_blank» для ссылок, чтобы читатели, которые используют веб-интерфейс, не загружали страницу в том же окне, в которм открыта почта.
- Попробуйте не использовать одно-пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо — спам. Именно таким приемом пользуются спамеры для того, чтоб узнать, открыл ли читатель их письмо. В худшем случае ваше письмо попадет под фильтр и читатель может его даже не прочитать.
Очень важно, чтобы ваше письмо хорошо смотрелось и с выключенными изображениями. По умолчанию Thunderbird, Outlook и другие почтовые клиенты не показывают изображений. Например, если вы используете белый шрифт на темном фоне, проверьте, что бы с выключенными изображениями фон оставался темным.
В тест вашего электронного письма, включите тест проверки “на спам.” Для этого можно воспользоваться бесплатным сервисом SpamCheck.
Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты:
- Правильно ли отображается отправитель письма – имя или почтовый адрес?
- Корректна ли тема письма?
- Корректна ли контактная информация, и можно ли ее увидеть сразу?
- Есть ли текст, вверху письма, “Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.”?
- Есть ли у вас ссылка для добавления вашего адреса в контакты?
- Присутствуют ли в вашем письме ссылки на веб-версию письма?
Очень важно знать, что может пойти не так или какие проблемы могут возникнуть при отображении, попробовать их устранить до того, как письмо будет разослано подписчикам.
Шаг 4: Код для Google Mail, Lotus Notes и Outlook 2007
Google Mail, Lotus Notes и Outlook 2007 имеют свои определенные моменты. Хотите верьте, хотите нет, но Outlook 2007 имеет еще более слабую поддержку CSS стилей, чем предыдущие версии данного продукта.
Google Mail осуществляет поддержку получше, так как просмотр письма происходит в веб-браузере — многое зависит от браузера. Конечно, движок Google Mail имеет некоторые настройки, которые следят за тем, как должно отображаться письмо. Google Mail автоматически удаляет стили CSS, которые заключены между тэгами style.
Хорошей новостью является то, что если ваше письмо сверстано хорошо для этих трех почтовых клиентов (Google Mail, Lotus Notes и Outlook 2007), то оно будет хорошо отображаться почти во всех остальных почтовых клиентах, если не во всех.
Некоторые методы, которых необходимо придерживаться для Google Mail и старых почтовых клиентов:
- Прописывайте определение фонового цвета с помощью атрибута bgcolor тэга td, не использует для этих целей CSS-стили.
- Используйте атрибут background для тэга td, что бы применить фоновую картинку, вместо CSS-стилей.
- Используйте padding для контроля отступов в ячейках, margin в этом случае не работает.
- Если вам нужны границы вокруг ячеек, используйте дополнительный тэг div, в котором прописывайте значения границ, так как назначение границ напрямую тэгу td не будет работать в Google Mail.
- Выставляйте отступы по 10 пикселей вокруг контента, что бы текст не “заезжал” на границы.
- Тщательно проверяйте все шрифты, может случиться, что вы забудете прописать стили в нескольких местах.
А теперь перейдем к Lotus Notes. Много компаний продолжают использовать и обновлять этот почтовый клиент (в 1995 IBM объявила, что 95 миллионов людей пользуются Lotus Notes).
Главным для правильного отображения письма в этом почтовом клиенте – код должен быть как можно проще и понятней.
Если вам нужно протестировать ваше письмо в Lotus Notes, вы можете скачать бесплатную пробную версию.
Что бы Lotus Notes отображал ваше письмо в HTML формате корректно, придерживайтесь следующих рекомендаций:
- Как мы уже обсуждали выше, используйте таблицу-контейнер, которая будет включать все остальные элементы письма, а также отдельные таблицы для шапки, основной части и подвала.
- Создайте пространство вокруг главной таблицы, используйте атрибут cellpadding, установив его значение, равным как минимум 5%.
- Не используйте декларации стилей в тэге head, Lotus может просто их удалить.
- Используйте абсолютные пути для картинок, которые храните на сервере.
- Попробуйте не использовать атрибут colspan в таблицах, ранние версии Lotus Notes не понимают их.
- Прописывайте ширину ячеек в тэгах td.
- Центрирование письма обычно не работает в Lotus.
Резюме
Много пользователей отдают предпочтение получать письма в HTML формате, вместо обычного текстового формата, и это понятно. Но для программистов (верстальщиков), создающих такие письма, справится с задачей иногда не так просто, потому что нужно добиваться их отличного рендеринга во многих почтовых клиентах. В этой статье были преведены некоторые методы и приемы, благодаря которым можно добиться хороших результатов.
Это самый объемный пост, который мы когда-либо публиковали, потому что недостаточно всего двух предложений или даже двух абзацев, чтобы пролить свет на всю тему. Стандартный размер для ширины составляет 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%, включают политику конфиденциальности или любую другую дополнительную информацию сразу после нижнего колонтитула. Это не лучшая идея. Лучше добавить еще один текстовый блок, который будет расширяться или дополнять тему электронного письма, чем добавлять большую часть контента с нечитаемым шрифтом точно в том месте, где пользователь ожидает, что письмо будет завершено.
Еще одна поразительная точка дизайна нижнего колонтитула электронного письма — как разместить длинный адрес компании в такой небольшой области, как нижний колонтитул. Прежде всего, не думайте, что кто-то отправит вам настоящее письмо или посетит вашу компанию после получения электронного письма. На мой взгляд, лучший выбор — дать ссылку на страницу «О нас», где эта информация будет выделена в полном классе.
Вот необычный нижний колонтитул электронного письма с симпатичным дизайном значков социальных сетей:
Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами - различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.
1. Основные положения
Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.Такие конструкции не будут работать в head и body:
Если вы верстаете для всех устройств, включая мобильные телефоны и планшеты, то ширина письма не должна превышать 600px. Если использовать ширину больше этого значения, то письмо по ширине не поместится в почтовый клиент.
2. Обязательные свойства для HTML-тегов
Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем. Их нужно использовать всегда во всех html тегах письма.
![](/uploads/" alt=) |
4. Наложения фона
Свойства background="" bgcolor="" можно применять только для тега
|
Не нужно задавать таблице 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;
13. Адаптивная версткаНа данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.Суть данного метода заключается в следующем: при изменении ширины экрана устройства размер нашего письмо автоматически подстраивается. Внутренние блоки, которые располагаются горизонтально, при нехватки места прыгают друг под друга, таким образом все элементы письма, которым не хватает, будут уходить вниз. Система подстраивания письма под размер экрана реализована с помощью стилей и тега center , который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center :
Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями:
Контент блока
|
