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

[@lookaround9469]

Мужик, хочу выразить тебе огромное спасибо! Благодаря твоим видосам нашёл много ответов на вопросы и работаю щас верстальщиком писем) Дальше больше! С наступающим Новым годом!

[@maxgraph]

С наступающим, спасибо)

[@VladimirLachugin]

Большое спасибо Автору! Благодаря вашей поддержке я успешно занимаюсь веб-разработкой. Регулярно просматриваю ваши видео, мне нравится, как вы детально разбираете конкретные кейсы. А кто только входит, дерзайте все получится )

[@AndreyKochanov]

Спасисбо большое за видео, Максим! свой путь во фронте начинал с курсов на Skillbox и ты там был ментором) сейчас я работаю фронтом на реакте, поступила задача сверстать экраны для email и тут твоё видео! Видео очень помогло и даже макет почти совпал) Спасибо

[@olegger7436]

Ооо, большая благодарность, давно хотел глянуть как верстать письма, знаю что табличной версткой, но руки до практики ещё не доходили)

[@maxgraph]

пожалуйста)

[@vovahyrakov1331]

Благодарю. Один из немногих кто оставляет код для скачивания, без всяких "шахмат".

[@СергейФедяев-ц5ч]

Благодарю за то что делишься бесценными знаниями, очень подробно и понятно всё!

[@maxgraph]

Рад помочь!)

[@dipster1992]

Ваш контент самый топовый !!! Люблю ваши видео смотреть

[@maxgraph]

Спасибо)

[@ddflruc]

Очень полезный контент, спасибо!

[@PirBogov]

Спасибо за Ваши труды! Посмотрела старое и новое видео про верстку писем. Очень интересно!

[@Шалун-н9щ]

Как всегда круто! Спасибо!!!

[@DrKrInfinity]

Тот же алкаш который делал IE решил взяться за Outlook. Спасибо за подробную информацию.

[@maxgraph]

О да))

[@MrDgavatar]

Благодарю! Но есть несколько моментов... - В outlook app кроме border-radius исчезли и отступы - это решаемо не сложно было бы сделать. - Чрезмерная вложенность таблицами - например лого можно было просто в td верхнего уровня положить без таблицы задав для td align: center и добавив padding - все прекрасно работает - div использовать можно только для preheader в остальном поддержка div крайне мала в письме лучше продолжать использовать таблицы вместо div - Google fonts не будет работать во многих клиентах, например Gmail - Для многих свойств CSS в style лучше делать fallback: например у td align="center" когда нужен style="text-align: center;" или bgcolor когда используем background-color - line-height лучше использовать только в px иначе относительные величины отыграют по разному в почтовых клиентах... - Полная запись padding-top: 19px; padding-bottom: 0; итд безопаснее чем сокращенная padding: 19px 0 0 0; ....

[@maxgraph]

1. Тут надо смотреть, не должно. 2. Вложенность влияет лишь на размер письма, а размер небольшой. Так что смысла упрощать нет) 3. Это не совсем так. Почитайте блоги Литмуса, там они дивы используют весьма часто) 4. Верно. Но где будет - пусть работает) 5. Если работает без них - зачем? 6. Да, пожалуй) 7. Я тоже изначально так считал. Но по факту, это ни на что не влияет толком.

[@dimaburichin7726]

Очень ценное видео письма это актуальная тема. Спасибо и лайк!

[@maxgraph]

Пожалуйста)

[@blackcelebration3588]

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

[@maxgraph]

Спасибо)

[@v_ITshnik]

Поддержу автора просмотром, комментом и лайком 👍 Только начинаю работать верстальщиком и чаще всего ответы на появившиеся вопросы нахожу именно на этом канале. Прям выручает. Карты подключал, библиотеки, сегодня например про svg смотрел. Такое чувство, что здесь уже всё есть 😄

[@maxgraph]

Ну ещё не все))

[@lazylion8379]

Красавчик, жирный лайк, подписка мощный апперкот по колокольчику, вовремя выложил видос, как раз хотел узнать как верстать письма

[@maxgraph]

Спасибо))

[@Uncaught_in_promise]

Я человек простой: если появилось новое видео от Максима - сразу не глядя жму лайк. И всем советую. Так как уверен что порожняка не будет. Только топ контент.

[@maxgraph]

спасибо!)

[@Red_Sky_92]

Эмэйл письма - особая чёрная древняя магия ))))

[@maxgraph]

не спорю)

[@КумарАшымов]

