[HTML academy] Онлайн‑курс Вёрстка email-рассылок

Топикстартер · 20 сен 2020

[HTML ACADEMY] Онлайн‑курс Вёрстка email-рассылок

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

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

Раздел 1
Особенности вёрстки email-рассылок
В начале курса разберём, в чём заключается разница между привычной вёрсткой веб-страниц и вёрсткой писем для почтовых клиентов. Разберём важные аспекты вёрстки для почтовиков, рассмотрим особенности почтовых клиентов, а также некоторые тонкости.

Какие возможности CSS поддерживают и не поддерживают почтовики.

Табличная вёрстка.

Инлайновые стили. Сервисы для сведения стилей.

Типы почтовых клиентов и их поддержка.

Тонкости: прехедеры и смайлы в теме.

Раздел 2
Текст и изображения
Будем разбираться, как оформить текст, чтобы он везде отображался красиво. Какие шрифты использовать. Когда лучше сделать текст картинкой, а когда текстом. А также разберёмся, как оформлять изображения, в том числе и для ретиновых дисплеев, и почему так важно указывать alt.

Шрифты и их поддержка почтовыми клиентами.

Для чего и как использовать сервис «Типограф».

Оформление изображений. Изображения для ретины.

Фоновые изображения.

Раздел 3
Адаптивность
Что делать, если текст письма на мобильном устройстве слишком мелкий? Или письмо выезжает за пределы экрана? Или нужно перестроить сетку товаров с двух колонок в одну?

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

Медиа-выражения в письмах.

Адаптивность с помощью инлайн-блоков.

Outlook и его неподдержка адаптивности.

Раздел 4
Тестирование и оптимизация
Важно всегда тестировать свою работу перед отправкой заказчику или выкатыванием в прод. Мы познакомимся с типовыми проблемами и багами вёрстки рассылок, чтобы отлавливать их ещё на этапе тестирования.

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

Типовые проблемы вёрстки рассылок: обрезка писем почтовиком, автоподстановка ссылок в текст и другие.

Сервисы для тестирования рассылок.

Приёмы оптимизации рассылок: уменьшение объёма разметки с помощью фонов и другие.

Раздел 5
Фреймворки и конструкторы для вёрстки писем
Для тех, кто хочет знать больше. Рассмотрим, какие существуют инструменты для создания рассылок. Разберём, какие фреймворки и конструкторы существуют, и когда лучше использовать их, а когда написать код с нуля.

Сервисы рассылок и встроенные в них конструкторы писем.

Популярные фреймворки: Zurb Foundation и MJML.

Личный проект

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

Рассылка онлайн-школы «PlayHTML»

Вам предстоит сверстать серию из трёх рассылок онлайн-школы, в каждой из которых — элементы разного уровня сложности. Каждая рассылка получится адаптивной (вы будете использовать макеты для двух разрешений экрана) и будет корректно отображаться в почтовиках Gmail, Яндекс, Mail, Рамблер и Outlook.

Продажник