Адаптивная верстка html-письма в 2024

Привет! В этом видео мы сверстаем письмо на html с нуля. Посмотрим, как правильно сделать разметку, куда сложить изображения, как сделать письмо адаптивным.

Содержание:
00:00 - Интро
00:21 - ВАЖНАЯ информация
02:37 - Обзор правил верстки
05:30 - Курс по верстке html-писем
07:01 - Разбираем стартовый шаблон
18:20 - Верстаем письмо
01:04:11 - Проверка письма
01:08:29 - Аутро

Доп. контент и поддержка канала:

Полезные ссылки:

👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет

#верстка #html #css

[dimaburichin]

Спасибо за видео! Особенно обновление информации! Редко можно где встретить актуальную информацию по тому или иному методу верстки.

[ЕвгенийНекрасов-чж]

Спасибо за демонстративный пример, очень поучительно. Возможно, скоро применю в настоящем проекте

[ThunDr_]

Большое спасибо за видео! Уже умею верстать на html css js wordpress tailwind, иногда видел на фрилансе заказы по верстке писем, захотел узнать что это и благодаря видео понял, что зря я сюда лезу

[whiteltd]

Очень важную тему затрагиваешь, молодец! По ютубу естественный отбор, кто умнее, тот сможет найти обход по скорости, а кто не умеет пользоваться обычными инструкциями из интернета, тот будет смотреть без скорости). К слову отлично работает ютуб, просадок по скорости нету)

[ZelenskyyUa]

Учился верстать по parcel курсам там показывают создавать таблицы через div display table, div display table cell. Скажи плиз есть ли разница в этих методах и зачем продолжать через миллион тд тр табле это делать если проще с дивами? Пс поддерживаемость у этого метода несколько я знаю хорошая почти везде

[ZelenskyyUa]

Еще момент не понял, вот ты делаешь колонки при помощи двух таблиц со стилем display inline block. Я по тому же принципу пытался сделать шапку письма, где слева текст в углу верхнем а справа прижатая к низу ссылка которая align right. То есть левый элемент или первая колонка выровнена по левой стороне а правая по правой, левая вертикал алигн топ а правая боттом. А этим методом колонки всегда зеркальные выходят, нельзя их по разному обставить. Получилось это сделать только когда каждая колонка была td -шкой внутри которой был table.

Мб я не так понял и твоим методом можно выполнить задачу о которой я выше написал?

[PirBogov]

Добрый день! Дела все как у вас и брала стартовый образец. У меня не сработала темная тема. С чем это может быть связано? Проверила письмо на реальной почте на яндексе и маил. Все хорошо. Но вот как проверять в outlook?Как настроить окружение или что надо сделать

[IgorBobyrev]

Здравствуйте, а вот эта штука - <mjml> - у вас есть на курсе?

[samarinmike]

Существует какой-то надежный способ встраивать картинки в тело письма, чтобы не загружать их из интернета.
Например, преобразовать в base64? Насколько это хорошо будет работать в Outlook?

[x-diz]

Ой. Сколько нужного. Надеюсь я и это успею увидеть ))
Делал страничку/карточку товара по твоим видео про слайдер Swiper. Хотелось бы довести до ума. Допустим у однотипного товара несколько цветов. Т.е. цвета это кнопки. Это понятно. Как фотки чтоб менялись? Был зелёный телефон, нажал на желтую кнопку - стали фотки с желтым телефоном. Может есть об этом в сериях видео про сайты с "0"?

[andreasshev]

Спасибо за видео. Подскажите где итоговый код посмотреть?

[nikita_litvinov]

Правильно ли я понял, что Gmail на IOS автоматически заменяет цвета при темной теме и ему все равно что ты указываешь в media запросе? Т.е. повлиять на это я никак не могу?

[denisbogoslovskiy]

есть неплохая либа react-email, я ее использовал

[ZelenskyyUa]

Не совсем понял почему бы просто в td контент не писать сразу, зачем нужно делать table –> tr -> td > table > tr> td > и только тут контент. Зачем нагромождать и почему бы просто в первой td не вставить контент и для аутлука так же?

[romankool]

Спасибо за урок. Вот смотрю на рассылку, а там есть например ссылка "отписаться от рассылки" или обращаются по имени в рассылке.
После верстки письма, какие дальнейшие шаги должны быть?!
Например есть рассылка с товарами. То верстальщик вручную вписывает название товара, цену и тд или такое письмо формируется автоматически для каждого клиента, а в верстке прописывается какой то код, который подставляет имя или конкретный товар ?!

[ВадимКудаяров-вл]

Максим Здравствуйте! Спасибо за видео! А вы не хотите создать курс по JS (на платной основе) ?

[mr.president]

эх жаль Ютуб и РКН не дают посмотреть данное видео! ( ... надеюсь всё наладиться!

[Andrew_Dreamer]

Ну ты и про Ютуб не забывай. Твои ролики не только в России смотрят. У нас с ютубом всё ок

[romanzinchuk]

Очень интересная тема. Спасибо. А на сколько верстка писем востребована?! Есть ли заказы?!

[dippdp]

Нету .ExternalClass в стилях, для старых Оутлуков полезно их