Сделайте дизайн вашего электронного письма адаптивным для мобильных устройств за 5 простых шагов
Опубликовано: 2024-01-17Хотите, чтобы ваши информационные бюллетени по электронной почте и маркетинговые кампании выглядели потрясающе на любом устройстве? Конечно, вы делаете. Никто не хочет, чтобы их тяжелая работа стала нечитаемой в чьем-то почтовом ящике. К счастью, всего за пять шагов вы можете быть уверены, что ваши электронные письма будут отзывчивыми и готовы произвести впечатление на подписчиков. Так что возьмите с собой прохладительные напитки, любимый плейлист или напиток, и давайте начнем следить за тем, чтобы они выглядели наилучшим образом на любом экране.
Установите ширину столбцов в процентах, а не в пикселях.
Чтобы сделать дизайн вашего электронного письма адаптивным, задайте ширину столбцов, используя проценты, а не фиксированные значения в пикселях. Это позволяет столбцам гибко подстраиваться под разную ширину экрана.
Используйте плавную сетку
В подходе «жидкой сетки» используются процентные значения ширины столбцов, поэтому они могут расширяться и сжиматься по мере необходимости в зависимости от размера экрана. Для простого макета с двумя столбцами сделайте левый столбец шириной 60–70 %, а правый — 30–40 %. Например:
<таблица>
<тр>
<td width="65%">Содержимое столбца 1 здесь</td>
<td width="35%">Содержимое столбца 2 здесь</td>
</tr>
</таблица>
Это позволит столбцу 1 занять 65% доступного пространства, а столбцу 2 — оставшиеся 35%. На большом экране настольного компьютера ширина столбца 1 может составлять 650 пикселей, а на маленьком экране мобильного телефона — всего 200 пикселей. Но относительные пропорции останутся прежними.
Добавьте медиа-запросы для адаптивных точек останова.
Медиа-запросы позволяют применять различные правила стиля в зависимости от ширины экрана. Вы можете использовать их для внесения дальнейших корректировок в вашу плавную сетку в различных точках останова. Например:
/* Для мобильных телефонов: */
@media только экран и (максимальная ширина: 600 пикселей) {
таблица, тд {
ширина: 100% !важно;
}
}
/* Для планшетов: */
Только экран @media и (минимальная ширина: 601 пикселей) и (максимальная ширина: 900 пикселей) {
таблица, тд {
ширина: 80% !важно;
}
}
В результате таблица и столбцы расширятся и заполнят 100 % ширины экрана на маленьких телефонах и 80 % на планшетах, что сделает дизайн полностью адаптивным.
Используйте плавные изображения и медиафайлы с возможностью изменения размера.
Чтобы дизайн вашего электронного письма был удобен для мобильных устройств, изображения и другие медиафайлы должны плавно изменяться в размерах, чтобы соответствовать любому размеру экрана. Следуйте этим советам:
Используйте адаптивные размеры изображений
Добавляя изображения в электронное письмо, используйте адаптивный размер изображений. Это означает предоставление изображений нескольких размеров, чтобы почтовый клиент мог выбрать правильный размер для экрана, на котором оно просматривается.
Например, вместо того, чтобы просто включать большое изображение шириной 1000 пикселей, добавьте также:
- Средний размер (около 600 пикселей)
- Небольшой размер для узких столбцов (около 400 пикселей).
- Маленький размер для маленьких мобильных экранов (около 200 пикселей).
Почтовый клиент автоматически выберет лучший размер для экрана и пропускной способности. Чтобы указать в электронном письме несколько размеров изображений, используйте атрибут <img srcset>.
Сделайте медиа удобными для мобильных устройств
Для других медиафайлов, таких как видео или GIF-файлы, также предусмотрены несколько вариантов размера. Видео должны иметь источники MP4 в разных разрешениях. GIF-файлы и iframe (например, вставки YouTube) должны иметь ограничения по ширине, размер которых может изменяться в соответствии с любым экраном.
Помните об этих советах, и ваши изображения, видео и другие медиафайлы в электронной почте будут прекрасно отображаться на любом устройстве. Ваши подписчики оценят электронное письмо, которое отлично выглядит и легко читается, где бы они его ни открыли.
Размер шрифта в em, а не в пикселях.
Чтобы сделать дизайн вашего электронного письма удобным для мобильных устройств, вам нужно установить размер шрифта в em, а не в пикселях. Пиксели — это фиксированные единицы измерения, поэтому, если кто-то увеличит масштаб браузера, текст может исказиться. С другой стороны, Ems — это относительные единицы, которые масштабируются в соответствии с настройками пользователя.
Используйте адаптивную структуру электронной почты
Адаптивная система электронной почты имеет предварительно созданные компоненты, размер которых автоматически изменяется под любую ширину экрана. Некоторые популярные варианты — MJML, Foundation for Emails и Ink. Эти платформы используют ems для определения размера, поэтому вам не придется беспокоиться о самостоятельном преобразовании.
Если вы не используете фреймворк, конвертируйте пиксели в ems.
Если вы хотите полностью контролировать свой CSS и предпочитаете не использовать фреймворк, вам необходимо преобразовать любые размеры пикселей в ems. Вот как:
- Определите базовый размер шрифта в пикселях. Допустим, это 16 пикселей.
- Конвертируйте это в em. 1em = 16 пикселей (ваш базовый размер), поэтому 16 пикселей = 1em.
- Любой размер, который вы хотите использовать, разделите на 16 пикселей и умножьте на 1em. Например, для заголовка размером 24 пикселя 24 пикселя/16 пикселей = 1,5em.
- Замените все размеры пикселей в CSS эквивалентами em.
Адаптируйте свой контент
Чтобы сделать дизайн вашего электронного письма адаптивным, вам необходимо выровнять контент так, чтобы он правильно отображался на экране любого размера. Следуй этим шагам:
Используйте измерения жидкости
Вместо использования фиксированной ширины в пикселях для столбцов, изображений и контейнеров используйте проценты. Это позволит вашему контенту масштабироваться пропорционально ширине экрана. Например, вместо изображения с шириной = «600 пикселей» используйте ширину = «50%».
Избегайте тяжелых укладок
Сделайте свою электронную почту простой, ограничив использование пользовательских стилей, которые не будут отображаться должным образом в некоторых почтовых клиентах. Для макетирования используйте базовые таблицы HTML, встроенные стили и атрибут align. Центрируйте элементы, когда это необходимо.
Следование этим практическим шагам обеспечит прекрасное отображение содержимого вашей электронной почты независимо от того, какое устройство используют ваши читатели для открытия своего почтового ящика. Создание отличного адаптивного дизайна электронной почты для ваших подписчиков стоит затраченных усилий.
Тестируйте, тестируйте и еще раз тестируйте
Проверьте, как он отображается на мобильных устройствах.
Мы все знаем, что большинство людей используют свои мобильные устройства для доступа к электронной почте. Поэтому, чтобы убедиться, что ваша электронная почта удобна для мобильных устройств, проверьте свою электронную почту, отправив ее на разные мобильные телефоны. Проверьте их на Android, iPhone и планшетах. Проверьте, как изображения, кнопки и текст отображаются в книжной и альбомной ориентации.
Тестируйте на основных почтовых клиентах
Не все почтовые клиенты отображают электронные письма одинаково. Проведите тестирование Gmail, Outlook, Yahoo Mail и любых других основных почтовых сервисов, которые обычно используют ваши подписчики. Обратите внимание на любые проблемы с отображением изображений, встроенных ссылок, кнопок и других интерактивных элементов. Внесите изменения в свой код, чтобы устранить любые проблемы с отображением и обеспечить согласованность между клиентами.
Проверьте, как отображается резервный контент
Для подписчиков, у которых изображения отключены в почтовом клиенте, вместо изображений будет отображаться резервный контент. Еще раз проверьте, что весь замещающий текст, подписи к изображениям и описания изображений имеют смысл сами по себе и обеспечивают контекст для содержимого вашего электронного письма. Резервный контент по-прежнему должен приносить пользу читателю, даже без изображений.
Обзор сервиса рендеринга электронной почты
Воспользуйтесь бесплатной службой тестирования рендеринга электронной почты, такой как Litmus, Email on Acid или Mosaico, чтобы увидеть, как дизайн вашей электронной почты отображается одновременно на широком спектре почтовых клиентов и устройств. Они предоставляют отчеты, в которых освещаются любые проблемы, которые необходимо решить, чтобы улучшить скорость реагирования вашей электронной почты. Вносите изменения в свой код и повторно загружайте тестовые электронные письма, пока отчеты не станут чистыми.
Перепроверьте ссылки и интерактивные элементы.
Встроенные ссылки, кнопки и любые другие интерактивные компоненты в вашем электронном письме должны корректно работать на всех платформах. Еще раз проверьте, что ссылки ведут в нужное место, а все кнопки и формы работают должным образом. Перед запуском кампании протестируйте их несколько раз, чтобы убедиться в отсутствии неработающих ссылок или неработающих элементов.
Для совершенствования адаптивного дизайна вашей электронной почты необходимо постоянное тестирование и настройку. Но приложив усилия заранее, вы получите электронное письмо с широким охватом и высокой вовлеченностью на всех устройствах и почтовых клиентах ваших подписчиков.
Устранение распространенных проблем с отзывчивой электронной почтой
Контент переполняется на мобильном телефоне
- Используйте макеты с одним столбцом. Несколько столбцов редко работают эффективно в электронной почте.
- Делайте абзацы и разделы короткими и лаконичными. Длинные блоки текста трудно читать на маленьких экранах.
- По возможности используйте маркированные списки и нумерованные списки. Они занимают меньше места, чем абзацы.
- Скрывайте второстепенный контент на маленьких экранах. Вы можете использовать медиа-запросы для отображения/скрытия контента в зависимости от ширины экрана.
Проблемы с шириной письма
Некоторые старые почтовые клиенты имеют проблемы с шириной адаптивного письма. Чтобы исправить это:
- Установите максимальную ширину для контейнера электронной почты. Мы рекомендуем 600 пикселей для большинства писем.
- Добавьте !important после объявления ширины, чтобы переопределить некоторые CSS-коды почтового клиента. Например:
- Добавьте резервный код для Outlook 2007–2013. Эти старые версии нуждаются в отдельном стиле:
Следуя этим советам по устранению неполадок, вы решите наиболее распространенные проблемы с ответами электронной почты. Дайте мне знать, если у вас есть еще вопросы!
Заключение
Вот несколько простых способов убедиться, что ваши электронные письма отвечают. Имейте в виду, что более 50% электронных писем сегодня открываются с помощью мобильных устройств, поэтому оптимизация для экранов меньшего размера имеет важное значение. Просмотрите все свои шаблоны для электронной почты и внесите необходимые изменения в размер шрифта, а также размер изображения и интервал. Ваши получатели оценят электронное письмо, которое они смогут прочитать и использовать независимо от того, какие устройства они используют.