Что такое адаптивный дизайн в email-писем? Адаптивный шаблон сообщений способен определять размер экрана устройства или размеры окон браузера при помощи @media query , и позволяет предоставить посетителю максимально оптимизированный вариант дизайна сайта. Самой популярной точкой преломления (или breakpoint) считается 480 пикселей (спецификация iPhone), однако технология позволяет вам выставить любые точки преломления, адаптировав ваш сайт под различные размеры экранов, включая мобильные устройства, планшеты или настольные ПК.
В отличие от масштабируемого дизайна, который растягивается на 100% ширины таблицы при любом размере экрана, адаптивный дизайн позволяет дизайну изменять саму структура шаблона, скрывать или отображать различные элементы, накладывать элементы друг на друга, и в целом оптимизировать юзабилити под небольшие экраны.
В то время как масштабируемый дизайн гораздо легче разработать, его работу на различных устройствах сложно называть «работой», так как от этого сильно страдает юзабилити, и структура дизайна может преломляться. Масштабируемые дизайны лучше подходят текстовым email’ам без использования графики (которые, кстати говоря, не очень эффективно работают в торговой индустрии). Адаптивный дизайн не требует разработки под настольные ПК, а вместо этого предлагает возможность предоставить пользователям мобильных устройств наиболее подходящий опыт взаимодействия, в то время, как и пользователи стационарных компьютеров смогут увидеть сообщение во всей красе.
К сожалению, адаптивный дизайн – не панацея от глупости . Некоторые почтовые клиенты вроде Gmail или Outlook «вырезают» все CSS-стили и не поддерживают @media query. Есть информация о том, что большинство пользователей предпочитают использовать не нативные почтовые клиенты через синхронизацию, которые поддерживают @media и позволяют правильно генерировать адаптивный дизайн.
Однако вам следует подумать о запасном варианте в форме гибкой верстки или шаблона с фиксированной шириной на HTML.
Адаптивный шаблон и верстка письма.
1. Используйте подход «в первую очередь для мобильных устройств». В целом, гораздо легче начинать разработку под мобильные устройства, а уже потом подгонять ее под настольные ПК, нежели пытаться втиснуть контент с полноценного сайта в маленький экран. Кстати говоря, контент этих двух версий не обязательно должен в точности повторяться, так что не нужно смущаться по поводу того, что по итогу дизайн и содержимое настольной версии не будет дублировать то, что видят пользователи мобильных устройств.
2. Упростите навигацию. Наберитесь смелости для того, чтобы откинуть идею использовать меню в шаблоне вашего email. Пользователи не расценивают электронную почту как сайты, они просто сканируют контент и решают, стоит ли нажимать по каким-нибудь ссылкам. Зачастую менюшки просто лишние. Проведите небольшую аналитику ваших писем. Какой процент кликов приходится на меню? Вот именно.
Также постарайтесь убрать все не очень важные ссылки вроде кнопок шэйринга в социальные сети в шапке и подвале.
3. Разберитесь с последовательность. Вместо того, чтобы уменьшить картинки, просто трансформируйте горизонтальный шаблон в вертикальный, и используйте точку преломления на 480 пикселях. В этом деле стоит поучиться у представленного выше примера Crocs. 2- и 3-колоночные дизайны также можно преобразовать в единый столбец. Несмотря на то, что это интернет-магазин так нахваливает свой адаптивный сайт, формат их email-рассылки пока что оставляет желать лучшего.
Стиль электронных рассылок
4. Используйте читабельный шрифт. Здесь имеется не просто шрифт без засечек. Размер шрифта должен составлять минимум 13 пикселей (минимальный размер шрифта в iPhone), так как меньшие по размеру шрифты автоматически увеличиваются устройствами, что может навредить общему виду шаблона.
Сторонитесь слов и предложений в верхнем регистре, так как их гораздо сложнее читать на маленьких экранах, особенно если написано белым по черному, как это реализовано в примере выше.
Нижеприведенный пример демонстрирует нам сложности, присущие рукописным и полужирным шрифтам, а также возникающие при слабом контрасте между фоном и текстом.
5. Используйте сильный контраст. Обычно это рекомендуют делать при разработке сайтов, но при адаптации под мобильные устройства, это правило становится практически ключевым, так как у них маленькие экраны и ими зачастую пользуются в условиях плохого освещения. Ниже приведен пример того, как делать не следует.
Контент
7. Скройте необязательное содержимое шапки и подвала. Если вас не обязывают какие-либо соглашения по брендированию, то постарайтесь исключить все графические элементы и текст, которые смещают важную информацию вниз. В первую очередь, избавьтесь от ссылки «Мобильная версия», так как вы уже перешли на адаптивный дизайн.
8. Хорошо продумайте мерчандайзинг. Если ваши email-сообщения укомплектованы различными предложениями товаров, то постарайтесь адаптировать ассортимент под мобильных пользователей. Всегда помните о том, что ваш ассортимент для пользователей настольных ПК не всегда должен совпадать с ассортиментом продукции для мобильных пользователей.
9. Используйте текстовый контент. Используйте текст вместо изображений, — это позволит вам «ухватить» клиентов, у которых отключено отображение картинок.
Выше приведен наглядный пример. Хорошая приманка привлечет потенциальных клиентов включить отображение картинок, или же просто кликнуть по ссылке.
10. В первую очередь разрабатывайте дизайн под клиентов с выключенными картинками. Иначе вы рискуете рассылать вашим потенциальным клиентам «белый экран смерти».
11. Подправьте все изображения. Вам не обязательно уменьшать изображения, если вы используете адаптивный подход. По сути, некоторые изображения могут потерять свою суть при уменьшении. Постарайтесь лучше сверстать изображение из нескольких картинок, или лучше вообще уберите их.
12. Оптимизируйте размер изображение. Скорость загрузки страниц сегодня имеет большое значение, а особенно если большинство ваших пользователей используют мобильные устройства и бесплатный wi-fi во всех кафешках.
13. Повысьте резкость картинок. Экраны с высоким разрешением Retina требуют от вас изображений в высоком качестве и с повышенной резкостью.
14. Замените анимированные Gif-изображения на статичные. Учитывайте, что GIF хоть и может придать вашим письмам динамики, они все равно не будут работать на мобильных устройствах, поэтому выберите лучший кадр из изображения, который вам понравится.
Призыв к действию (Call to Action)
15. Используйте крупные кнопки. Научитесь правильно разрабатывать под touch-экраны. Для начала следует запомнить, что ссылки и кнопки должны составлять минимум 44х44 пикселей в размере, — таковы правила компании Apple.
16. Подружитесь с белым пространством. Белое пространство – ваш соратник. Самая главная ошибка, которую можно встретить в мобильном дизайне, — это слишком тесное размещение ссылок.
17. Сделайте кнопки еще больше! Да-да, это правило следует повторить!
18. Используйте правильное расположение. Помните, что расположение и размер кнопки зависит от того, в какой ориентации удерживается устройство. Это не значит, что кнопки с призывом к действию следует размещать как можно выше, чтобы они были видны при использовании устройства в горизонтальном положении, но постарайтесь сделать так, чтобы контент, расположенный над кнопкой, также был интересным и привлекательным.
19. Кнопки должны быть расположены проксимально контенту. Каждая ссылка – это, по сути, призыв к действию. Ссылки на товары должны быть расположены максимально близко к изображениям, которые их представляют, — таким образом, получатели будут знать, на что они кликают. Учитывайте это правило с каждой ссылкой/кнопкой в вашем сообщении.
20. Пусть ссылки выглядят как ссылки. Звучит так, как будто мы в детском саду, не правда ли? Однако актуальные реалии заключаются в том, что современные дизайнеры предпочитают оформлять ссылки просто другим цветом, полностью забывая про подчеркивание.
21. Оптимизируйте CTA под клиентов с отключенными изображениями. Кнопки – это тоже изображения… зачастую.
22. Используйте функционал совершения звонка только там, где это уместно. Все, что меньше 480 пикселей в ширину – это мобильное устройство. Поэтому было бы уместно использовать возможность позвонить прямо по указанному в сообщении номеру.
23. Ссылайтесь на оптимизированные . Не переводите получателей напрямую на ваш сайт.
24. Копируйте промо-коды. Автоматическое принятие кода ссылки для тех, кто перешел на сайт из email’а – это очень эффективная практика.
Будет лучше, если вы также заранее оповестите посетителя об этом.
Стоит ли это ваших усилий?
Разработка адаптивного дизайна для электронных писем требует больше временных затрат, усилий и ресурсов, нежели альтернативные варианты, но так как email-рассылки по мобильным пользователям показывают статистику открытия до 40%, не стоит разочаровывать ваших подписчиков не очень удобным интерфейсом. К тому же, к отдельной email-кампании применить адаптивный дизайн гораздо проще, нежели ко всему сайту. Если вы планируете использовать адаптивный дизайн на собственном сайте, то для начала будет полезно запустить адаптивную email-кампанию.
С помощью media query, которая вместо использования фиксированной ширины применяет процентную ширину к элементам письма. Это приводит к сжатию и растягиванию контента, ориентированного на большие экраны, при отображении его на небольших дисплеях. С помощью этого метода можно добиться адекватного отображения контента даже на старых Nokia:
Описанный прием в свое время использовали дизайнеры Starbucks - попробуйте открыть это письмо в браузере и «поиграть» размерами окна.
Оптимизация изображений для отображения на мобильных устройствах
Дефицит экранного места на мобильных устройствах требует вдумчивого использования изображений в почтовых рассылках. При этом хорошая поддержка CSS в некоторых мобильных клиентах (вроде Mail для iPhone) предоставляют дизайнерам определенный простор для творчества.
Фоновые изображения и заголовки
Вообще, использование фоновых изображений - это такая вещь, которую стоит обходить за километр, но в случае «дефолтных» почтовых приложений на iPhone и Android, хорошая поддержка CSS дает некоторую гибкость. Одним из возможных плюсов является возможность замены изображений по-умолчанию на оптимизированные для «мобайла» в том случае, если письмо просматривается на мобильном устройстве.
Как правило, дизайнеры советуют оптимизировать изображения под выбранный массив размеров экрана. Но при ресайзе изображений может возникнуть проблема - иногда какой-то контент (например, текст) становится слишком мелким, и его невозможно разобрать глазом.
В таком случае лучше создавать уникальное изображение для каждого отдельного целевого устройства. Это делается с помощью расположения изображения в ячейке таблице или теге div и использовании media query, которая скрывает оригинальную картинку и выводит вместо нее в заголовок другое фоновое изображение:
@media only screen and (max-device-width: 480px) { td { background-image: url(images/header-325.png); width: 325px !important; height: 115px !important; } td img { display: none; } }
 |
