Интернет уже несколько лет ориентирован, по большей части, на мобильные устройства. Несмотря на то, что письма по-прежнему кодируются с использованием устаревшего стандарта таблиц, можно создавать современные, удобные для мобильных устройств, адаптивные письма. Для этого используются те же принципы, которые применяются к традиционным веб-сайтам.
Однако, следует различать «адаптированное для мобильных устройств» и «адаптивное». Поскольку письмо, адаптированное для мобильных устройств, не обязательно является адаптивным, а адаптивное — всегда оптимизировано для мобильных устройств.
Атрибуты адаптированного письма для мобильных устройств
- Может быть фиксированной ширины, но все же оптимизировано для мобильных устройств. Письмо с фиксированной шириной 320 пикселей (ширина экрана телефона в портретной ориентации) является одним из примеров.
- Размер шрифта не меняется в зависимости от размера экрана, но достаточно большой, чтобы его можно было читать на маленьких экранах.
- Может сохранять макет с несколькими столбцами, позволяя читателям нажимать и увеличивать каждый отдельный блок контента для облегчения чтения.
- Используются большие кнопки с изображением “клика пальцем” для призывов к действию.
Атрибуты адаптивного письма
- Используются медиа-запросы для настройки ширины письма в зависимости от размера экрана, на котором оно просматривается. Таким образом, ширина электронного письма адаптируется к любому размеру экрана в любой ориентации.
- Размеры шрифтов меняются от настольных к мобильным дисплеям. Можно настроить таргетинг на несколько разных размеров дисплея с помощью разных медиа-запросов.
- Макет может быть изменен с нескольких столбцов на один столбец на ходу.
- Различные элементы (например, кнопки на основе изображений) могут быть скрыты и показаны в зависимости от того, на какой платформе просматривается письмо.
Лучшие методы дизайна
При разработке мобильной версии письма Mailchimp старается следовать мантре «один глаз, один большой палец и длина руки». Это означает, что на маленьком экране письмо должно быть легко читаемым одним глазом. Любыми ссылками и призывами к действию можно воспользоваться с помощью одного большого пальца. Любые текстовые или визуальные подсказки должны быть достаточно большими, чтобы все вышеперечисленное можно было удобно выполнять на расстоянии вытянутой руки.
Рекомендации:
- Минимальный размер шрифта 16 пикселей — Apple рекомендует 17–22 пикселя, Google — 18–22 пикселя. (Mailchimp пришел к выводу, что 16px Georgia вполне удобочитаем).
- Кликабельные объекты с призывом к действию, например, кнопки, должны иметь размер не менее 46 пикселей в квадрате (Apple рекомендует 44 пикселя в квадрате, Google рекомендует 48 пикселей в квадрате — Mailchimp берет среднюю величину).
- Избегайте скопления нескольких ссылок в своей копии. Это затрудняет доступ к отдельным ссылкам.
Размер устройства имеет значение
Подумайте, как люди используют свои устройства. В зависимости от того, как человек использует то или иное устройство, будет меняться дизайн письма. Начните с того, как люди держат свои гаджеты.
Телефоны обычно держат в одной руке и пользуются одним большим пальцем. Удобнее всего касаться большим пальцем с одной стороны экрана (правая рука удобно нажимает на левую сторону экрана и наоборот).
При этом, планшеты обычно держат двумя руками, орудуя большими пальцами по бокам экрана.
По возможности, ваш дизайн должен учитывать оба сценария. Например, сделайте так, чтобы кнопки охватывали всю ширину письма при просмотре на мобильном устройстве. Таким образом вы охватите читателей-правшей и левшей.
Также можно сделать дополнительный шаг, предоставив несколько «контрольных точек» для дизайна письма с помощью медиа-запросов. Такие запросы нацелены на телефоны в альбомной и портретной ориентации и работают для планшетов. Создайте письмо, которое можно масштабировать до ширины 480 пикселей — наиболее распространенной ширины телефона в альбомной ориентации.
Если у вас есть вопросы по Mailchimp, email маркетингу и написанию текстов для рассылок, запишитесь на консультацию.
