Адаптивная верстка письма с нуля (email верстка)
HTML-код
- Опубликовано: 29 сен 2024
- Привет! Наверняка многие верстальщики, да и не только, задаются вопросом - как верстать html-письма? Каких правил стоит придерживаться при верстке email-рассылки, и как проверять готовое письмо? Обо всем - в этом видео!
Стартовый шаблон email-верстки:
gist.github.co...
Статьи про правила и инструменты из блога:
blog.maxgraph....
blog.maxgraph....
Ссылка на гугл-документ с правилами и инструментами:
docs.google.co...
Архив с готовым кодом, а так же макетом в блоге:
github.com/max...
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Моя группа по верстке сайтов: maxgraph
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#обучение #email #версткаписем
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 - Заключение
Спасибо! Когда-то я очень много верстала писем, пользовалась для удобства дримвивером макромедиа. Конечно, делала всё проще, т.к. приходилось в день делать ну очень много писем. И еще занималась адаптацией изображения, чтобы весилии как можно меньше и не сильно портились визуально. Правда, адаптпции мобильной тогда не было к счастью
Я думал это легче будет верстаться, хорошо что отказался от заказа =) Спасибо за полезное видео!
не могу понять. Все делаю по видео, но текст не центрируется, все располагается в левом боку. У кого-то было также?
Почему каждой ссылке в td прописывается шрифт разве нельзя для родительского tr указать шрифт 1 раз? Или наследование не работает?
Привычка) не пробовал на tr
А если картинка будет в base 64 то кто то не увидит ее?
Не пробовал
@@maxgraph не будет работать в gmail хотя на удивление работает в outlook. хз что и делать буду тероризировать сеньйоров завтра чтоб место выделили на сднке для моих картинок
Спасибо ! Лайк и подписка !
Я в разработке не со времен динозавров и для меня табличная верстка дико смотрится.
Да уж)) но увы, иначе сложно. Но методы есть, как нибудь я про них сделаю видео
Спасибо за видео! Последний раз с табличной версткой сталкивался 10 лет назад в институте. Уже и забыл как это стремно ))
Я человек простой, начал заниматься веhсткой всего 1 год назад. Полностью привык верстать сайты. Теперь такая верстка для меня дикость какая-то :|
Какая такая?
Дикая)
Я как человек, который пишет современные посадочные страницы, получил заказ от клиента добавить письма на определенные действия(обычно этим занимался другой человек, но к сожалению его уже нет с нами), могу сказать что это самое дикое что я видел. Я знал что они верстаются через таблицы, но что-то мне уже не хочется этим заниматься :D
Ахаха)
Автор, спасибо тебе за хороший урок и на указание трудностей при вёрстке. Быстро и по делу
Спасибо)
Хотелось бы ещё увидеть несколько версток писем
Сделаю как нибудь)
Максим, мог бы ты, пожалуйста, делать в редакторе крупнее шрифт?
Да, в новых уже)
@@maxgraph Спасибо. Случайно наткнулся на одно из твоих видео и подписался. :) У тебя есть стиль. Сайт и блог очень красивые, но не перегруженные. Мои комплименты. :)
Спасибо)) скоро обновлю их тоже
есть просьба, не используйте музыку в видео, она мешает сконцентрироваться.
Если очень хочется, можно в начале и в конце чуть-чуть
"верстальщики, да и не только, задаются вопросом - как верстать html-письма?" это чуть ли не основной скил не только верстальщика но и фронта. очень часто приходиться их верстать... есть в некоторых компаниях отдельная обезьянка на это все, но чаще или фронт или верстальщик это все делает.))) так что годно! продолжай/освежай!
как минимум в резюме, это огромный плюс. еще огромный плюс про который ни кто не говорит (если компания ориентирована за пределы СНГ рынка), это сертификаты от ведущих компаний, гугла, майкрсофт и W3, ну и остальных. с юдеми какого, лучше не показывать.))) клиенты прям кипетком писают когда видят сетификат какого фронта от майкрасофт.))) продуктовым компаниям пофигу в 90% на них. а все остальные, не гласно, это очень даже учитывают! если нет, то скорее всего оправят за ним. но супер когда он есть, шансы на то что вас примут, прям взлетают.)))
спасибо!
Пожалуйста)
Всё от компании зависит, я 8 лет во фронте и ни разу не верстал письма)
@@ПожилойБилибоба со мной работает человек, тоже 8 лет во фронте и не умет верстать вообще, не только письма а вообще.))
@@ii3246 ну если человек вообще не умеет верстать, то это не фронт) не рассказывай сказки, ну либо у тебя такая компания "мощная")
@@ПожилойБилибоба в больших и средних компаниях хватает фротов которые верстку знают на минимальном минимуме. ибо дополнительно набирают фрота который умеет верстать и знает хорошо ванильный js. ну и верстка верстке рознь . одно дело в какой студии формочки верстать, и другое в очень крупных проектах верстать где бывают баги о которых ни где ни кто не рассказывал, даже в спецификации иногда нет про это поведение ни слова. в США вообще UI и верстальщик это один человек, а UX это вообще инженер который не рисует дизайны. UX это вообще отдельная специальность... а у нас чаще всего все до кучи...😬 я много встречал фронтов с крупных компаний которые в верстке чуть на джуна потянут. нормальное явление.)))
Максим, я тебя люблю! все что хочу сказать))) Когда наступает на работе полная задница, значит тема эта досконально раскрыта и есть у тебя на сайте. Спасибо тебе за твою работу
ахах)) рад помочь!)
Отличное объяснение. Подписался и поставил лайк!
Здорово, спасибо :)
Спасибо за полезный контент. Такого понятного урока на русском языке почти нет. Но в уроках на английском видел несколько строк кода, которые называются «призрачными таблицами». Они используются для исправления некоторых проблем в Outlook. Будете делать больше подобных уроков?
По письмам будут уроки, точно)
@@maxgraph С нетерпением жду
Зачем всё-таки нужно писать нужный шрифт в конце? 14:20
Автор почему не показал адаптив? медиа запросы НЕ РАБОТАЮТ в gmail mobile. Где обещанные скрины с адаптивом?
Скрины удалил не так давно с яндекса.
Медиа запросы не работают только в яндексе.
@@maxgraph спасибо за ответ. Я просто начал изучать ету иншу, и очень много инфы что gmail mobile не поддерживает медиа. но вот сам себе отправил для теста ваш макет и все работает. странно как то. тоесть для верстки письма можно смело медиа запросы использовать? яндекс не всчет, интересуют самые популярные поштовики.
Да, я использую медиа и все прекрасно
Скоро выйдет новый ролик по теме, я покажу там как можно сделать адаптив яндексу без медиа)
А яндекс в топе почтовых клиентов))
@@justice-ua inline-block
Подскажите, пожалуйста, почему у меня при открытии письма в мобильном приложении gmail картинки и gif анимация открываются очень долго, около 3 секунд. Перед открытием высвечивается html значок отсутствия картинки.
Видимо много весят изображения
Ждём посадку емайл письма на wordpress)))
Ну, или интеграцию с opencart)))
Хах)
Спасибо, классное видео, сверстала по нему свое первое email письмо. Подписалась на канал ))) Если можно несколько вопросов: 1) как заказчики относятся если при верстке адаптива используется слишком много !important? 2) все картинки при такой верстке работают, только если уже загружены на хостинг? как тогда передавать их заказчику и что объяснять? (загружать для заказчика картинки на свой хостинг и хранить их там нереально)
Спасибо)
1) в вёрстке писем часто нельзя без него
2) да, они должны быть онлайн. Можно сказать это заказчику, пусть приобретает)
@@maxgraph спасибо за ответы)))
@@maxgraph А что если использовать github pages как хостинг?
Даже не знаю, не пробовал.
Я знаю, заказчики кидают на платформу рассылки и там хранят.
Если ещё не написали: скорее всего картинку с именем banner блокировал ad block.
уже и не помню,возможно)
об этом в видео было сказано позже, когда скопировали картинки в другую папку на хостинге
Сверстал письмо, залил картинки на собственный сервер. При просмотре в браузере или при отправке на Яндекс почту картинки отображаются. Отправляю на gmail или outlook картинок нет. Подскажите пожалуйста как можно решить эту проблему, уже даже не знаю что делать :(
Попробуйте сервис imgbb для картинок)
спасибо за видео) начала верстать сама, но когда дело дошло до адаптива начались проблемы. На телефоне не отображается адаптив, хотя вроде и !important стоит и брала ваш файлик исходный. С чем может быть связана проблема?
Без кода сложно сказать)
Хорошо объяснил, ещё бы один такой видос и где ты макет ищешь?Я сам хочу тоже сверстать.
Просто ввожу psd email templates :) www.figma.com/file/WrgN3MkNpQolehNi2lrzUT/responsive-email-templates-v1?node-id=0%3A63 - есть вот фигма, если что :)
А видео по письмам будет, но попозже.
@@maxgraph Спасибо!
Всегда пожалуйста)
Спасибо!
Вспомнил былые табличные сайтики)))
когда появился div прямо выдохнул
Пожалуйста)
Да уж, времена были не очень весёлые)
Псевдоэлементы работают?
Нет
Очень грамотно и спокойно. Многое понял из структуры кода, хотя новичок в этом.
спасибо
Я так и не понял, мы все же используем тег и он работает. Почему нам тогда не прописывать все стили туда? Я просто запутался нам его можно или нельзя юзать просто не понимаю зачем такая непонятная каша, где то в inline стили записали, где то в обьясните пожалуйста !!!!!!!!
Подскажите пожалуйста
Когда письмо отправляем - жмём галочку move css inline
Поэтому при отправке стили сами в инлайн улетают
А пишем в стайл для удобства
Здравствуйте, благодарю за очень полезное видео и в то же время, можете подсказать о той части, где вы в начале куда-то на хост заливаете через WinSCP, возможно это будет очень глупый вопрос, но я абсолютно не понимаю этот момент. Может быть у вас уже есть это видео на канале и я просто не заметила?
Не так уж и сложно если верстать, так ссылку лучше видно, и так сойдет ) ...
Все лаконично и по делу. Хорошее видео. Лучшее что я нашел на ютубе по верстке письма. Спасибо!
Спасибо)
Не подскажешь, почему в моем сверстанном письме именно в mail.ru картинки не отображаются, а вместо них если смотреть в инспекторе вставлены dump.gif ? В gmail норм все отображается
Спасибо братюнь! От души душевной!
Спасибо за урок, очень емко.
Пожалуйста)
скажите пожалуйста, а зачем писать код, если это можно сделать Google web designer?
Он ограничен) у вёрстки больше возможностей
Есть возможность работать с медиазапросами в разных браузерах?
в каком смысле?
Ссылки под видео нерабочие.
Ссылки не открывает, обнови, пожалуйста
Привет! все ссылки рабочие. Возможно не открывается потому что они были сжаты сторонним сервисом) обновил
@@maxgraph я так понимаю не открывает для украинцев
Возможно
Обновил на обычные ссылки, если и так не работает - тут спасёт только впн
Все круто, объяснение прекрасное и понятное. Я сделала для заказчика первое письмо, но возникла проблема и не знаю как её можно решить. Кнопка в outlook приложении почты отображается без маржинов, паддингов и выглядит отвратно. При том что на сайте outlook все нормально. Как можно профиксить кнопку для всех девайсов (кроме как закинуть кнопку картинкой)
Вообще должно быть ок. Если нет - погуглите bulletproof email buttons
banner.png блокирован на стороне клиента, это Adblock шалит...
Так что при вёрстке отключайте блокировщики реклама "на этом сайте"...
Ну или называть картинки надо иначе)
🔥
мужик ты меня спас!
Надо подождать когда блочная верстка будет работать, таблицы давно на помойку пора выкинуть
Учитывая все ещё хороший процент пользователей аутлука, будете вы ждать минимум лет пять, а то и больше))
Доброго дня. Почему в примере используются только png изображения? Can I email пишет что jpg поддерживается всеми почтовиками.
Здравствуйте
Просто потому что можно)
атрибут align="center' говорят уже устарел(( красным выделяется. чем можно это заменить?
Он не устарел при старом формате доктайп. Поэтому в письмах ничем не заменить
музыку потише
)
Скажите пожалуйста, а свой хостинг иметь обязательно для каринки?
Нет
А как отослать html письмо?
через сервисы рассылки
@@maxgraph То есть через почту не получится?
спасибо, выручил)
допустим я сделал такое же письмо, в style написал определенные стили, потом в инлайнере прогнал код. А после этого нужно удалять ?
Нет, не нужно)
Спасибо! Благодаря тебе сделал первое письмо на работе)) Единственное столкнулся с проблемой отображения svg, не все почтовики его отображают. Подскажи пож. лучше .png формат использовать для отображения иконок?
Только пнг можно, свг не будет работать)
ничего не понятно....
а никак нельзя замиксовать вёрстку обычного сайта с вёрсткой письма? Я так понимаю если делать оба то они обязательно должны быть раздельны?
Да, только делить
Спасибо 🙏💜
Пожалуйста)
выложить исходный код на гит считается хорошим тоном, не упусти это мимо)
Я не подчиняюсь никаким тонам) как удобно, так и выкладываю. Если здесь забыл - обновлю
Не понял, почему использовал марджины у h3 и p
Уже не помню
привет, ссылка на макет не доступен, нет возможности скачать?
Привет, попробуй впн
здравствуйте! благодарю Вас за видео! было очень полезно и позновательно!
Здравствуйте, пожалуйста)
Лайк как минимум за ссылки на полезную информацию! А теперь смотрю дальше)
Пожалуйста)
Не понял зачем стили задавать и в классах и напрямую в html? И какие тогда стили надо писать там, а какие здесь?
Шрифты напрямую, иначе не работает. И все что можно атрибутами - делаем атрибутами.
Все супер. Но многие смотрят с экрана смартфона. Очень мелкий шрифт.
не очень понимаю, для чего такие видео с телефона смотреть, но в новых видео стараюсь делать больше, спасибо)
26:13 почему для внешнего отступа используете padding? и главное почему оно не работает?)
margin не всегда корректно отрабатывает в outlook. Перестраховываюсь)
Я правильно понимаю, что gmail шлёт лесом теги style и соответственно все @media внутри них? Следовательно адаптива полноценного для gmail мы сделать не можем?
Это так, но можно же инлайн сделать все, и будет работать
Верно. Время таблиц и пляски с инлановыми элементами я пропустил и сразу учился верстки на флексах, поэтому вот так. Спасибо!
А что делать, если тёмная тема стоит на последних версиях у Android и iOS? Gmail просто цвета меняет. И письмо всё темных цветов с белым текстом.
И медиа запросов нет с поддержкой для Gmail(
Можно как-то сделать письмо адаптивным с защитой против тёмной темы?)
Если вдруг появилась такая возможность - я о ней пока не знаю :)
скоро будет видео на тему верстки писем, посмотрим)
Спасибо за видео!
Очень полезное.
Есть вопрос. задача в адаптивной верстке представить таблицу из 4х колонок в формате 2 колонки сверху 2 снизу.
не подскажете как это решить?
Сделать элементы инлайн-блок, как вариант. Но тут посмотреть бы в идеале)
Чего-то душная тема, но спасибо за контент
Пожалуйста)
Зачем вы пользуетесь Яндексом??
А почему нет?)
а что не подходит?
Не подходит, потому что стандарт другой
47:18 а нельзя шрифты сразу в tr прописать?
можно попробовать
Спасибо за видео!Я единственный момент не понял: отправлять потом этот файл нужно или в тексте письма вёрстку вставлять??Если не через сервисы отправлять, а вручную.
Так не отправить. Только сервисами рассылки
@@maxgraph вобще можно, вставить html в код письма, вчера узнал)
приветствую, а почему, в самом начале, где верстали меню, отступ сверху через td делали, а не через padding ?
Не понял, где это?)
@@maxgraph уже разобрался) но появился вопрос, как сделать border-radius, чтобы в outlook работал ?(
@@maxgraph только через условные комментарии ?
А имеет сейчас смысл изучать верстку email рассылок, есть же всякие конструкторы?
Заказы на это есть, в офис тоже бывает что требуется навык) почему бы и нет
Так и для сайтов есть конструкторы где можно без единой строчки кода сайт сделать
зачем там такая громкая и отвратительная музыка фоном 🤮🤮 я вообще не фанат такого стиля, от этого просто невозможно слушать все содержание (((
судя по уровням (программа вряд ли врет) - с ними все в порядке. Но в последующих видео лучше)
Хотелось бы узнать ваше мнение о gulp сборщике для верстки писем fuzzymail ?
Не пользовался
@@maxgraph Посмотрите пожалуйста! Хочу изучить и применить его в верстке, надеюсь на ваш опыт... Сам начинающий...
docs.google.com/forms/d/e/1FAIpQLSdFPQ0tXLzuhH9uv_zB-MlUuCCyxeSICnL5Qtiy1uTaMBUj1w/viewform?usp=sf_link - напишите сюда) как-нибудь гляну
Автор, спасибо за видео. Объясните пожалуйста как сделать две кнопки в ряду в десктопе, и 2 кнопки в столбце в мобильной версии? diplay none/block не работают
Добрый день! Я это частично на адаптиве показывал. display block как раз таки. Но вообще тут на конкретную ситуацию бы посмотреть.
Я думаю, стоит просто взять еще макет и как-нибудь стрим устроить :)
@@maxgraph Есть макет в фигме для рассылки письма apple, будем верстать?)
Почему у меня не работает адаптив на моб ? Я сделал как ты у меня не вышло, потом я для проверки взял твой код сделал рассылку и у меня все равно не работает адаптив. В браузере все норм но стоит отправить письмо и адаптив перестает работать. Помоги плиз с чем это мб связано ?
*твой код не менял, только картинки загрузил на сайт и указал ссылки
Посмотреть код надо)
@@maxgraph в нем что то не так ? ни че не менял, специально снова скачал и вставил ссылки на картинки
Я не могу наугад сказать)) пишите в телегу или вк, посмотрю
медиа запросы лучше избегать. Использовать inline-block
cпасибо за полезное видео, лайк, подписка.
пожалуйста)
Супер, спасибо! Доступно и понятно, особенно понятен принцип.
спасибо)
Не работаю ссылки,
скиньте у кого есть пожалуйста
Попробуйте впн
@@maxgraph получилось спасибо)
Спасибо! Все четко и понятно!
Отлично) пожалуйста)
в чем может быть проблема на мобильных устройствах, текст очень мелкий приходит?
Сложно сказать, не видя ситуации
MaxGraph - cайты как страсть я вывожу заранее форматированный текст с помощью задавая попутно в нем же стиль, но при открытии в мобильных приложениях на андроиде очень мелко все получается
Надо прям код глянуть, напишите вк или в телеграм завтра
Спасибо.
Пожалуйста)
Очень круто!!
спасибо)
Спасибо, полезное видео
Пожалуйста)
Хороший урок! Спасибо.
Пожалуйста)
Огромное тебе спасибо, Максим!
Пожалуйста)
Как раз Blanchard-mail, в продвинутой вёрстке верстаю)))
Почему нельзя писать все стили в ? Может я прослушал ответ на этот вопрос)))))
можно, но нужно потом все делать инлайн) иначе не применятся стили
@@maxgraph, извиняюсь за вопрос, а инлайн - это что?))))) Я просто очень начинающий)))))
В атрибуте style)
@@maxgraph , не понял. А как ты разделил стили, что в атрибутах, а что в шапке в ?
автоматические есть инлайнеры, которые сами переносят все в инлайн)
А что за редактор для psd макета у вас?
Avocode
MaxGraph - cайты как страсть спасибо
Добрый день!
Спасибо за урок.
Подскажите, как отправить такое html-письмо через php функцией mail?
Добрый день!
не пробовал такое, наверняка тут стоит перекодировать как-то html-код и отправлять его.
@@maxgraph а смысл тогда какой в вашем уроке? просто вёрстка страничик? Если нет хотя бы базовго понимание или какой то указки как отправлять это письмо. Так пишу ибо сам довольный сверстал форму обратной связи, со всеми обязательными полями и возможностью загуружать файлы, а бэк енд программист голову ломает что с этой чудо красотой делать :)
@@andrispikarevskis5513 урок называется "верстка письма". Про отправку нигде не указано
@@andrispikarevskis5513 тоже хотел спросить у Максима про отправку такого письма, как понял нужно будет гуглить.
Это делается сервисами почтовыми, типа mailchimp
Что за редактор в котором письмо подскажите?
VS code, если я верно понял вопрос
@@maxgraph нет в которой само письмо
Может Outlook? Не понимаю))
@@maxgraph само письмо в какой программе открыто figma ps?
Аа, макет) да, в фигме
медиа запросы не работают же
Работают, но не везде
@@maxgraph статьи читаю и там пишут, что в гмайл например не работает, это так? а как без медиа делать адаптив?
Насколько помню, в Gmail работает.
А насчёт того как делать без - сложно на словах. Сделаю видео как нибудь, покажу
@@maxgraph не gmail почта в браузере, а именно gmail приложение в гугл плей или эпл сторе, а если все же делать адаптив без медиа. куда смотреть? я нагуглю, просто не знаю что гуглить даже
Это не нагуглить)
Ну если просто на словах - надо организовать отступы и элементы так (через инлайн блок), чтоб при сжатии они сами перестроились
Да, с непривычки для верстальщика сайтов вёрстка писем - это просто треш и угар! 😅😂
Отстали они в развитии лет эдак на 15 😄
Сколько учился сайты верстать - походу столько же ещё учиться письма верстать 😅 (всё по новой - ничего общего) 😅
Спасибо за видео! Выручил! ))
Это точно))
Пожалуйста)