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