Задача дизайнера — собрать макет, который реально сверстать и адаптировать под мобильные устройства. Мы подготовили список требований, который нужно учесть перед тем, как отдавать письмо верстальщику.
1. Макет должен сохранить все задумки дизайнера: слои, растровую графику, прозрачные и полупрозрачные элементы. Всё это доступно в формате PSD. Он сохранит все фишки макета и сожмет изображения без потери качества. Создать PSD файл можно в Adobe Photoshop.
2. Многие почтовые приложения ограничивают ширину письма. Если это значение превышает 600 px, то у пользователей появится горизонтальная полоса прокрутки. На фон по сторонам от письма почтовые приложения ограничений не накладывают — он может быть любого цвета и размера. Учтите, что на некоторых платформах его видно не будет (например, в Gmail для Android).
3. Нестандартные шрифты нужно присылать отдельным файлом. Чтобы они корректно отображались на всех устройствах, их лучше изначально делать в виде изображения.
4. Текстовое наполнение тоже присылают в Word или Google Doc. Это нужно, чтобы точно передать его форматирование и типографику в письме.
5. При создании макета лучше использовать модульную сетку в 2-4 столбца. Такая структура не перегружает страницу и подходит для адаптации письма под мобильные устройства.
6. Разработайте типовые шаблоны для каждого вида писем: триггерных, реактивационных, welcome. Это сэкономит время на подготовку новых макетов и позволит придерживаться одного стиля в рассылке.
7. Используйте общепринятые шрифты для текста в рассылке. Если у пользователя нет декоративного шрифта, который вы вставили в письмо, то браузер автоматически заменит его на стандартный (чаще всего это Arial). Текст отобразится неправильно, из-за чего может съехать вёрстка.
Список «безопасных» шрифтов:
8. Не делайте текст меньше 12-13 px. Для более мелкого шрифта придется напрягать зрение и использовать увеличение.
9. Если без декоративного шрифта не обойтись, то сделайте его картинкой. Этот прием подойдет для заголовков и подзаголовков, но не для целых абзацев текста: некоторые пользователи смотрят почту без картинок. Если все декоративные шрифты загнать в иллюстрации, то они откроют пустое письмо.
10. Если в качестве заголовка используете декоративный шрифт (изображение), то убедитесь, что он будет хорошо смотреться при адаптации на мобильные устройства. Наложите на него модульную сетку и посмотрите, получится ли его безболезненно разрезать:
Первый заголовок не доходит до нового блока — его не нужно переносить. У второго пересечение модульной сетки приходятся на пробел — изображение можно разрезать в этом месте. В третьем случае модульная сетка проходит через центр слова — картинку не получится разделить.
11. Для адаптации рассылки под мобильные устройства нужно сдавать два макета разной ширины: 600px и 320px.
12. Основной подход к адаптации — «резиновая» верстка. Ее суть состоит в том, что при уменьшении ширины экрана несколько горизонтальных блоков перепрыгивают друг под друга. Вот как это работает: блоки текста справа перестраиваются под изображения при уменьшении области экрана.
Также для адаптации используют масштабирование и отсечение изображений:
13. Два модуля не должны накладываться друг на друга. Если это хорошо смотрится в ПК-версии, то с адаптацией под мобильные могут возникнуть проблемы.
Лучше опустить изображение, чтобы оно не вступило в конфликт:
14. Если у блока фигурная рамка и его нужно распилить для адаптации под мобильные, проследите, чтобы шов не был заметен:
15. Изначальное разрешение изображения должно быть в два раза больше области, которое оно занимает в письме. Например, если вам нужен объект 150х150 пикселей, то в его основе должно быть изображение с разрешением 300х300 или больше.
16. Письмо не должно состоять только из картинок. Даже если их получится адаптировать под мобильные, то в дело вступят спам-фильтры почтовых служб и заблокируют рассылку.
17. Все самое важное лучше давать в виде текста, а не изображения. По данным Litmus, у 43% пользователей отображение картинок отключено. Поэтому, если хотите достучаться до всей аудитории, то главные мысли выражайте текстом.
18. Не используйте JavaScript и CSS-анимацию — почтовые приложения их не отображают. Если нужна динамика, лучше добавить GIF. Но с этим разрешением тоже есть проблема — Outlook показывает только первый кадр анимации. Убедитесь, что он отражает суть иллюстрации.
19. Используйте вертикальные или горизонтальные градиенты. Если сделать цветовой переход из угла в угол, то при адаптации на мобильные устройства его придется разрезать. Блоки перестроятся друг под друга, и эффект градиента исказится.
20. Не делайте резких градиентных переходов — от черного к белому или от красного к синему. При перестроении страницы под мобильный эта особенность может ухудшить читаемость текста.
Как зарабатывать на email. Как не спамить. Как выполнять KPI.
Как отправлять красивые и понятные письма.
*Заполняя форму вы соглашаетесь на обработку персональных данных
Подпишитесь на рассылку и получите электронную книгу
Нажимая кнопку «Получить книгу», вы даете согласие на обработку персональных данных.
">