Адаптивная верстка письма с нуля (email верстка)

Привет! Наверняка многие верстальщики, да и не только, задаются вопросом - как верстать html-письма? Каких правил стоит придерживаться при верстке email-рассылки, и как проверять готовое письмо? Обо всем - в этом видео!

Стартовый шаблон email-верстки:

Статьи про правила и инструменты из блога:

Ссылка на гугл-документ с правилами и инструментами:

Архив с готовым кодом, а так же макетом в блоге:

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#обучение #email #версткаписем

[maxgraph]

00:00 - 00:39 - Вступление
00:40 - 06:00 - Правила верстки писем (кратко)
06:01 - 21:53 - Верстка и проверка (первая часть)
21:54 - 43:40 - Верстка и проверка (вторая часть)
43:41 - 01:06:20 - Верстка футера, адаптив и финальные проверки
01:06:21 - 01:08:03 - Заключение

[usxyrxs]

Спасибо за видео! Последний раз с табличной версткой сталкивался 10 лет назад в институте. Уже и забыл как это стремно ))

[antonpolishko]

Все лаконично и по делу. Хорошее видео. Лучшее что я нашел на ютубе по верстке письма. Спасибо!

[Mr-inkm]

Я думал это легче будет верстаться, хорошо что отказался от заказа =) Спасибо за полезное видео!

[alexon]

Автор, спасибо тебе за хороший урок и на указание трудностей при вёрстке. Быстро и по делу

[super_snejinka]

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

[aspect_boga]

Очень грамотно и спокойно. Многое понял из структуры кода, хотя новичок в этом.

[goodhoor]

Супер, спасибо! Доступно и понятно, особенно понятен принцип.

[hxqiswq]

Лайк как минимум за ссылки на полезную информацию! А теперь смотрю дальше)

[xbkssun]

Отличное объяснение. Подписался и поставил лайк!

[technical]

Спасибо ! Лайк и подписка !
Я в разработке не со времен динозавров и для меня табличная верстка дико смотрится.

[teutevw]

здравствуйте! благодарю Вас за видео! было очень полезно и позновательно!

[pipkin]

Хотелось бы ещё увидеть несколько версток писем

[qjygrnj]

Спасибо!
Вспомнил былые табличные сайтики)))
когда появился div прямо выдохнул

[Elya]

cпасибо за полезное видео, лайк, подписка.

[ii]

"верстальщики, да и не только, задаются вопросом - как верстать html-письма?" это чуть ли не основной скил не только верстальщика но и фронта. очень часто приходиться их верстать... есть в некоторых компаниях отдельная обезьянка на это все, но чаще или фронт или верстальщик это все делает.))) так что годно! продолжай/освежай!
как минимум в резюме, это огромный плюс. еще огромный плюс про который ни кто не говорит (если компания ориентирована за пределы СНГ рынка), это сертификаты от ведущих компаний, гугла, майкрсофт и W3, ну и остальных. с юдеми какого, лучше не показывать.))) клиенты прям кипетком писают когда видят сетификат какого фронта от майкрасофт.))) продуктовым компаниям пофигу в 90% на них. а все остальные, не гласно, это очень даже учитывают! если нет, то скорее всего оправят за ним. но супер когда он есть, шансы на то что вас примут, прям взлетают.)))
спасибо!

[RuslanaRovdo]

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

[gvtzdvt]

Здравствуйте, благодарю за очень полезное видео и в то же время, можете подсказать о той части, где вы в начале куда-то на хост заливаете через WinSCP, возможно это будет очень глупый вопрос, но я абсолютно не понимаю этот момент. Может быть у вас уже есть это видео на канале и я просто не заметила?

[Sergey_Klimov]

Ждём посадку емайл письма на wordpress)))
Ну, или интеграцию с opencart)))

[nevesoff]

Я как человек, который пишет современные посадочные страницы, получил заказ от клиента добавить письма на определенные действия(обычно этим занимался другой человек, но к сожалению его уже нет с нами), могу сказать что это самое дикое что я видел. Я знал что они верстаются через таблицы, но что-то мне уже не хочется этим заниматься :D