Вёрстка email-рассылок [НТМL academy]

Renata · 13 Авг 2021

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

Спойлер: Программа курса
После завершения курса вы научитесь оформлять email-рассылки в соответствии с дизайном, адаптировать письма под мобильные экраны, тестировать и ускорять загрузку писем.
Курс рассчитан на тех, кто уже имеет знания и опыт вёрстки веб-страниц. Программа курса подготовит вас к задачам, с которыми часто сталкиваются верстальщики, работая в компании или на фрилансе.
Раздел 1. Особенности вёрстки email-рассылок.
В начале курса разберём, в чём заключается разница между привычной вёрсткой веб-страниц и вёрсткой писем для почтовых клиентов. Разберём важные аспекты вёрстки для почтовиков, рассмотрим особенности почтовых клиентов, а также некоторые тонкости.
- Какие возможности CSS поддерживают и не поддерживают почтовики.
- Табличная вёрстка.
- Инлайновые стили. Сервисы для сведения стилей.
- Типы почтовых клиентов и их поддержка.
- Тонкости: прехедеры и смайлы в теме.
Раздел 2. Текст и изображения.
Будем разбираться, как оформить текст, чтобы он везде отображался красиво. Какие шрифты использовать. Когда лучше сделать текст картинкой, а когда текстом. А также разберёмся, как оформлять изображения, в том числе и для ретиновых дисплеев, и почему так важно указывать alt.
- Шрифты и их поддержка почтовыми клиентами.
- Для чего и как использовать сервис «Типограф».
- Оформление изображений. Изображения для ретины.
- Фоновые изображения.
Раздел 3. Адаптивность.
Что делать, если текст письма на мобильном устройстве слишком мелкий? Или письмо выезжает за пределы экрана? Или нужно перестроить сетку товаров с двух колонок в одну?
Обо всём этом мы поговорим в этом разделе. Узнаем, как реализовать адаптивность письма, с какими проблемами можно столкнуться, и как их разрешить
- Медиа-выражения в письмах.
- Адаптивность с помощью инлайн-блоков.
- Outlook и его неподдержка адаптивности.
Раздел 4. Тестирование и оптимизация.
Важно всегда тестировать свою работу перед отправкой заказчику или выкатыванием в прод. Мы познакомимся с типовыми проблемами и багами вёрстки рассылок, чтобы отлавливать их ещё на этапе тестирования.
Письмо необходимо проверять во всех популярных почтовых клиентах, а чтобы ускорить этот процесс, мы познакомимся с сервисами тестирования рассылок. А также разберёмся, как оптимизировать письмо и ускорить его загрузку.
- Типовые проблемы вёрстки рассылок: обрезка писем почтовиком, автоподстановка ссылок в текст и другие.
- Сервисы для тестирования рассылок.
- Приёмы оптимизации рассылок: уменьшение объёма разметки с помощью фонов и другие.
Раздел 5. Фреймворки и конструкторы для вёрстки писем.
Для тех, кто хочет знать больше. Рассмотрим, какие существуют инструменты для создания рассылок. Разберём, какие фреймворки и конструкторы существуют, и когда лучше использовать их, а когда написать код с нуля.
- Сервисы рассылок и встроенные в них конструкторы писем.
- Популярные фреймворки: Zurb Foundation и MJML.