искал серебро - а нашел золото !! Спасибо большое !!

[@DenDK2023-z2o]

Благодарю за подробный гайд!

[@maxgraph]

Пожалуйста)

[@alxnrpanchuk]

Огонь, спасибо за труд!

[@maxgraph]

пожалуйста)

[@shiryaev585]

Отличный урок, отличный канал, автору огромное спасибо!

[@maxgraph]

Спасибо)

[@whiteltd5970]

Очень жду адаптивную верстку в 2024 (точно что-то могло измениться за 2 года) жду обновления контента, спасибо! Можно и на сайте верстаем онлайн затронуть эту тему!

[@maxgraph]

Такое видео в планах, но не знаю когда точно)

[@elliothammerlock8181]

Спасибо. Видео понравилось. Мне не хватило побольше объяснений по начальной структуре. Надеюсь, что будут еще видео по этой теме. Очень уж мало про нее информации.

[@maxgraph]

Еще будут видео по теме

[@evgeniika8426]

Очень круто спасибо !!!!

[@maxgraph]

Пожалуйста)

[@виртуоз_ру]

Спасибо за интересное видео

[@maxgraph]

Пожалуйста)

[@Alex-My-reverence]

Супер!!! 👍👍👍👍👍👍👍🔥🔥🔥🔥🔥🔥🔥🔥

[@orcsamuro9687]

Спасибо было полезно

[@user-jb4qb8cb5h]

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

[@IgorBobyrev]

Спасибо, поставил лайк видео! 👍 Два вопроса: 1. Почему в десктопной версии карточки встают в ряд, а не друг под другом - потому что они - inline-block? 2. Вы там много закомментировали, например, что касается Outloock, как же закомментированный код работает?

[@maxgraph]

1. Да) 2. Это специальные комментарии, которые будут работать только в Outlook)

[@ОлегСтранник-й9ы]

Спасибо!

[@maxgraph]

Пожалуйста)

[@nkondakov]

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

[@maxgraph]

Просто моя привычка)

[@Jane-ge7ho]

Большое спасибо👍

[@maxgraph]

пожалуйста)

[@imrondev]

Однозначно лайк!

[@maxgraph]

Спасибо)

[@sevaseverny]

приветствую! я графдизайнер и тут случилась задача не совсем по профилю ) хотел спросить. вот к примеру письмо сверстано и проверено - сам себе послал - все типтоп как из него сделать корпоративный шаблон (для Outlook например), чтобы раздать его сотрудникам?

[@krisDayerFerrari]

Полезный контент, но сложно слушать из-за постоянных причмокиваний между предложениями.

[@СтаниславГорячев-г1ъ]

Спасибо

[@maxgraph]

Пожалуйста)

[@baton4iki]

О,спасибо

[@maxgraph]

пожалуйста)

[@isok.atyrau]

Да благодарю за урок верстка письма, эта тема актуально данный момент для меня. p.s. Пока единственный автор который похвалил дизайнера))

[@maxgraph]

ахах) спасибо)

[@IgorBobyrev]

Дизайнерам приходится знать много из разных областей, разбираться во всем: и в психологии, и в истории, и в экономике.... А когда человек много знает - это многих раздражает. Подтрунить над начитанным человеком - любимое занятие многих

[@VIJana79]

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

[@IgorBobyrev]

у вас в браузере должны отображаться. Если нет - что-то намудрили с путями, или может быть формат не поддерживается

[@movieclips4848]

Добрый день классный урок как всегда можно ли больше уроков по вёрстке писем спасибо

[@maxgraph]

Будут ещё)

[@sergeyolexandrov9977]

Большое СПАСИБО. Видео супер. Подскажите пожалуйста, а как можно добавить фоновую картинку и чтобы на ней были кнопки, текст и заголовок и чтобы можно было редактировать. Спасибо.

[@maxgraph]

Это сделать довольно сложно) и все равно работать будет не везде

[@Atractiondj]

Я задаюсь вопросом, нафига использовать inline стили если все классы можно прописать между тегами style и вот тебе CSS файл внутри HTML

[@maxgraph]

да как-то уже в привычку вошло так писать

[@IgorBobyrev]

Если стиль прописан в HTML в тегах style, то это уже инлайновый метод, хотите пишите классы, хотите нет

[@Atractiondj]

@@IgorBobyrev значит вы шлете лесом оптимизацию и простоту стилизации... Дело ваше

[@Ruckus1986]

