Email-верстка от новичка до профи [Тариф Самостоятельно] [Евгений Шишков]

[Admin]

1 урок. Начинаем с дизайна.
1 урок | 18 минут

• Популярные графические редакторы: Figma, Adobe Photoshop и др;
• «Нарезка» и сохранение изображений;
• Доступные типы изображений;
• Возможные проблемы на этапе подготовки изображений;
• Финальная обработка изображений, которые пойдут в продакшн;
• Примеры размещения изображений в верстке

2 урок. Приступаем к верстке.
1 урок | 25 минут

• Редакторы кода: VS Code, Atom, Sublime;
• Другие полезные инструменты для верстки;
• Базовая структура письма;
• Таблицы стилей (CSS) и их подключение;
• Разбор доступных тегов: span, div, table и пр.

3 урок. Разбираемся с элементами письма.
1 урок | 30 минут

• Принцип работы атрибута STYLE;
• Текст и его оформление;
• Заголовки разного уровня;
• Гиперссылка и ее параметры;
• Изображение и его параметры;
• Кнопка и ее построение;
• Стили для работы с отступами.

4 урок. Верстка структуры письма таблицами.
1 урок | 18 минут

• Как строится структура таблицами;
• Основные таблицы в структуре письма;
• Принцип построения строк и столбцов;
• Размеры и «растягивание»;
• Пример реализации сложной таблицы;
• Фоновые изображения.

5 урок. Адаптивное построение письма.
1 урок | 20 минут

• Принцип построения адаптивного письма;
• Адаптивное расположение таблиц и объектов;
• Плавающие блоки;
• Использование медиа-запросов;
• Скрытие/добавление элементов верстки на мобильном;
• Изменение размеров в мобильной версии.

6 урок. Все о типовых решениях. Часть 1.
1 урок | 30 минут

• Меню;
• Баннер, широкие баннеры;
• Блоки во всю ширину экрана;
• Списки;
• Товарная сетка и её разновидности;
• Отключение адаптивности.

7 урок. Все о типовых решениях. Часть 2.
1 урок | 19 минут

• Блоки статей;
• Опросы;
• Блок с телефоном (МТТ);
• Социальные сети;
• Разбор мастер-шаблона.

8 урок. Добавим немного магии и лайфхаков.
1 урок | 25 минут

• Нестандартные шрифты;
• Видео и аудио в письме;
• Счетчик обратного отсчета;
• AMP-технология;
• События по ховеру;
• Темная тема.

9 урок. Разбираем баги в почтовых клиентах.
1 урок | 20 минут

• Баги популярных почтовиков: Outlook, Gmail, Яндекс.Почты;
• Фоновое изображение в Outlook;
• Вёрстка в Outlook;
• Анализ дизайна на возможность верстки;
• Перенос мастер-шаблона в блочный редактор.

10 урок. Тестируем HTML шаблон.
1 урок | 40 минут

• Мастер-класс. Верстка письма;
• Проверка результата в разных почтовых системах;
• Инструменты проверки на разных платформах.

Для просмотра скрытого содержимого необходимо Войти или Зарегистрироваться.