Концепт: email-вёрстка рассылки для магазина «Глина»

Используемые навыки CSS HTML Верстка Дизайн рекламы Разработчик электронной почты

Описание

Сверстать и оформить HTML-письмо для рассылки о новой коллекции вымышленного магазина «Глина». Это концепт без реального заказчика, поэтому я сама определила структуру письма и его визуальное оформление. Требовалось учесть ограничения почтовых клиентов: вёрстка на таблицах шириной 600 px, инлайн-стили, безопасные шрифты, поддержка Outlook. Также нужно было сделать адаптив для мобильных устройств.

Решение

— Сделала концепт email-рассылки для вымышленного магазина «Глина»: разработала дизайн и сверстала письмо на таблицах шириной 600 px с инлайн-стилями под требования почтовых программ.
— Добавила скрытый прехедер, шапку со ссылкой «Открыть в браузере», большое фото, заголовок и кнопку с отдельным VML-вариантом для Outlook.
— Сверстала две карточки товаров, промокод в пунктирной рамке и блок из трёх преимуществ.
— В подвале разместила ссылки «Отписаться» и «Настроить рассылку».
— Настроила адаптив: на мобильных карточки и преимущества встают в одну колонку, картинки растягиваются на ширину экрана, крупная цифра скидки скрывается.
— Использовала безопасные для почты шрифты Georgia и Arial, для всех изображений прописала alt-тексты.

Результат

Это концепт без реального заказчика, поэтому данных по открываемости и кликам нет. Письмо свёрстано по требованиям почтовых клиентов: табличная структура, инлайн-стили, VML для кнопки в Outlook, безопасные шрифты, alt у изображений. Адаптив: на мобильных карточки и преимущества встают в одну колонку, картинки растягиваются на ширину экрана, крупная цифра скидки скрывается.