а как быть с колонками в старых версиях thebat! ? они отображаются друг под другом, словно это просто набор таблиц. Были какие-то костыли? Например, все версии до 9.12 не дружат с колонками пытался найти информацию, но нахожу только гайды по настройкам почтовика

[@maxgraph]

Сложно сказать. Такого почтовика вообще не видел нигде :) Тут только постоянные тесты, больше никак

[@Ruckus1986]

@@maxgraphта я сам видел его надцать лет назад. Не думал что он все еще жив. А тут клиент пришел и говорит что по их данным у их клиентов куча старых TheBat!, а у них довольно часто используются колонки. Естественно, некоторые письма - просто колбаса. Думал вдруг помните/знаете когда ТОГДА были костыли)

[@Ruckus1986]

@@maxgraphкстати в догонку, в Ваших уроках часто используются колонки с фиксированной шириной. У меня была задача с респонсивным письмом: (текст) + (иконка+текст) + (иконка + текст). При респонсиве (иконка + текст) должны были стать друг под друга, а (текст) - заполнять все свободное пространство. css calc() не работает в новых Outlook, поэтому тоже ищу каких-нибудь решений

[@maxgraph]

Так при адаптиве в медиа запросах можно сделать 100% ширины колонкам)

[@DenisBrekhunov]

Подскажите пожалуйста, как быть c media запросом? Получил 2 дизайна с отличием отступов и размерами шрифтов. Как быть? пойти к дизайнеру и дать в пачку или как ? ))

[@maxgraph]

Да, пойти к Дизайнеру)) ибо в некоторых клиентах медиа не работают

[@igromanyayt4323]

а как верстать так, чтобы в app google gmail(на андроид и айфонах) было так, чтобы на светлой теме было темный фон и на темной теме тоже черный фон. Там работает глупая инверсия, как избавиться?

[@maxgraph]

Если тот метод создания тёмной темы, который рассмотрен в видео, не подошёл - вариантов нет. Не обойти)

[@igromanyayt4323]

@@maxgraph да, я посмотрела, он у вас в гугл апп также показывается(

[@maxgraph]

Увы( в вёрстке писем иногда надо смириться

[@Ростислав-м3п]

Спасибо за видос! Можете посоветовать, где можно узнать больше про условные комментарии в верстке писем. Не совсем понял, как они работают и как их применять. Заранее спасибо!

[@maxgraph]

Загуглите condition comments)

[@adamkayne2621]

Отличное видео! Есть пара нюансов. 1) При прохождении валидатором ругается на шрифт и role='presentation'. 2) Какой все-таки доктайп верный? тот что указан в шаблоне XHTML 1.0 или тот что в гугл-документе HTML 4.0 ?

[@maxgraph]

Это и есть 4.0 доктайп Насчёт роли да, ругается, но ничего не поделать. Зато работает в клиентах

[@Оксанаээ133]

Ну почему у меня все ячейки встают в вертикальный ряд. В аутлуке2016

[@IgorBobyrev]

Потому что по ширине не вмещаются в контейнер

[@kom4eg]

вопрос, почему для center сразу не задать 600px и использовать его как main контейнер? спасибо

[@maxgraph]

Можно попробовать. Но мои тесты говорят, что так надёжнее

[@sergmalin210]

Здравствуйте комментаторы, кто подскажет, где указывается автор письма и тема письма?

[@maxgraph]

Это уже при отправке указывается в сервисе отправки. Например на том же putsmail.

[@romanmatsypula655]

На сколько я понял, лучше все делать в inline стилях по верстке писем. Как быть с float: left/right; на windows live mail? И еще вопрос: есть какие то топы под которые делать email рассылку или нужно смотреть все на caniemail? Отрицатильные марджины или отрицатильный position не работает( Если будет время сделай пожалуйста еще одно видео по верстке письма с inline стилями. Если делать с классами то вроде накоторые почтовики вырезают классы

[@maxgraph]

Классов в итоге нет, ведь мы при отправке нажимаем на кнопку инлайнера

[@evgeniiak7458]

Подскажите, как сохранить отступы при пересылке письма? Письмо приходит красивое, а после пересылки весь контент в нём сбивается в кучу.

[@maxgraph]

Отправляйте через putsmail, все будет окей

[@romanmatsypula655]

Как быть с темным режимом в email верстке? Там идет сплошная инверсия цветов по картинкам и кнопкам? Есть какой то мета тег что бы отключить по дефолту переход на темную тему? Спасибо за видео)

[@maxgraph]

Все что я показал про тёмную тему как раз и решает вашу проблему)

