Разработка адаптивных e-mail рассылок
Одним из самых дешевых, но при этом очень эффективных, способов повышения посещаемости сайта и, одновременно, повышения уровня продаж, была и остается хорошо нам всем известная e-mail рассылка.
Хотя суть e-mail рассылки по прошествии многих лет остается неизменной, требования к ее оформлению сейчас совсем другие. Цепкий «продающий» текст, приятное внешнее оформление, а главное – удобный формат, одинаково хорошо просматриваемый и на лептопе, и на смартфоне. Неудивительно, что адаптивная верстка писем занимает столь важное место в современном e-mail маркетинге. Качественный визуальный продукт мотивирует покупателя более подробно ознакомиться с вашим предложением, перейти на основной ресурс, сделать покупку, порекомендовать вас друзьям. И от того, насколько серьезно вы подойдете к вопросу создания адаптивных шаблонов писем, во многом будет зависеть эффективность ваших рассылок.
Медиа запросы
Зачастую при верстке адаптивных e-mail рассылок используются так называемые «медиа запросы» (media queries), главным заданием которых является «переключение» между различными схемами форматирования, в зависимости от типа используемого устройства или браузера. Они позволяют вполне успешно адаптировать широкоформатную версию письма, созданную для десктопных устройств, под небольшие экраны смартфонов и планшетов. При этом не теряется смысловое и визуальное наполнение, а текст и изображение лучше воспринимаются пользователем.
Секреты успешной «адаптации»
Верстка адаптивного шаблона для рассылки дело непростое не только с точки зрения чисто технического подхода, но и со стороны внешнего дизайна. Существуют некие правила, которые обязательно стоит учитывать, готовя макет будущего шаблона. Они помогут сделать вашу рассылку более привлекательной, а затраченные усилия – более эффективными. Вот лишь несколько:
-
Начинать работу стоит с создания адаптивного шаблона письма, его гораздо проще будет переформатировать в полноэкранную версию. Если двигаться в противоположном направлении, от большой разверстки до маленького экрана, дополнительных трудностей вам не избежать.
-
Главное правило – максимальная оптимизация текста. Заберите все лишнее, оставьте лишь самые важные моменты. Текст для мобильной версии может быть и короче «полноэкранного», оставьте лишь самую суть. При этом помните, что наиболее важная информация должна быть расположена в верхней части экрана, а вот кнопка заказа или перехода на сайт может находиться чуть ниже. Главное – заинтересовать клиента первыми строками и заставить его проскролить письмо до конца.
-
Грамотно корректируйте изображения. Не всегда обычное масштабирование удачно смотрится на экране мобильного устройства. Иногда лучше обратиться за помощью к профессиональному веб-дизайнеру: он поможет вам качественно усовершенствовать картинку, подогнав ее под ограниченные параметры гаджета.
-
Позаботьтесь и о размере изображения: тяжеловесные картинки с трудом открываются при слабом Wi-Fi соединении. Сверхвысокое качество изображения на небольшом экране, да еще и в условиях плохого освещения или солнечных бликов, пользователь не оценит, а вот белый «экран смерти» может отбить у него желание знакомиться с вашими предложениями.
Цена вопроса: сколько стоит разработка e-mail рассылок?
Стоимость разработки адаптивного письма не так высока, как многие считают. Сэкономить конечно можно, попробовав в этом деле собственные силы, но стоит ли репутация компании подобной бережливости? В глазах потенциального покупателя некачественно сверстанная рассылка, которая будет плохо отображаться на экране мобильного устройства, может стать знаком неуважения к нему, как к клиенту. И наоборот, безупречное адаптивное письмо стократно отобьет свою стоимость повышенной лояльностью подписчиков и их кликами на кнопке «Купить».
Заказать адаптивное письмо, цена которого вполне себя оправдывает, лучше всего у профессионалов. Вряд ли вам удастся самостоятельно предусмотреть все возможные ошибки и неполадки, прописать индивидуальные коды для различных типов устройств, идеально подогнать текст и изображение под все возможные размеры экранов. А вот у команды веб-мастеров и знаний побольше, и опыта с лихвой: прежде, чем передать вам выполненный заказ, ваш адаптивный email будет качественно протестирован, вычитан и перепроверен. А окончательный результат наверняка удовлетворит и вас, и ваших клиентов.
Пример
Адаптивный дизайн в современном маркетинге - это обязательное условие успешной e-mail рассылки. Одинаково удобное «прочтение» на любом виде устройств, гибкий дизайн, который подстраивается под размер экрана, оптимальное расположение всех кнопок и ссылок. Чтобы понять, как он выглядит и работает, посмотрите пример ниже.
Часто задаваемые вопросы
Сколько стоит верстка электронного письма?
Цена на верстку электронной рассылки формируется исходя из сложности макетов, необходимых параметров и требований, сроков. Чтобы узнать цену, достаточно просто связаться с нами. После этого, менеджер задаст несколько уточняющих вопросов и сообщит цену и сроки.
Почему вы используете табличную верстку?
Табличная верстка электронной рассылки обеспечивает совместимость с наибольшим числом почтовых клиентов и сервисов. Многие клиенты и сервисы не поддерживают (или не полностью поддерживают) CSS, которые нужны для DIV-верстки. Некоторые почтовые программы не поддерживают загрузку фоновых изображений (например, MS Outlook).
Какие существуют требования к дизайну?
Дизайн электронной рассылки должен быть несложным. При разработке дизайна постарайтесь придерживаться этих правил:
- Основные шрифты должны быть из стандартного набора
- Текст, который написан на изображении, будет сделан в виде изображения. Чтобы текст можно было редактировать (то есть текст был текстом), его необходимо разместить поверх однотонного фона
Если вы находитесь в поисках дизайнера, рекомендуем вам обратить внимание на работы наших дизайнеров.
Вы занимаетесь дизайном писем?
Да. Более подробно смотрите тут.
Какая оптимальная ширина для e-mail письма?
Оптимальная ширина электронного письма составляет от 600 до 700 пикселей.
Где хранятся изображения, которые используются в письме?
В e-mail письмах все изображения должны храниться на стороннем сервере. Если у вас нет сервера, мы абсолютно бесплатно предоставим свой.
Как внедрить нестандартные шрифты в письмо?
К сожалению, нестандартные шрифты можно внедрить только картинкой.