Адаптивные email-письма без боли и страданий / Онлайн школа EnglishDom corporate blog / Habr
Привет, Хабр! Все, кто хоть раз сталкивался с версткой email-писем, знают, что это нудно, утомительно и порой очень сильно раздражает. В большинстве случаев это обусловлено тем, что почтовые клиенты не умеют поддерживать очень многое из того, что мы используем при верстке самых простых веб-страниц. Поэтому дизайн письма делается простым или не делается вовсе, а львиная доля времени уходит на проверку и фиксы багов в многочисленных почтовиках.В этой статье мы хотим поделиться с вами рецептами верстки красивого, на наш взгляд, и адаптивного письма, которое будет подстраиваться под экран вашего телефона даже в Gmail. А так же рассказать про нюансы, проблемы и тонкости, с которыми мы столкнулись в процессе его создания.
Верстка адаптивных писем с Foundation for Emails
При верстке email письма обычно используется табличная верстка и весьма ограниченный набор css свойств. Табличная верстка подразумевает достаточно большую вложенность, и редактирование уже готового шаблона может стать настоящей головной болью. После принятия решения о переходе на адаптивные письма возник вопрос, как делать эти самые письма. Наш выбор пал на довольно популярный фреймворк Foundation, вернее на его недооцененного младшего брата Foundation for Emails.
Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:
- Gulp: автоматизации процесса разработки
- Inky шаблонизатор: конвертирует собственную разметку в HTML код
- Sass: CSS препроцессор
- Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
- Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
- Inliner: переводит из таблиц стилей в инлайн стили
- BrowserSync: перезагрузка страницы после изменения исходных файлов
- Image Compression: сжатие изображений в процессе компиляции
Установка достаточно проста и состоит всего из нескольких шагов:
1. Устанавливаем foundation-cli, возможно понадобится использовать sudo
npm install --global foundation-cli2. Переходим в директорию проекта и выполняем команду
foundation new --framework emailsCLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду
npm start, после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения. Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.Для корректного отображения вашего письма вам приходится использовать таблицы с довольно большой вложенностью. Использование шаблонизатора Inky упрощает разметку email писем и делает код более простым, и читаемым.
Пример кода с использованием Inky:
<container> <row> <columns>Put content in me!</columns> </row> </container>
HTML на выходе:
<table align="center">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th>
<table>
<tr>
<th>Put content in me!</th>
<th></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>Но не стоит увлекаться слишком большой вложенностью, т.к. вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)
Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».
Более подробно с документацией Foundation for Email можно ознакомиться тут.
Тонкости и трудности
Процесс верстки первых адаптивных писем у нас занял довольно продолжительное время, поэтому хотим поделиться с вами трудностями и тонкостями, с которыми нам пришлось столкнуться:
1. Реализация адаптивности в письмах — довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.
Так выглядит наше письмо в десктопном и мобильном клиенте.
Foundation for Emails в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x», но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле
@media only screen and (max-width: #{$global-breakpoint})2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials.
Ваш шаблон будет выглядеть примерно так:
<html>
<head>
<title>Definitely STILL an Email!</title>
</head>
<body>
{{> header}}
{{> body}}
{{> footer}}
</body>
</html>В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.
3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head,
дублируются, помимо этого дублировались теги head и body, как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.
4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data. Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.
---
title: Page Title
description: Lorem ipsum.
---
<h2>{{ title }}</h2>
5. Вместо вертикальных отступов используйте таблицу с ячейкой, у которой задан атрибут высоты, это гарантированно даст вам нужный отступ во всех почтовых клиентах. Тем более с Inky это делается одной строкой.
<p>Stuff on top</p> <spacer size="100"></spacer> <p>Stuff on bottom</p>
HTML на выходе:
<p>Stuff on top</p>
<table>
<tbody>
<tr>
<tdstyle="font-size:100px;line-height:100px;"> </td>
</tr>
</tbody>
</table>
<p>Stuff on bottom</p>6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс
.show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс .hide-for-large. Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.
<button href="#">Button</button>HTML на выходе:
<table>
<tr>
<td>
<table>
<tr>
<td><a href="#">Button</a></td>
</tr>
</table>
</td>
</tr>
</table>8. Не все почтовые клиенты поддерживают background-image, но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.
9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation
В нашем примере уголок сделан с помощью псевдоэлемента :before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.
Еще подобный пример10. В процессе разработки нам необходимо проверять получившийся результат нашей верстки. Мы используем Putsmail от Litmus. Достаточно удобно, когда у вас есть возможность быстро протестировать часть письма или письмо целиком, просто вставляете HTML код и указываете свои реальные почтовые ящики. Обратите внимание, что при первом использовании вам придет письмо с подтверждением на каждый ящик, и только потом само письмо. Также вы можете использовать плагин для Grunt. Он по сути делает то же самое.
Надеемся, что знакомство с Foundation for Emails окажется для вас полезным и ваши следующие письма будут сделаны в компании этого весьма удобного фреймворка.
→ Демо письма
→ Исходники письма
Бонусы для читателей
Онлайн-курсы
Мы дарим бесплатный доступ на три месяца изучения английского с помощью наших онлайн-курсов. Для этого просто перейдите по ссылке до 31 декабря 2017 года.
Индивидуально по Skype
Будем рады видеть вас на индивидуальных занятиях курса «Английский для IT-специалистов».
Пройдите, бесплатный вводный урок и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!
HTML в email. Как создать и отправить HTML письмо?
Польза HTML-писем и рассылок
Email-маркетинг — это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией.
Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.
С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.
Реализация интерактивного письма
Путём несложных вычислений, было выявлено, что такие письма реализуются, как и обычные веб-страницы, с использованием HTML и CSS. Следственно, чтобы создать такое письмо, необходимо сделать маленькую узкую страничку со всеми необходимыми ссылками. То есть, для начала, можно вообще закрыть почту и погрузиться в фотошоп и редактор кодов, а вернуться только тогда, когда во вкладке браузера будет отображаться готовый мини-сайт.
С чего начать и как создать?
В интернете существует множество шаблонов, которые позволяют создать HTML-письмо, просто изменяя их под свои нужды. Важно знать, что в письме нет места для прикрепления графических файлов, ссылки на которые будут использоваться в самой структуре. Следственно, все картинки, которые необходимо встроить в тело интерактивного письма, должны быть загружены в сторонние файловые сервисы, предоставляющие прямую ссылку на этот файл, например imgur. Прямая ссылка — та, у которой в конце указан формат файла.
Создание HTML-письма по шаблону
Давайте создадим простенькое интерактивное письмо c шапкой, заголовками и кнопкой перехода. Предлагаю Вам свой шаблон, можете скачать его по ссылке и видоизменить под вашу стилистику.
Для того, чтобы посмотреть письмо вживую, нажмите на картинку выше и оно откроется в новой вкладке.
Как отправить HTML-письмо?
Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо.
Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».
В открывшемся коде, перед нами сразу предстанет строчка body, кликнув по котрой правой клавишей, необходимо выбрать пункт «Edit As HTML».
Выбрав, мы увидим поле для ввода, из которого смело удаляем всё содержимое, и вставляем туда весь код из файла нашего шаблона письма. После этого, просто закрываем окно просмотра исходного года и любуемся результатом, готовым к отправке.
Осталось только указать адресата и нажать на «Отправить»
Хочется большего?
Очевидно, что в статье показан достаточно простой, но в то же время, при правильной подаче, эффективный шаблон письма. Особой красотой и яркостью он не отличаетя. Если Вам хочется организовать масштабную рассылку и иметь по-настоящему красивое и яркое письмо, ко мне. Я нарисую и сверстаю индивидуальный шаблон специально для Вас по низким ценам.
Также, советую почитать мою статью про актуальность SEO-оптимизации сайта при новых поисковых алгоритмах.
Написание электронных HTML писем — Блог веб-студии «Десять букв»
Документ без названияРазработка HTML письма – один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.
Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет.
Для их создания необходимы навыки в вёрстке и определенный запас терпения.
В этой статье приведены некоторые методы и приемы, благодаря которым можно добиться хороших результатов.
Почтовые клиенты
При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб-интерфейс — Yahoo!, Hotmail, Google Mail и др.
Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры.
Дизайн
Разрабатывая дизайн электронного HTML письма, не забывайте о простоте.
Не слишком фантазируйте с дизайном писем. Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него.
Старайтесь уместить HTML письмо в ширину около 500-600px, ведь окошко просмотра содержимого E-mail у почтовиков меньше ширины окна, причем иногда сильно меньше.
Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
Создавайте письма вручную. Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные редакторы полны недостатков. Практически все из них вставляют лишний html код, который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.
Таблицы
Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб-страниц, но эти принципы плохо работают в почтовых клиентах. Используйте Cellpadding, cellspacing, colspan — все эти сложные вещи, о которых вы уже, наверное, забыли.
Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.
Об изображениях
Все изображения, присутствующие в письме, следует разместить на некотором хостинге и в коде добавить на них внешние ссылки. Также неплохо бы добавить ссылку на просмотр HTML письма непосредственно на вашем сайте в виде страницы, чтобы пользователь с любым почтовым ящиком при желании смог увидеть свёрстанные вами красоты.
Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.
Оформление текста
Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа «font:»), так как результаты будут неоднозначными.
Cтили CSS
К HTML письмам не стоит прикреплять внешний CSS файл — он просто не будет прочтен. Весь CSS код должен быть включен в сам E-mail. Хотя в идеале лучше вообще обойтись без каскадных таблиц стилей, так как, опять же, разные почтовики имеют разный уровень их поддержки.
Если используете CSS: Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height. CSS-стили — базовые.
Такой же прием нужно использовать и в тегах таблиц, ячеек, параграфов, ссылок и др.
Прописывайте основную информацию о стилях шрифта в теге ячейки <td> ближе к контенту. Это может привести к повторению стилей в других тегах <td>. Прописывайте стили в тегах заголовков (h2, h3), p или a, когда это необходимо.
В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.
Еще несколько советов:
1. Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.
2. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.
3. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.
4. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.
5. Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2007 не поддерживает атрибут alt.
6. Используйте атрибут target=»_blank» для ссылок, чтобы читатели, которые используют веб-интерфейс, не загружали страницу в том же окне, в которм открыта почта.
7. Попробуйте не использовать одно-пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо — спам.
Тестирование
Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:
Outlook 2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird
Тестирование с помощью Mailchimp
Использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:
Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail.
Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol» campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.
На странице design выберите Import -> Paste in code, а затем отметьте пункт Automatic CSS Inliner.
Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.
Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.
В заключении
Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты:
1. Правильно ли отображается отправитель письма – имя или почтовый адрес?
2. Корректна ли тема письма?
3. Корректна ли контактная информация, и можно ли ее увидеть сразу?
4. Есть ли текст, вверху письма, «Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.»?
5. Есть ли у вас ссылка для добавления вашего адреса в контакты?
6. Присутствуют ли в вашем письме ссылки на веб-версию письма?
7. Добавьте возможность управления подпиской в письмо.
Очень важно знать, что может пойти не так или какие проблемы могут возникнуть при отображении, попробовать их устранить до того, как письмо будет разослано подписчикам.
Напишите свое мнение или совет
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![[ OsNova ] - Легко создаём красивый HTML шаблон для писем в электронной почте](/800/600/https/i.ytimg.com/vi/SZl0odEGeA0/hqdefault.jpg)
