Гид по верстке адаптивных писем
Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.
В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.
Миша — начинающий верстальщик-фрилансер. На его счету несколько посадочных страниц и простых сайтов на WordPress. Новый клиент предлагает сверстать сайт, а вместе с ним — серию адаптивных писем. Деньги неплохие, но Миша сомневается, версткой писем он еще не занимался. Ему кажется, здесь есть свои тонкости и за пару вечеров их не освоить.
Миша прав, пары вечеров не хватит. Принципы верстки сайтов и писем различаются — мы расскажем об основных. Покажем, как сверстать простое адаптивное письмо и избежать типичных ошибок. Если вы уже опытный верстальщик, листайте в конец статьи, — там ссылки на фреймворки, инструменты и шаблоны, возможно, пригодится.
Основные принципы адаптивной верстки
Запомните главное: при разработке сайтов мы используем современную блочную верстку, в письмах — устаревшую табличную. Прописываем стили внутри тегов. И работаем с резиновой версткой и медиа-запросами, — не по отдельности, а вместе, сочетая оба подхода.
Начинающие верстальщики забывают про таблицы и используют блочную верстку, как привыкли, — из-за этого верстка «слетает», письмо отображается некорректно. Это происходит потому, что большинство почтовых клиентов не видят внешние стили. Поэтому принцип, когда вы прописали стили отдельно и подключили их в блоках, в половине случаев не сработает. Письма, сверстанные по этому принципу, смотрятся плохо, — особенно если открывать их в Outlook и в мобильном приложении от Gmail.
За адаптивность сайтов отвечают медиа-запросы, их прописывают в таблице стилей. При верстке писем рассчитывать на медиа-запросы не стоит — половина почтовых клиентов их все равно не увидит. Эти почтовые клиенты не работают с таблицами стилей и «вырезают» медиа-запросы из . При этом, в отличие от обычных стилей, прописать медиа-запросы в инлайне нельзя.
Представьте, что вы сверстали письмо, используя медиа-запросы. Показываете заказчику на Айфоне, открываете через iOS Mail — все работает. Заказчик открывает то же письмо на том же Айфоне, но смотрит его через Gmail app. Будьте уверены, верстка «слетит», работу не примут. Что делать? Можно отказаться от медиа-запросов и использовать резиновую верстку. Но и это не даст 100% гарантии.
Наш совет: сочетайте резиновую верстку и медиа-запросы. Письмо, сверстанное по этому принципу, не сжимается до нечитаемого состояния и не выходит за рамки окна просмотра — даже в почтовых клиентах, не поддерживающих медиа-запросы.
Сочетайте резиновую верстку и медиа-запросы, принципиально прописывая стили внутри тегов.
Адаптивная верстка на примере конкретного письма
Мы будем использовать резиновые таблицы с заданной максимальной шириной в пикселях и специальные комментарии (conditional comments) для Outlook, так как свойство (max-width) этот почтовый клиент «не понимает».
Этап 1. Готовим основу
В качестве контейнера для письма используем таблицу шириной 100%. В ней, при необходимости, можно задать фон письма и указать положение основной таблицы:
Основная таблица с ограничением максимальной ширины:
Товары по акции
Затем добавляем стили в инлайн. Стили для текста помещаем внутри тега td или любых блочных элементов, типа h1–h6, p, div. На примере выглядит так:
Добавляем специальные комментарии для Outlook:
Товар 1
Item1 END -->
Товар 2
Item2 END -->
Рассмотрим каждый фрагмент кода подробнее.
Сначала мы создаем таблицу шириной 100%, в которой и размещаем блоки. Это сделано для того, чтобы все прочие объекты не пытались обтекать наши блоки с товарами.
Следует обратить внимание еще на пару моментов: параметр display у нашего блока следует указывать как inline-block, также следует указывать параметр float. Сами блоки следует писать без пробелов и переносов строк (они могут быть внутри комментариев, для бОльшего удобства восприятия). Это решит проблему в веб интерфейсе Outlook.com (hotmail.com), где блоки отображаются как «инлайновые».
Если в outlook 2010/2013 возникает проблема с лишними отступами, ее можно решить, заключив контент блока в
Но это может вызвать проблемы в outlook 2007.
Между блоков следует код в — этот код предназначен исключительно для Outlook 2007/2010/2013. Он не поддерживает блочные теги, поэтому специально для него мы формируем вспомогательные ячейки таблицы.
При объявлении блоков можно комбинировать значения ширины указанной в процентах и ограничением минимальной ширины (чтобы блоки перескакивали, достигнув какой-то минимальной ширины)
Родительская таблица
В любом случае, максимальную ширину письма следует ограничивать.
Для большинства веб интерфейсов достаточно указать параметр max-width, который и решит данную задачу. Но Outlook данный параметр игнорирует. Поэтому для версий Outlook 2003-2013, а также Lotus следует все обернуть в таблицу созданную специально для него, а также чтобы исключить проблем в устаревшей версии Safari, необходимо добавить div с ограничением максимальной ширины:
А также следует у родительской таблицы задать класс, ширину которого описать в области head. При этом следует прописать параметр для мобильных устройств:
@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) < table[class="table600"]< width:100% !important; max-width:700px; >> .table600
Как вы видите, это несколько противоречит тому, что было написано в предыдущей статье об использовании style. Дело в том, что почти все веб-интерфейсы игнорируют данный параметр (вернее — вырезают), а вот мобильные почтовые клиенты по-умолчанию интерпретируют корректно (приложение Почта на Android до версии 5.0 и приложение Mail на iOS).
Это нам дает некоторую свободу в использовании дополнительных плюшек для мобильных устройств.
Изображения в тексте
Часто необходимо вставить изображение с обтеканием. Для корректного отображения в outlook следует использовать следующую конструкцию:
Медиа запросы(@media)
Наиболее популярные мобильные почтовые клиенты (стандартное приложение Android и iOS) поддерживают медиа-запросы, так что можно использовать стандартные приемы, применяемые при верстке адаптивных сайтов:
html < -webkit-text-size-adjust:none; -ms-text-size-adjust: none;>@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) < table[class="table600"]< width: auto !important; max-width:600px; >td[class="mob_center"] < text-align: center !important; >div[class="mob_center_bl"] < float:none !important; display: block !important; margin: 0 auto; >> .table600
Обратите внимание на первую строку — стиль -webkit-text-size-adjust:none; позволяет предотвратить увеличение шрифта на iOS-устройствах, это в значительной степени сделает отображение более аккуратным.
Также, вы, наверное, обратили внимание, что в качестве селекторов используются не классы, а атрибуты. Это критично для веб-интервейса yahoo.com
И так, подведем небольшой итог по данной статье:
Верстая адаптивное письмо следует помнить:
- параметры ширины должны быть указаны в процентах (если блок не является «плавающим»)
- максимальная ширина блока, вместе со всеми внешними рамками и отступами не должна превышать 320px
- Outlook не воспринимает блочную структуру, для него нужно прописывать спец.теги, где описывать табличную структуру.
- Outlook.com(hotmail) плавающие блоки интерпретирует как инлайновые. поэтому не следует оставлять лишние пробелы и символы переноса строки
- приложение Gmail не поддерживает медиа-запросы (также как приложение от mail.ru, yandex.ru и большинство других)
- верстка писем,
- адаптивная верстка,
- копилка идей,
Как сверстать html-письмо
При верстке писем нужно учитывать, что существует большое количество различных почтовых клиентов и у многих есть свои алгоритмы обработки писем. Главное, что большинство не поддерживают блочную верстку, поэтому для верстки писем используем резиновую табличную верстку. Все стили прописываем внутри тегов. Медиа-запросы не сработают во многих почтовых клиентах, поэтому нужно это учесть и использовать медиазапросы по минимуму.
Запомните главное: при разработке сайтов мы используем современную блочную верстку, в письмах — устаревшую табличную. Прописываем стили внутри тегов. И работаем с резиновой версткой и медиа-запросами, — не по отдельности, а вместе, сочетая оба подхода.
DOCTYPE
Viewport
Фон для письма добавляем в body и в корневую таблицу
Центрируем основное содержимое с шириной в 600px
Все таблицы в таком формате:
Добавляем картинки
Делаем две колонки, которые съедут одна под другую на мобильных устройствах:
- Как написать свой лаунчер
- Как узнать какой порт usb
- Когда выйдет linux mint 21
- Что лучше postgresql или ms sql