Адаптивный дизайн письма при email-рассылке – отвечаем на вопросы

Адаптивный дизайн письма при email-рассылкеС каждым днем все больше пользователей открывают электронную почту с мобильных устройств. Но удобно ли осуществлять просмотр большого HTML-письма на телефоне? Ведь приходится часто пользоваться масштабированием или скроллингом. Именно для того, чтобы избежать этих неприятных моментов в юзабилити и рекомендуется делать письма с адаптивным дизайном.

Что такое адаптивный дизайн

Что такое адаптивный дизайн?

Разработанный адаптивный шаблон для писем способен автоматически определять размер экрана устройства, с которого просматривается email, и в соответствии с ним изменять дизайн страницы – изменять местоположение некоторых элементов, накладывать их друг на друга или вовсе скрывать. Это и обеспечивает удобный просмотр одного и того же письма с различных устройств – начиная от десктопа и заканчивая планшетами и телефонами.

С чего начать?

Практика показывает, что удобнее всего начинать разработку адаптивного шаблона с мобильных версий устройств, и уж потом переходить к десктопам – грубо говоря, двигаться от маленького к большому.

Как обеспечить удобную навигацию?

Все гениальное – просто!

Используйте этот тезис при разработке шаблона письма для мобильных устройств. Уберите меню, кнопки социальных сетей и смиритесь с тем, что придется пожертвовать второстепенным контентом. Не засоряйте страницу лишними элементами. Также не стоит придерживаться многоколоночных вариантов дизайна для мобильных устройств.

Какой шрифт лучше использовать?

Очень важно использовать читабельный шрифт. Для этого подойдут варианты без засечек. Если ориентироваться на экран iPhone, то в этом случае, размер шрифта не должен быть менее 13 пикселей. И будьте очень аккуратны с использованием рукописных шрифтов.

Что касается цвета текста – необходимо, чтобы он сильно контрастировать с фоном. Это значительно облегчит чтение с маленького экрана.
В целом, при разработке адаптивного шаблона письма, следует ориентироваться именно на текстовую версию, даже без загрузки изображений. Именно поэтому, уделите шрифту и содержанию текста особое внимание.

Как быть с изображениями?

Используемые в шаблоне изображения, прежде всего, необходимо оптимизировать. Они не должны много весить, учитывая, что скорость интернета на мобильных устройствах пока еще значительно ниже, чем в условиях стационара. Не обязательно уменьшать размер изображений – можно просто вырезать наиболее важную часть. Также проверьте, чтобы при оптимизации не была потеряна резкость изображений. Gif-анимации замените на статичные изображения, так как они не будут работать на мобильных устройствах.

Как призвать к действию?

Обратите внимание на кнопки – они должны быть крупными, не менее 44х44 пикселя – это упростит их использование на touch-экранах. Также должно быть четко понятно, к какому именно товару они относятся – проследите за их размещением.

Ссылки не должны располагаться близко друг к другу, чтобы пользователь не нажимал их по две сразу. Также нужно, чтобы они выделялись на фоне остального текста – вспомните о старом добром подчеркивании! В идеале ссылки адаптивного письма должны вести на посадочные страницы, которые оптимизированы под мобильные устройства.

Кнопки для осуществления звонков должны использоваться только там, где их размещение полностью себя оправдывает. Помните, что идет борьба за каждый квадратный миллиметр площади экрана и каждый отдельный килобайт, а любая кнопка – это тоже изображение.

Оправдывает ли себя адаптивный дизайн при email-рассылке?

Говоря об отдельном письме с адаптивным шаблоном, стоит заметить, что его разработка все равно займет гораздо меньше сил и времени, чем использование других альтернативных способов рекламирования продукции. При этом открытие писем в email-рассылке по-прежнему держится на достаточно высоком уроне.

Обобщая вышесказанное, можно сказать, что при разработке адаптивного дизайна шаблона письма в email-рассылке, наибольшую сложность составляет, что называется, отделить «зерна от плевел» – то есть оставить только самую важную информацию на маленьком экране мобильного устройства, сохранив ее визуальную привлекательность, информативность и юзабилити.

Tweet about this on TwitterShare on FacebookShare on Google+Email this to someonePrint this page