Вот как выглядит письмо в мобильном клиенте до и после этой процедуры:
Плюс этой техники заключается в том, что она позволяет сократить длину письма с помощью использования более «коротких» картинок. Как известно, в «мобайле» чем короче, тем лучше .
Ресайз изображений для «жидких» шаблонов
Проблема описанного выше способа в том, что он эффективен лишь в том случае, если речь идет о шаблонах с фиксированной шириной. В наши дни существует огромное количество устройств с самыми разными параметрами экрана, так что использование «жидких» шаблонов писмем, которые адекватно отображаются на каждом из них - более логичное решение.
Очевидным решением кажется использование в нашей описанной выше media query опции background-size: 100% . Но есть и вариант получше - :
@media only screen and (max-device-width: 480px) { td { background-image: url(images/header-480.png) !important; background-size: cover; } td img { display: none; } }
Браузеры на движке Webkit полностью поддерживают background-size , так что все будет отлично работать в дефолтных почтовых клиентах iPhone и Android. В остальных случаях можно использовать традиционный подход с применение тега и дальнейшим ресайзом изображения:
@media only screen and (max-device-width: 480px) { td img { height:auto !important; width:100% !important; } }
Отображение high-res изображений для Retina-дисплеев
Здесь весь трюк заключается в создании изображений, которые в два раза больше чем те, что планируется реально использовать - это позволяет добиться кристальной четкости на дисплеях iPhone и iPad. Например, можно создать изображение размером 650px X 230px, а затем урезать его в два раза для мобильных устройств. Сделать это можно с помощью такого кода media query:
@media only screen and (max-device-width: 480px) { td { background-image: url(images/[email protected]) !important; background-size: 325px 115px; width: 325px !important; height: 115px !important; } td img { display: none; } } }
Для того, чтобы работать с дисплеями Retina с помощью конкретной таблицы стилей, можно объявить CSS таким образом:
@media all and (min-device-pixel-ratio: 1.5) { ... }
С этим методом тоже не все идеально. Все почтовые клиенты, которые поддерживают media query, будут вынуждены загружать большие hi-res картинки - а значит, в папке «Входящие» письмо тоже будет открываться дольше. Поэтому использовать описанный подход следует с осторожностью и только тогда, когда плюсы от отображения картинок высокой четкости перевешивают сопутствующие минусы.
Оптимизация форм подписки
Оптимизация почтовых рассылок для мобильных устройств не ограничивается только лишь работой по повышению читабельности сообщений на маленьких экранах. Помимо всего прочего, какой смысл в том, чтобы тратить столько усилий на эту оптимизацию, если пользователи мобильных устройств не смогут легко подписаться на рассылку?
Смартфоны на iOS и Android позволяют пользователям довольно легко взаимодействовать с формами, но есть несколько способов, которые дизайнеры и разработчики могут использовать, чтобы еще облегчить этот процесс. Оптимизация форм нужна для того, чтобы их было легче заполнять с мобильного устройства. Для бизнеса «легкое заполнение» выливается в повышение конверсии и новых подписчиков.
Приведем несколько советов по работе с формами и рассмотрим небольшой пример, который пригодится начинающим:
- Выравнивание по верхнему краю . В случае мобильных устройств часто возникает ситуация, при которой пользователь выбирает поле формы, и не видит его название. К примеру, при первоначальном уровне зума выровненная по левому краю надпись «Введите ваш email» может быть видимой, но после того как пользователь тапнет по полю ввода, произойдет «наезд» на него, в результате чего надпись исчезнет из поля зрения. Выхода из положения может быть два - использовать выравнивание по верхнему краю или добавлять описание формы в качестве ее же текстового значения. В последнем случае потребуется меньше места на экране, но может иногда раздражать пользователей - никому не нравится, когда поле, которое вы только что начали заполнять вдруг скрывается за выехавшей телефонной клавиатурой.
- Используйте input type=”email” . При использовании параметра input type=”email” в формах для ввода почтового адреса, на телефонах под iOS будет появляться специальная клавиатура, включающая символы вроде @.
- Лучше делать формы более узкими . Использование media queries и CSS может значительно улучшить юзабилити форм. Однако ничто так не раздражает пользователей, как ситуации, при которых значительная часть полей для ввода на экране загораживается другими элементами или просто в него не влезает после начала набора текста. Если делать длину поля ввода, скажем, не более 80% от ширины экрана, это может значительно улучшить юзабилити форм.
- Следует делать формы с несколькими вариантов ответа более лаконичными . Весь контент на мобильном устройстве лучше расположить в один столбец - особенно это касается чекбоксов. Часто выпадающие списки будут удобнее радиокнопок и позволят избавиться от необходимости скроллинга для работы с формой.
- Практический совет по масштабированию . Описанное выше больше относится к дизайну в целом, а не только к формам. Теперь один практический совет, относящийся исключительно к формам. Использование viewport-метатега поможет предотвратить непреднамеренный зум формы - и, как следствие, потерю из вида большей части ее содержимого. Вот как такой метатег может выглядеть в заголовке HTML-страницы: Подробная информация по этой теме представлена, к примеру, в документации Apple.
Для того, чтобы лучше разобраться с оптимизацией форм, можно воспользоваться этим примером CSS-шаблона, в котором содержится форма. Скачать пример можно по ссылке .
Как создать текстовый email для мобильной среды
Во многих случаях возможно эффективное использование текстовых, а не HTML писем. Когда дело доходит до форматирования таких сообщений, то специалисты часто делятся на два лагеря - одни включают разрыв строки после 60-65 символов, и те, кто так не делает. У обоих лагерей свои доводы за и против.
По данным CampaignMonitor лимит в 60-65 символов хорошо работает в случае десктоп- и веб-почтовых клиентов. На десктопе нет особенных границ ширины параграфов текста, поэтому ограничение их на этапе разработки шаблона письма позволяет сделать его более читабельным - прокручивать очень длинную строку не очень-то удобно.
В мобильной среде все не так просто. Иногда в том же iPhone Mail строка в 65 символов выглядит хуже, чем если бы она была гораздо длиннее.
Кейс: рассылка Twitter
Рассмотрев немало теории, настало время перейти к практике. И рассмотреть не просто какую-то там рассылку, а такую рассылку, письма которой получают миллионы людей.
Несколько лет назад email-нотификации Twitter были «не очень» при просмотре с мобильных устройств. Проблема заключалась в мелком тексте и широком шаблоне - необходимость постоянного зума и прокрутки убивала все желание читать такое сообщение на маленьком экране. Для улучшения ситуации потребовалось не так уж и много усилий.
Разбираемся с маленьким текстом
Прежде всего следовало разобраться с отображением текста. Причина его столь малого размера заключалась в использовании шаблона шириной 710px - для того, чтобы показать его во всей ширине почтовый клиент сильно «отъезжать» при просмотре. Помогло использование специальной media query:
@media only screen and (max-width: 480px) { ... }
Подобные объявления располагаются между тегов
Давайте повнимательнее разберемся с тем, как происходит объявление @media . Прежде всего, чтобы создать «мобильный» CSS нужно реализовать какой-то критерий, помощью которого почтовый клиент будет определять какие стили использовать.
Для этого используется оператор @media only screen - он показывает, что почтовый клиент должен быть отображен на экране (вместо того, чтобы, к примеру, быть напечатанным на принтере). После этого в примере кода выше мы задали максимальную ширину экрана устройства в 480 пикселей. Это важно, поскольку у многих (но не у всех) мобильных устройств область отображения данных на экране составляет 480 пикселей или меньше.
Поэтому часто используют max-device-width: 480px (это также ширина дисплея предыдущих моделей iPhone в ландшафтном режиме), но можно и расширить описание, чтобы охватить другие размеры экрана:
@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }
Вернемся к рассмотренному выше мобильному шаблону письма. Вот как он выглядит в Apple Mail:
В этом примере использован к HTML-таблицам, содержащим текст и изображения, применен класс contenttable . Вот образец кода:
Этот класс играет интересную роль - когда письмо открывают на устройстве с экраном в 480 пикселей или шире, он ни на что не влияет. Однако, когда экран 480 или меньше, то он сужает ширину таблиц до 320 пикселей. Для того, чтобы избежать необычного глюка в почте Yahoo, использованы селекторы атрибутов . В противном случае используется «обычный» CSS. Кроме того, можно включить и такие объявления:
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */
table { width: 325px !important; }
img { width: 325px !important; }
p { display: none !important; }
}
Далее мы рассмотрим более сложные техники адаптации мобильных писем для мобильных устройств.
Создание адаптивных шаблонов с колонками «от двух к одной»
Использование одноколоночных шаблонов - хороший выход при оптимизации рассылки для мобильных устройств. При этом существуют способы по созданию адаптивных двухколоночных шаблонов, без необходимости использования длинных CSS в media queries.Двухколоночный шаблон позволяет поместить больше контента в верхнюю часть сообщения, отображаемого в десктоп- или веб-почтовых клиентах, но читать и перемещаться по таким письмам на мобильных устройствах - то еще удовольствие. Исправить это можно с помощью старого доброго кода.
Золотое правило вёрстки писем гласит: «Везде, где только можно, используйте HTML вместо CSS». Степень поддержки CSS различными почтовыми клиентами может значительно различаться, но все они одинаково работают с HTML. Например, атрибуты вроде align=”left” и cellpadding=”10” - гораздо более надежный инструмент, нежели их аналоги в CSS float: left; и padding: 10px; . Именно эти атрибуты будут использоваться при создании писем в формате «от двух к одной колонке».
Вот так подобное письмо может выглядеть в Outlook 2007:
В пример выше использована таблица-контейнер шириной 640px, которая содержит две таблицы 320px, формирующие колонки. У этих столбцов cellpadding=”20“ - это сделано для того, чтобы контент не прижимался к границам.
При вёрстке для веба обычно используют float:left; , чтобы выровнять столбцы. Однако вместо этого можно использовать align=”left” . Поскольку ширина таблицы-контейнера равняется или больше совокупной ширины двух вложенных таблиц, то использование HTML хорошо сработает. Ниже представлен упрощенный код подобного двухколоночного шаблона:
|
Результат выглядит так:
Таблица-контейнер шириной 640 пикселей, так что шаблон будет двухколоночным. Но в том случае, если ширина экране меньше этого, то контент правой колонки будет «завернут» под левую. Если сделать ширину вложенных таблиц равной 320 пикселям, то при отображении на мобильном устройстве будет получаться одноколоночное письмо, которое совсем не нужно «зумить». Добиться такого эффекта можно с помощью добавления одной строки media query в HTML-код:
First headingHide Show
|
Pellentesque habitant morbi...
|
Если в этот код добавить медиа-запрос, то письмо будет отображаться как двухколоночное на экране десктопа и, как одноколоночное на экране мобилного телефона.
Медиа запрос будет выглядеть так :
@media only screen and (max-device-width: 480px) { table { width:320px !important; } }
Добиться одноколоночной вёрстки на мобильных устройствах можно и без применения медиа-запросов. Для этого нужно отдельно сверстать таблицы контентом для десктопной версии и для мобильной версии, а затем отрегулировать отображение элементов в этих двух версиях с помощью оператора display:none. При этом стоит помнить – для мобильной версии важно, чтобы призыв к действию оставался на первом экране. Количество отображаемого контента для мобильных устройств можно также сократить, используя display:none. Вы можете выбрать только самые важные позиции и смысловые элементы письма, чтобы избежать лишнего скроллинга.
Для новостных рассылок где, например, перечисляются несколько статей для мобильных устройств удобно использовать интерактивные таблицы с разворачивающимся контентом. То есть в блоке прописывается только название статьи, при нажатии кнопки разворачивается ее аннтоация и/или ссылка на полный текст.
Чтобы добиться такого эффекта, для начала следует сверстать шаблон заголовка и аннотация статьи, а также кнопку. Этот контент будет скрыт на десктопных устройствах и показан на мобильных.
Пример кода для создания шаблона заголовок+аннотация :
Заголовок статьи
Применение медиа-запросов спасает не всегда. Во-первых, многие почтовые клиенты на Android и iOS не поддерживаю медиа-запросы. Во-вторых, такие почтовые службы, как gmail и Yahoo, не поддерживают медиа-запросы в принципе.
Вот еще несколько проблем, которы могут возникнуть при использовании медиа-запросов:
- Количество возможных размеров экрана устройства практически неограниченно. Каждую неделю появляются новые устройства и предугадать, какие экраны станут популярны в ближайшее время – невозможно.
- Использование тегов
, расположенных столбцом, не всегда помогает в создании адаптивного шаблона письма, так как работает не везде. - Метод aligned table не позволяет нормально выровнять таблицы в мобильных приложениях без поддержки медиа-запросов.
Вопрос о том, стоит ли использовать media queries (медиа-запросы) стоит решать с маркетологом. Именно он может дать информацию о том, на каких устройствах чаще всего просматривают почту клиенты вашей компании. Если большая часть рассылок просматривается на устройствах и в клиентах, которые не поддерживают медиа-запросы, стоит обходиться без них (по возможности) или использовать готовые протестированные шаблоны, которые с большой вероятностью будут правильно отображаться в большинстве почтовых клиентов.
Составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.
В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.
Миша - начинающий верстальщик-фрилансер. На его счету несколько посадочных страниц и простых сайтов на WordPress. Новый клиент предлагает сверстать сайт, а вместе с ним - серию адаптивных писем. Деньги неплохие, но Миша сомневается, версткой писем он еще не занимался. Ему кажется, здесь есть свои тонкости и за пару вечеров их не освоить.
Миша прав, пары вечеров не хватит. Принципы верстки сайтов и писем различаются - мы расскажем об основных. Покажем, как сверстать простое адаптивное письмо и избежать типичных ошибок. Если вы уже опытный верстальщик, листайте в конец статьи, - там ссылки на фреймворки, инструменты и шаблоны, возможно, пригодится.
Основные принципы адаптивной верстки
Запомните главное: при разработке сайтов мы используем современную блочную верстку, в письмах - устаревшую табличную. Прописываем стили внутри тегов. И работаем с резиновой версткой и медиа-запросами, - не по отдельности, а вместе, сочетая оба подхода.
Начинающие верстальщики забывают про таблицы и используют блочную верстку, как привыкли, - из-за этого верстка «слетает», письмо отображается некорректно. Это происходит потому, что большинство почтовых клиентов не видят внешние стили. Поэтому принцип, когда вы прописали стили отдельно и подключили их в блоках, в половине случаев не сработает. Письма, сверстанные по этому принципу, смотрятся плохо, - особенно если открывать их в Outlook и в мобильном приложении от Gmail.
За адаптивность сайтов отвечают медиа-запросы, их прописывают в таблице стилей. При верстке писем рассчитывать на медиа-запросы не стоит - половина почтовых клиентов их все равно не увидит. Эти почтовые клиенты не работают с таблицами стилей и «вырезают» медиа-запросы из. При этом, в отличие от обычных стилей, прописать медиа-запросы в инлайне нельзя.
Представьте, что вы сверстали письмо, используя медиа-запросы. Показываете заказчику на Айфоне, открываете через iOS Mail - все работает. Заказчик открывает то же письмо на том же Айфоне, но смотрит его через Gmail app. Будьте уверены, верстка «слетит», работу не примут. Что делать? Можно отказаться от медиа-запросов и использовать резиновую верстку. Но и это не даст 100% гарантии.
Наш совет: сочетайте резиновую верстку и медиа-запросы. Письмо, сверстанное по этому принципу, не сжимается до нечитаемого состояния и не выходит за рамки окна просмотра - даже в почтовых клиентах, не поддерживающих медиа-запросы.
Сочетайте резиновую верстку и медиа-запросы, принципиально прописывая стили внутри тегов.
Адаптивная верстка на примере конкретного письма
Мы будем использовать резиновые таблицы с заданной максимальной шириной в пикселях и специальные комментарии (conditional comments) для Outlook, так как свойство (max-width) этот почтовый клиент «не понимает».
Этап 1. Готовим основу
В качестве контейнера для письма используем таблицу шириной 100%. В ней, при необходимости, можно задать фон письма и указать положение основной таблицы:
Основная таблица с ограничением максимальной ширины:
Товары по акции Затем добавляем стили в инлайн. Стили для текста помещаем внутри тега td или любых блочных элементов, типа h1–h6, p, div. На примере выглядит так:
Добавляем специальные комментарии для Outlook:
Товары по акции Добавляем резиновую картинку, которая растягивается на всю ширину ячейки:
Получаем:
Делаем две колонки, которые съедут одна под другую на мобильных устройствах:
Товар № 1 — 990 рублей Товар № 2 — 990 рублей В стандартном состоянии они выглядят так:
Если хотим, меняем порядок колонок в столбце. Так, чтобы сверху оказалась правая, а ниже - левая. Параметр dir:
Товар № 2 — 990 рублей Товар № 1 — 990 рублей Смотрим на примере:
Таким способом можно добавлять сколько угодно колонок. Например, пять:
Товар № 1 — 990 рублей Товар № 2 — 990 рублей Товар № 3 — 990 рублей Товар № 4 — 990 рублей Товар № 5 — 990 рублей Те самые пять колонок:
Этот способ позволяет выровнять блоки-колонки относительно друг друга как по вертикали (vertical-align:top;), так и по горизонтали (text-align:center;).
Этап 2. Работаем с текстом
Обращайте внимание на margin. Чтобы этот стиль работал в Outlook, указывайте его с заглавной M → Margin
Если кому-то проще или привычнее при верстке прописывать стили во внешние CSS - без проблем, можете добавить их в инлайн перед отправкой или тестированием письма, с помощью специальных инструментов, например, Инлайнера .
Помните о пользователях, которые отключили показ картинок в браузере. Соблюдайте баланс «текст-изображение», чтобы в любом случае донести информацию до человека. И не забывайте про атрибут «alt» для тега «img».
Придерживайтесь принципов Mobile-First
Определите, какая информация ключевая, и поместите ее на первый экран. Отключайте ненужные блоки на маленьких экранах и уберите в конец письма все, что на десктопах смотрится нормально, а на мобильных мешает увидеть основной контент. Не пытайтесь показать «все и сразу»: сверните ссылки на категории товаров, вместо десяти фотографий поставьте одну-две. Упростите навигацию, все-таки подписчик просматривает письмо сверху-вниз, а не слева-направо. И не перегружайте письмо, пусть оно будет «легким» и открывается в течение 5 секунд.
Пример неудачной верстки. Когда письмо открывают с мобильных, на первом экране - не ключевая информация, а второстепенная. Так делать не стоит.Даже если обычные картинки подгрузились, фоновые сработают не везде. Учитывайте это, особенно в случаях, когда на фоновой картинке лежит текст. Перестрахуйтесь и пропишите в ячейке с фоновой картинкой цвет фона, на котором будет четко виден текст. Даже если картинка не загрузится, пользователь увидит его на «правильном» фоне.