Спойлер: Содержание складчины (файлы и папки)
Список модулей.pdf [289k 875]
Материалы
FigmaSetup.exe [63m 703k 336]
HTMLPlay (emails).fig [4m 786k 763]
HTMLPlay (emails).zip [952k 485]
HTMLPlay (emails)
Invitation (mobile).png [138k 920]
Invitation.png [181k 457]
Promo (mobile).png [171k 56]
Promo.png [259k 778]
Welcome (mobile).png [159k 992]
Welcome.png [257k 361]
play-html-1-master
.editorconfig [783]
.gitattributes [98]
.gitignore [94]
Contributing.md [1k 945]
index.html [649]
Readme.md [2k 595]
1-invitation
index.html [187]
img
README [46]
2-welcome
index.html [192]
img
README [46]
3-promo
index.html [161]
img
README [46]
Видеокурс по Git
1 Как установить Git и работать в консоли.mp4 [66m 663k 768]
2 Как сделать репозиторий из любого проекта.mp4 [73m 76k 155]
3 Что делать, если всё пошло не так.mp4 [109m 717k 494]
4 Зачем и как создавать ветки.mp4 [107m 253k 895]
5 Откуда берутся конфликты и что с ними делать.mp4 [63m 995k 749]
6 Как выложить код в Гитхаб и настроить SSH-ключи.mp4 [75m 72k 199]
7 Как синхронизировать работу на двух компьютерах.mp4 [146m 166k 957]
8 Как предложить свой код в любой проект.mp4 [119m 781k 909]
Список уроков по Git.pdf [121k 200]
Список уроков по Git.png [34k 931]
Модуль 1
Ссылки на GitHub учеников группы.txt [720]
Шаблон стартовый.html [1k 990]
Практика на тестовых макетах
Часть 2. Особенности вёрстки email-рассылок
Базовый шаблон письма.html [521]
Демонстрация - Базовые теги письма.wmv [2m 101k 287]
Часть 3. Разметка email-рассылок
1 Демонстрация - Разметка шаблона письма путешествий.wmv [13m 253k 743]
2 Демонстрация - Разметка шаблона письма текстиля.wmv [5m 581k 335]
3 Демонстрация - Разметка шаблона письма интернет-магазина электроники.wmv [11m 349k 647]
Разметка шаблона письма интернет-магазина электроники.html [25k 967]
Разметка шаблона письма путешествий.html [8k 424]
Разметка шаблона письма текстиля.html [15k 160]
Часть 4. Стилизация email-рассылок
1 Демонстрация - Стилизация сеток письма путешествий.wmv [14m 853k 629]
2 Демонстрация - Стилизация письма о текстиле.wmv [12m 69k 485]
3 Демонстрация - Стилизация письма интернет-магазина электроники.wmv [9m 877k 443]
Стилизация письма интернет-магазина электроники.html [61k 256]
Стилизация письма о текстиле.html [37k 78]
Стилизация сеток письма путешествий.html [19k 816]
Часть 5. Оформление текста
1 Демонстрация - Оформление текстов в письме о путешествиях.wmv [12m 941k 467]
2 Демонстрация - Оформление текстов в письме о текстиле.wmv [8m 589k 317]
3 Демонстрация - Оформление текстов в письме интернет-магазина.wmv [12m 765k 515]
Оформление текстов в письме интернет-магазина.html [79k 26]
Оформление текстов в письме о путешествиях.html [19k 920]
Оформление текстов в письме о текстиле.html [44k 571]
Часть 6. Оформление изображений
1 Демонстрация - Оформление изображений в письме о путешествиях.wmv [6m 21k 275]
2 Демонстрация - Оформление изображений в письме о текстиле.wmv [2m 301k 131]
3 Демонстрация - Оформление изображений в письме интернет-магазина.wmv [5m 437k 227]
Оформление изображений в письме интернет-магазина.html [80k 964]
Оформление изображений в письме о путешествиях.html [34k 278]
Оформление изображений в письме о текстиле.html [45k 597]
Часть 7. Адаптивность писем
Адаптация письма интернет-магазина.html [91k 733]
Адаптация письма о путешествиях.html [40k 62]
Адаптация письма о текстиле.html [52k 561]
Демонстрация - Адаптация письма интернет-магазина.wmv [3m 813k 179]
Демонстрация - Адаптация письма о путешествиях.wmv [12m 301k 485]
Демонстрация - Адаптация письма о текстиле.wmv [3m 589k 155]
Шаблоны из модуля
1_d.png [451k 890]
1_d---.png [507k 254]
1_m.png [451k 890]
2_d.png [318k 49]
2_d-----.png [288k 900]
2_m.png [250k 743]
3_d.png [762k 966]
3_d---.png [637k 839]
3_m.png [590k 910]
Полезные статьи
8 шагов, чтобы получать 100 тысяч за код — Блог HTML Academy.pdf [338k 980]
Глоссарий терминов для Git и GitHub — Блог HTML Academy.pdf [57k 825]
Как учиться продуктивно — Блог HTML Academy.pdf [303k 765]
Мне лень учиться. Что сделать, чтобы полегчало — Блог HTML Academy.pdf [175k 44]
Особенности вёрстки email-рассылок.pdf [114k 281]
Полезные команды для работы с Git — Блог HTML Academy.pdf [589k 306]
Регистрация на Гитхабе. Работа через GitHub Desktop — Блог HTML Academy.pdf [206k 873]
Стиль кода Академии HTML.pdf [120k 883]
Рабочие макеты
1-invitation
index.html [12k 230]
img
croods-proposal.png [31k 925]
croods-sitting.png [25k 843]
ellipse.png [301]
facebook.png [459]
inst.png [608]
logo.png [1k 773]
polygon.png [274]
portrait.png [11k 574]
README [46]
rectangle.png [141]
telegram.png [594]
vk.png [602]
youtube.png [492]
2-welcome
index.html [15k 771]
img
croods-keeping-in-touch.png [22k 86]
croods-standing.png [13k 965]
facebook.png [459]
inst.png [608]
logo.png [1k 773]
portrait-1.png [12k 426]
portrait-2.png [12k 905]
portrait-3.png [12k 734]
README [46]
telegram.png [594]
vk.png [602]
youtube.png [492]
3-promo
index.html [22k 416]
img
course-1.png [711]
course-2.png [847]
croods-party-time.png [36k 269]
croods-the-feedback.png [27k 418]
ellipse.png [18k 90]
facebook.png [459]
gg-digitalocean.png [564]
gg-games.png [605]
icon.png [666]
icon-1.png [1k 235]
icon-2.png [1k 184]
icon-3.png [1k 117]
image-1.png [4k 690]
image-2.png [6k 0]
image-3.png [3k 66]
image-4.png [3k 283]
inst.png [608]
logo.png [1k 773]
README [46]
telegram.png [594]
vk.png [602]
youtube.png [492]
Учебник и другой материал
Критерии (OCR) - базовые.pdf [133k 1]
Критерии (OCR) - дополнительные.pdf [89k 752]
Критерии.pdf [1m 311k 184]
Личный проект «PlayHTML».pdf [123k 17]
Модули программы обучения.pdf [296k 680]
Работа с группами в figma.mp4 [7m 672k 905]
Учебник - Оптимизация писем.mp4 [54m 128k 182]
Учебник - Тестирование писем.mp4 [14m 441k 795]
Учебник (OCR), версия 1.0.pdf [10m 56k 697]
Учебник (OCR), версия 1.1.pdf [11m 819k 875]
Учебник, версия 1.0.pdf [9m 765k 107]
png
Критерии (базовые).png [257k 570]
Критерии (дополн).png [93k 608]
Курс.png [97k 49]

Объем: 1,01Гб.