[@game_m]

Подтверждаю, на IOS темная тема в приложение Gmail не контролируется инверсия. в родном приложение все работает отлично. Как решить - наверное только смириться как и с бордером в оутлуке и другими моментами.

[@unicoxr5tj417]

шекарно

[@maxvahrushev5154]

Добрый вечер, max, у меня вопрос, почему у меня outlook в браузереной версии вырезает тег a и элемент перестаёт быть ссылкой если смотреть в коде тега вообще нет

[@maxgraph]

Здравствуйте. А как код выглядит?

[@maxvahrushev5154]

@@maxgraph table /tr/td/a/img а он вместо а вставляет span а ссылку вырезает

[@SuperCrazyhors]

Здравствуйте, спасибо за видео. В Ссылке на гугл-документ с правилами и инструментами теперь отображается другая информация.

[@maxgraph]

Добрый день. Там верная информация, просто у документа есть несколько вкладок :)

[@SuperCrazyhors]

@@maxgraph тогда сорямба за тупку)

[@МихаилКрук-э5х]

Привет всем. Отличное видео (это автору) ! А теперь вопрос для всех, актуальная ли эта информация на сегодняшний день ? Разработкой занимаюсь, но никогда не верстал имейлы. Мог бы кто подсказать ?

[@maxgraph]

Привет. Вполне актуально) но скоро будет новое видео на эту тему

[@МихаилКрук-э5х]

@@maxgraph Спасибо большое! Да вот только на вчера уже надо 😄 А если не секрет, когда выйдет новое видео ? И такой вопрос, в какой способ можно динамически передавать данные в письмо ? Будет ли такое в новом видео ?

[@maxgraph]

Должно уже было месяц назад выйти 😀 но никак не доберусь. В видео не будет, это отдельная тема. Будет только вёрстка) А передавать можно с помощью сервиса рассылки

[@МихаилКрук-э5х]

@@maxgraph Тогда буду подсматривать из данного видео 😅 надеюсь письмо не сломается 😄 Спасибо еще раз !

[@Uncaught_in_promise]

Вопрос: а нормально ли svg вставлять инлайново в емейл? Для логотипа, иконок. Все почтовые сервисы примут svg инлайновый?

[@maxgraph]

Свг в письмах не работает

[@Uncaught_in_promise]

@@maxgraph даже инлайновый?

[@maxgraph]

Да

[@user-samdi]

Для 2023 года видео актуально? Также верстаем на таблицах?

[@maxgraph]

Да

[@agent__agentovich]

А для 24го?😁

[@maxgraph]

Тоже да)

[@JavaScriptWolf]

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

[@maxgraph]

Ну это можно настроить, но только у себя, остальным все равно придётся нажимать)

[@JavaScriptWolf]

@@maxgraph Большое спасибо за ответ)

[@cavalcade5002]

Добрый день,хотел через галп сборку поверстать но при запуске выдает много ошибок, гуглил, пишет что галп старый а нода обновленная. Как можно решить?

[@maxgraph]

Какие конкретно ошибки?

[@cavalcade5002]

@@maxgraphinvalid exports main target typograf defined in the package config Путь к папке targets must start with. /

[@maxgraph]

Я на днях ошибку исправил, скачайте заново сборку

[@cavalcade5002]

@@maxgraph качал, но теперь пишет primordials is not defined

[@maxgraph]

Значит версия ноды не та, скорее всего

[@begineras]

ооо спасибо

[@maxgraph]

Пожалуйста)

[@lookaround9469]

Спасибо за контент! Как быть если шрифты локальные?( Ну не хотят они нормально отображаться..

[@maxgraph]

Никак)

[@РусикУмняшев]

Здравствуйте) Спасибо за урок! Проверил ваше письмо в MS Outlook 2021 и оказалось, что сетка развалилась. Кажется, условные конструкции [if mso] не работают в MS Outlook 2021

[@maxgraph]

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

[@suspiciouscandy1678]

Давно ждали верстку сложного макета письма. :) А почему сегодня без MJML? ))

[@maxgraph]

Показалось что это лучше)

[@aleksandrpetrov3938]

@@maxgraph почему лучше? Я просто сейчас первый раз делал письмо. И оч сильно замучался ) Юзал mjml но мне показалось что так меньше гибкости в рамках фрейворков и контроля за тем как ведет себя верстка

[@ТанкВанильный]

Разве нельзя дать ссылке display:block и паддинги, и не костылить с неразрывными пробелами?

[@maxgraph]

