Услышать слова «пожалуйста, сделайте мне подпись для электронной почты» — страшный сон любого веб-дизайнера.
Почему?
HTML и CSS постепенно менялись с годами, и веб-браузеры адаптировались к этим изменениям. Но почтовые клиенты практически не изменились, и часто отображают HTML некорректно. Вот почему создание подписи для электронного письма такая сложная задача.
Но сегодня разберемся, как выполнить эту задачу с минимальными потерями нервов и времени.
Проектирование
Есть несколько вещей, которые следует учитывать при разработке подписи для электронной почты.
Используйте хороший инструмент для редактирования фотографий
Не пытайтесь делать это на лету, думая, что это сработает. Если вы хоть немного занимались веб-дизайном, вы точно поймете, что я имею в виду. Хорошим инструментом для использования является Adobe Photoshop или Sketch.
Не используйте нерелевантную информацию
Никому не интересны ваши любимые цитаты или кличка питомца.
Проверьте визуально размер подписи
Время от времени оглядывайтесь и проверяйте размер подписи. Не будет ли она выглядеть слишком большой и навязчивой в конце электронных писем? Не занимает ли она весь экран при отображении на телефоне?
Включите логотип или фото
Люди запоминают лица и логотипы лучше, чем имена. Это также добавляет письму некоторую персонализацию.
Используйте цвета
Использование цветов, которые гармонируют между собой, всегда делает подпись более красивой.
Дизайн с учетом расстояния
Клиенты электронной почты известны добавлением случайных пробелов между таблицами и другими элементами, поэтому убедитесь, что подпись все равно будет выглядеть нормально, если вдруг добавится пустое место.
Поля для использования
Поля, которые вы используете, в конечном счете зависят от вас (или вашего клиента), поэтому здесь нет четкого универсального ответа. Но наиболее распространенный тип используемых полей: имя, должность, компания, номера телефонов, логотип, профиль в соцсетях, веб-сайт, адрес, иконки соцсетей.
Кодирование подписи
Вот некоторые из самых важных вещей, которые следует учитывать при кодировании вашей подписи.
Не используйте цвета фона
Хотя фоновые цвета отлично работают в обычных приложениях для веб-дизайна, они не подходят для подписей электронной почты. В чем причина? Многие почтовые клиенты не поддерживают (или не обрабатывают) цвета фона (например, Outlook 2007-2016).
Используйте только веб-безопасные шрифты
Веб-безопасные шрифты — это шрифты, доступны по умолчанию (или предварительно установлены) в большинстве операционных систем. Веб-безопасные шрифты: Arial, Arial Black, Calibri, Comic Sans, Gadget, Helvetica, Palatino, Tahoma, Verdana, Trebuchet, Courier New, Lucida, Times New Roman и Georgia.
Если вы используете шрифт, который не является веб-безопасным, убедитесь, что вы включили резервный шрифт, на случай, если ваш основной шрифт не установлен на устройстве получателей.
Проверьте размер электронной почты (в КБ)
Изображения играют огромную роль в крупных подписях электронной почты. Поэтому перед использованием любых изображений убедитесь, что вы сжали их до нужного размера – например, через TinyPNG. Подпись электронной почты должна быть не более 30 КБ. Все, что больше, будет занимать ценное место не только на своем почтовом сервере (отправленные письма), но и на почтовом сервере получателей (в их почтовых ящиках).
Используйте только таблицы HTML для вашего макета.
Не кривитесь. Да, таблицы не предназначены для построения макета, не так ли? Ну, это совершенно верно… кроме подписей в электронной почте. Да, придется вспомнить табличную верстку столетней давности, div-ы здесь не пройдут.
Удалите метаданные изображения
Если вы оставите метаданные, такие как DPI, это может привести к их изменению в Outlook, например, когда компьютер Windows получателя настроен на рендеринг с 125-процентным увеличением.
Тестирование подписи
Помните, когда вы в последний раз создавали веб-сайт, и он отлично выглядел в Internet Explorer 8? И я нет.
К сожалению, ситуация с электронной почтой намного хуже, и нет возможности обойти ее. Вы не можете запретить людям использовать более старую версию Outlook, поэтому вам просто нужно попытаться сделать так, чтобы она выглядела как можно лучше, учитывая ситуацию. Представьте, что ваша задача — сделать сайт, который отлично работает в IE6, IE7 и в первых версиях Firefox, Opera, Chrome… Да, это кошмар!
Сначала проверьте наиболее популярные почтовые клиенты.
Наиболее популярными почтовыми клиентами по состоянию на декабрь 2017 года были: iPhone, Gmail, iPad, Apple Mail и Outlook.
Обратили внимание, что 2 из 5 лучших были мобильными? Это подводит нас к следующему пункту.
Мобильная совместимость
Мобильные экраны (обычно) небольшие, что означает, что они создают множество проблем с подписью электронной почты. Например, ваша подпись может выглядеть сжатой и нечитаемой на экране мобильного телефона, и это связано с тем, что внешняя таблица в вашем HTML более широкая, чем 300 пикселей. Таким образом, использование вертикальной подписи обычно обеспечивает гораздо более приятный мобильный опыт.
Кроме того, имейте в виду, что современные телефоны используют масштабирование, что означает, что изображения (например, логотипы и изображения профиля) могут казаться плохими и размытыми, потому что телефон будет пытаться масштабировать растровое изображение, а также все вокруг него.
HTML рендеринг-двигатели
Хотя это не обязательно знать, это определенно помогает при устранении неполадок. Вот самые популярные почтовые клиенты и используемые ими механизмы рендеринга:
Outlook 2007 — 2016 — Механизм рендеринга Microsoft Word
Apple Mail (OSX & iOS) — механизм рендеринга Webkit
Thunderbird — двигатель рендеринга Mozilla Gecko
Mailbird — Механизм рендеринга хрома
Gmail, Office 365, Yahoo Mail и все другие службы электронной почты используют механизм рендеринга вашего веб-браузера.
Надеюсь, теперь вы можете понять, почему подписи электронной почты – такая головная боль для разработки. Пятерка самых популярных почтовых клиентов в мире используют 3 разных механизма рендеринга HTML.
Известные проблемы с почтовыми клиентами
Вот некоторые из наиболее обсуждаемых проблем с совместимостью с почтовыми клиентами.
Outlook
Outlook известен тем, что меняет размер изображений в вашей электронной почте. Самый лучший и простой способ — удалить метаданные изображения, в частности атрибут DPI.
Gmail
У Gmail есть известная проблема, когда она автоматически добавляет пробел ниже изображений. Это может привести к тому, что ваша подпись будет выглядеть сломанной, если вы не учли расстояние между строк заранее. Насколько известно, нет способа исправить это.
Apple Mail
По большей части Apple Mail отлично справляется с электронной почтой. Наиболее распространенная проблема здесь: когда вы идете установить подпись электронной почты, она будет выглядеть действительно сломанной в окне предварительного просмотра подписи. Тем не менее, подпись электронной почты будет по-прежнему прекрасно выглядеть при составлении нового сообщения.
Еще два пункта ...
Когда вы создаете подпись для электронной почты и хотите ее скопировать в свой почтовый клиент, всегда копируйте ее с помощью Google Chrome или Mozilla Firefox. Другие браузеры не копируют все HTML-таблицы правильно.
Важно, чтобы вы не рассматривали дизайн электронной почты так же, как проектирование веб-сайта, потому что невозможно достичь полной согласованности. Даже если вы выполните указанные выше пункты, все равно будут различия. Поэтому предупредите вашего клиента об этом – результат может не оправдать его ожидания!
0 комментариев