Примеры писем на HTML, которые стоят того, чтобы их открыть

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

На этот неделе я занимался дизайном e-mail, так что я в первую очередь плотно занялся их дизайном. С таким количеством вещей, из которых можно почерпнуть вдохновение, я собрал небольшую подборку с примерами писем, которые отлично справляются со своей задачей

Стиль

Мой личный вкус говорит, что дизайн с большим количеством свободного места всегда будет популярен. Вот вам Death to Stock со шрифтом Courier, спокойными цветами и большим количеством свободного места.

Вот вам еще моноширинных шрифтом, с notanotherbill.com. Они возвращают ко временам печатных машинок, пороха и маслянистых джентельменских бород:

Eventbrite знают как использовать цвета и пробелы; вот одна из версий их e-mail рассылки:

Другой пример e-mail с большим количеством свободного пространства от Wistia, обращающий внимание на один пост из блога. Этот включает в себя gif анимацию, для дополнительной концентрации внимания. Единственное, мне кажется немного неуместной линия, которая разделяет экран:

Понятные Call to Action

E-mail рассылки обычно открывают не более 20% пользователей, переходят же по ним не более 2-3%. Оттого нужно ставить фокус на call to action; упростите, переходите сразу к сути и убедитесь, что пользователи понимают, что их ждет по ту сторону клика.

Промо-письма от Typecast со всего лишь двумя-тремя кликабельными элементами направляют пользователя куда нужно максимально эффективно:

Apple не переживает об окончании подписки пользователей на свои сервисы; этот CTA требует внимания:

Digest

Заставить пользователей прочитать письмо непросто, так что убедить их прочитать его полностью действительно тяжело. Я люблю рассылки от themoderndesk.com за четкие презентации, подходящие картинки и списки содержания, которые дают мне четко понять, чего ожидать от дальнейшего чтения такого письма.

Издание The New York Times смело помещает колонку редактора в самый центр; если вы пришли не за контентом, то можете смело уходить.

Color

Надо быть заботящимся, стойким, цветным (если это нужно). Красочные превью, четкие белые контейнеры для текста, смешанные с выбивающим напрочь желтым фоном прекрасно работают для Bezar (ныне AHAlife), маркет для вдохновения творческими вещами.

MailChimp отлично справляется со своей рассылкой – вот цветное напоминание об их инструменте для A/B тестирования.

Контрастные цвета, крутые углы, конфликтующие текстуры и толстый шрифт. Этого и ожидаешь от London’s Design Museum, это отлично подхоит под эстетику их веб-сайта

Мы говорили о Spotify и их очень цветном дизайне ранее, но это также относится и к их прямому маркетингу. Вот пример месячной давности. Здесь используется текст-картинка, так что это не очень доступно (и я не представляю, где можно найти полную текстовую версию), но эстетика – это главное в этом случае.