Как правильно верстать письма для рассылки (пример или шаблон)?

Question

[Senseich]

Всем привет! В ближайшем будущем мне предстоит верстать письма для почтовых рассылок.
Так как раньше я не сталкивался с этим, но слышал, что там свои особенности.

1. В связи с чем прошу поделиться примером или быть может шаблон-заготовка есть. Желательно кроссбраузерная, адаптивная.

2. Или посоветуйте хороший материал на эту тему.

Думаю данная тема будет многим интересна.

Answer 1

[Антон Спирин]

https://foundation.zurb.com/emails.html
https://foundation.zurb.com/emails/email-templates.html

Comments

[Senseich]

Антон Спирин, я так понимаю это специальный фрейворк? ) а адаптивность в нём есть? или для писем не делают адаптивность? я не в курсе..

[Антон Спирин]

Senseich, почитайте эту статью и другие статьи на о версте email, чтобы понимать с чем придется иметь дело.

[Senseich]

Антон Спирин, пишут вроде неплохой фреймворк, но если отсылать через мейлчамп, то ломает верстку в gmail, но это уже вопрос к мейлчамп )

Answer 2

[Алексей]

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

Comments

[Senseich]

Алексей А, что за рассылка от яндекса, можешь этот пример скинуть, пригодиться )

[Максим]

Senseich, можно верстать и на блоках - просто надо проверять как смотрится ЭТО в других почтовиках и делать выводы

[Алексей]

Senseich, почту бы куда скинуть. А так от Такси и с Музыки нормальные шаблоны приходят.
Максим Ленский, ну тут основная задача не пролететь со стилями по факту то.

[Senseich]

Алексей , вот почта: [e-mail] , если не сложно, поделитесь Алексей

[Максим]

Алексей, все стили то инлайновые .... к примеру возьми разметку любой email рассылки ... там увидешь ...

[Алексей]

Максим Ленский, именно в этом и смысл что стили инлайновые, но поддерживаются далеко не все.

Answer 3

[deeppines]

Можно так же воспользоваться фреймворком, например - https://mjml.io/
Польза в том, что разметка проще чем теги таблицы, плюс автоматическое добавление костылей под разные сервисы.

Comments

[Senseich]

Lucas Kane, а не знаете как он себя ведет , если отсылать через мейлчамп, вот здесь в комментариях пишут, что верстка ломается в gmail, но статья того года, может уже что-то поменялось? )

[deeppines]

Senseich, у меня не возникло проблем, главное правильно разметить письмо, с мейлчамп проблема будет в прописывание их атрибутов (например: mc:edit) их придется прописывать в уже скомпилированный html код.

[Senseich]

Lucas Kane, ссылочку подправил ) Т.е. у этого сервиса, нельзя просто взять и свою верстку отправить, у них свои тонкости?

[deeppines]

Senseich, Ну так в статье же написано, достаточно следить за вложенностью и не превышать размер ~95kB
Свою верстку отправить можно, еще можно на основе нее сделать редактируемый шаблон, так вот для того что бы прописать атрибуты необходимые для этого придется это делать ручками в уже скомпилированном html, что немного неудобно, но терпимо.

[Senseich]

Lucas Kane, понял. я то говорил не про саму статью, а там человек как раз писал в комментах про этот фреймворк https://habr.com/company/englishdom/blog/340852/#c...
Но, видимо это дело с мейлчамп )

[deeppines]

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

Answer 4

[7240]

Вот хорошая инструкция с минимум заморочек и минимум кода
https://webdesign.tutsplus.com/ru/tutorials/creati...