20 рекомендаций по дизайну электронной почты и ресурсы для начинающих

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

Вот где пригодятся эти двадцать лучших практик.

1. Сохраняйте дизайн простым

Электронные письма не похожи на сложные дизайны сайтов; они должны быть красиво оформлены, но несколько базовыми. Попробуйте основать свои проекты на основном заголовке, а затем на основном контенте.

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

2: Используйте таблицы

Почтовые клиенты живут в прошлом, поэтому все электронные письма должны быть построены с использованием таблиц для разметки. Можно использовать некоторые стили CSS, но мы обсудим это позже.

Не принял

Принятый

3: Готовые веб-браузеры

Убедитесь, что у вас есть как можно больше веб-браузеров. Кто знает, кто будет просматривать вашу электронную почту, и что он или она будет использовать для просмотра!

По крайней мере, используйте эти:

• Internet Explorer 6
• Internet Explorer 7
• Internet Explorer 8
• Mozilla Firefox 3
• Apple Safari 3
• Гугл Хром

4: Зарегистрируйтесь для всех основных клиентов электронной почты

Зарегистрируйте столько учетных записей электронной почты, сколько сможете придумать. Ниже приведен список почтовых клиентов, с которых можно начать:

• Google Mail ( http://mail.google.com)
• Hotmail / Live Mail ( http://www.hotmail.com)
• Почта Yahoo ( http://mail.yahoo.com)
• AOL Mail ( http://webmail.aol.com)

Обратите внимание, что это другие, более удобные услуги, которые можно использовать вместо; однако многие из них взимают ежемесячную плату. Для получения дополнительной информации просмотрите Litmusapp .

5: использовать встроенные стили

Если бы это был мир веб-сайтов, каждый разработчик на планете сказал бы: «Не используйте встроенные стили, создайте для него класс». К сожалению, в электронном письме это невозможно, так как почтовые клиенты их удаляют, а мы этого не хотим. Поэтому, если что-то нужно стилизовать, используйте встроенные стили.

Такие элементы, как тип и размер шрифта, могут использоваться внутри тега <table>, но отдельные стили должны быть помещены в теги <td>.

6: дать все изображения Alt теги

Это очень важный шаг, который часто забывают многие. Стилизация <td>, для которой находятся изображения, с типами шрифтов, размером и цветом, позволит вашей электронной почте изящно ухудшаться, когда изображения по умолчанию отключены.

Нет альтернативных тегов

Alt Tags

7. Не устанавливайте ширину или высоту для изображений

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

8. Оберните письмо в таблицу шириной 100%

Почтовые клиенты принимают код только внутри тегов body, а не сами теги body. Чтобы использовать цвет фона, необходимо создать таблицу шириной 100%, чтобы «подделать» эффект фона.

9: не шире 600px

Многие люди на самом деле не открывают свою электронную почту; вместо этого они просматривают их на панели предварительного просмотра. В среднем самая маленькая панель предварительного просмотра составляет около 600 пикселей, поэтому всегда создавайте свои электронные письма соответствующим образом, если, конечно, вы не хотите, чтобы ваша полная электронная почта была доступна для просмотра на панели предварительного просмотра.

10: Стиль ссылок

Не забудьте стилизовать тег <a>. Это перезапишет стандартные теги ссылки почтового клиента.

11: Старайтесь не вкладывать таблицы

Помимо таблицы обтекания шириной 100%, вы должны стараться не вкладывать дополнительные таблицы. Этого легко избежать; вместо этого используйте систему укладки.

Это позволяет гораздо проще, управляемой электронной почты.

Избегайте

использование

12: Избегайте фоновых изображений

Придерживайтесь, чтобы заблокировать цвета, а не изображения для фона для вашего текста; Используйте только фанки градиенты, изображения и т. д., когда текст не участвует.

13: Границы не работают

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

Исправление? Перетащите два дополнительных <td> по обе стороны от основного <td> и установите цвет фона в каждом. Это снова «подделает» внешний вид границы и будет работать во всех браузерах и почтовых клиентах.

Не будет работать

Буду работать

14: исправление ошибок Hotmail

За последние пару лет Microsoft значительно улучшила службу Hotmail / Live. Но … одна огромная ошибка, с которой вы столкнетесь, это странный отступ, добавленный ко всем изображениям. Почему они это делают? Кто знает? Все, что я знаю, это чудесно легко исправить.

На каждый тег изображения просто добавьте display: block, как показано выше.

15: закодировать все символы

Хотя технически нам не нужно кодировать символы, лучше всего это делать.

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

Может работать

Определенно будет работать

16: JavaScript = нежелательная почта

К сожалению, вы не можете включить любой тип JavaScript. Так что никаких модных всплывающих окон или автоматически прокручиваемых писем, пожалуйста! Если вы все равно решите включить его, ваша электронная почта может быть отправлена ​​в папку нежелательной почты. Почтовые клиенты увидят в вас угрозу. И это явно не хорошо. Поэтому, пожалуйста, придерживайтесь простого старого HTML.

17: дать пользователю выход

При отправке общих новостных рассылок различным клиентам / заказчикам, несмотря на то, что у вас есть прекрасно спроектированная и разработанная электронная почта, этот пользователь может не захотеть получить вашу электронную почту (трудно понять, я знаю). Всегда разрешайте им выход, добавив ссылку для отказа от подписки в конец письма, например:

Если вы хотите отписаться от этой рассылки, просто нажмите здесь

18: пользователи хотят варианты

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

Не можете просмотреть это письмо? Посмотреть здесь

19: используйте spacer.gif

Некоторые браузеры (Internet Explorer) не работают с пустыми <td>. Даже если ширина <td> равна 10 пикселей. IE проигнорирует это и установит 0.

Исправление — добавить прозрачный GIF и установить его шириной 10 пикселей. Это затем дает вам что-то, что можно поместить в <td>, тем самым исправляя проблемы IE с пустыми <td>.

Не будет работать

Буду работать

20: отправить тесты

Это самый важный аспект дизайна электронной почты; отправка тестовых писем позволяет просматривать их во всех браузерах и почтовых клиентах, выискивая любые ошибки и странные варианты.

Я настроил способ, позволяющий мне отправлять тесты, во что бы то ни стало, использовать мой!

Имя пользователя: тест
Пароль: неттутс

Для более всестороннего тестирования используйте сервис как CampaignMonitor или LitmusApp .

Другие полезные ресурсы

Общая информация по электронной почте:

• http://www.shayhowe.com/resource/smart-email-marketing/
• http://www.webdesignerdepot.com/2009/11/a-guide-to-creating-email-newsletters/
• http://www.smartbiz.com/article/articleview/2073/1/53/
• http://www.smartbiz.com/article/view/2076/1/53
• http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/
• http://www.mailchimp.com/articles/email_marketing_subject_line_comparison/
• http://lyrishq.lyris.com/index.php/Email-Marketing/Email-Subject-Lines-15-Rules-to-Write-Them-Right.html
• https://net.tutsplus.com/misc/6-easy-ways-to-improve-your-html-emails/
• http://www.copyblogger.com/persuasive-writing/

Вдохновение электронной почты:

• Галерея Монитора Кампании
• Красивые почтовые рассылки
• Галерея электронной почты HTML

Сервисы

• Почта шимпанзе
• Монитор кампании
• Эмма Email маркетинг
• AWeber
• Межпространственное SendStudio
• Чувствовать ветер

Инструменты дизайна электронной почты

• LitmusApp
• Предварительный просмотр моей электронной почты

Премиум шаблоны электронной почты

• ThemeForest Шаблоны электронной почты

• Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.