[HTML academy] Вёрстка email-рассылок

[Moderator]

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить. Программа курса После завершения курса вы научитесь оформлять 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Гб.