увы, если бы все было так легко)

[@ТанкВанильный]

@@maxgraph а в чем проблема? Не поймите неправильно, я просто не хочу, решив вопрос таким образом, обнаружить поломанную верстку в какм-нибудь аутлуке...

[@maxgraph]

@@ТанкВанильный в том, что это просто не работает :)

[@ТанкВанильный]

@@maxgraph но у меня же работает. Или где это не работает? В аутлуке?

[@g3k0s20]

это конечно круто. Но я как клиент, хотел бы чтобы мое письмо корректно отображалось в yahoo, gmail, outlook web & desktop. Например, в gmail не видит классы и тд. В этом то и вся боль этих писем. Вы показали всего лишь на одном сервисе... Спасибо за уроки!

[@maxgraph]

Точно до конца досмотрели все, и внимательно?) Нужно при отправке делать инлайнинг стилей.

[@g3k0s20]

@@maxgraph спасибо) разбираюсь. Отмотал в конец и увидел, что вы там использовали один емаил сервис) отпишу, как доделаю) сори, и спасибо)

[@movieclips4848]

Насколько актуальна Email верстка писем как работа на фрилансе или в офисе

[@maxgraph]

Вполне актуально. Ну, в офисе явно лучше будет с этим

[@movieclips4848]

@@maxgraph Скажите если заниматься чисто версткай писем можно ли зарабатывать на этом

[@Uncaught_in_promise]

Работаю стажером фронтендером. Как только вышло это видео, на работе дали задание верстать емейлы. Совпадение?

[@maxgraph]

Видимо))

[@OleksandrTymoshenko-h9o]

медиа запросы и такая темная тема не работает ни на каком почтовике

[@kom6395]

Email верстка еще актуальна?

[@maxgraph]

конечно)

[@kom6395]

@@maxgraph я думал там уже всё на конструкторах делается

[@maxgraph]

конструкторы как всегда шаблонны. А если нужно чуть выйти за пределы шаблона - не обойтись без ручной работы)

[@ForeverDarkDeath]

а вообще странно в 2022 году смотреть, что кто-то ручками письма верстает в эру готовых конструкторов писем. берёшь любой что понравился - верстаешь письмо констукторов как в фигме - получаешь готовый index.html на выходе сразу со всеми настроенными отступами и инлайн-стилями.

[@maxgraph]

Если бы это так работало :))

[@ForeverDarkDeath]

@@maxgraph это вполне работает. всегда так рассылки делаю давно. Но проблему gmail это всё равно никак не решает.

[@maxgraph]

И в аутлуке тоже работает?)

[@АлинаСоколова-ц3ь]

@@ForeverDarkDeath какие конструкторы порекомендуете?

[@ForeverDarkDeath]

пишешь пишешь свои какие-то классы, а в gmail они просто все потом вырезаются и ничего не пашет.

[@maxgraph]

Для этого нужен инлайнер

[@ForeverDarkDeath]

@@maxgraph аддаптивные отступы без классов не сделаешь. например, чтобы на мобильном паддинги были не такие, как в desktop'e

[@maxgraph]

Ну да Для этого инлайнер стилей и нужен

[@kapitankrolick]

верстка писем рушит все правила верстки😁

[@jackyiakovenko]

бан на день в тг это сущий ад 😂😂который обернулся тем что после переустановки системы теперь и просто войти в тг не могу так шо спрошу тут 😂 как в галпе отключить стайллинт? ато бесит все красное 😎

[@maxgraph]

Галп с ним не связан.просто надо пакеты удалить

[@jackyiakovenko]

@@maxgraph сенкью вери матч ✌

[@rusmoko9059]

Наверное хороший контент, но не смог посмотреть больше трех минут. Автор причмокивает, плямкает и издает еще какие-то звуки. Хотел бы я, чтобы у меня нервная система выдерживала такое :(

[@maxgraph]

Бывает

[@rusmoko9059]

@@maxgraph извиняюсь, если задел. это такой кривой способ пожелать более чистого изложения... еще раз извиняюсь

[@maxgraph]

Все в порядке) я сам все знаю

[@kom4eg]

вообще не заметил - обычная человеческая речь, мб только для меня хз

[@def1sR]

А что насчёт шрифтов, которых нет в Google Fonts ? В моем случае, Arial, скачать локально и подключать через @font-face? Заранее спасибо!

[@maxgraph]

Если их нет, значит их не подключить. Используйте похожий безопасный шрифт

[@en_kratia]

Спасибо