Верстка имэйл письма

Слайд 2

Особенности верстки email-рассылок: Используется табличная верстка. При блочной верстке с использованием

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

Используется табличная верстка.
При блочной верстке с использованием

возникают проблемы с позиционированием в различных клиентах (особенно в тех, где для обработки используется Microsoft Word, к примеру, Outlook). При желании можно пользоваться div-ами, но безопаснее верстать таблицами

Используются инлайн-стили (пишутся непосредственно в тегах)
Некоторые клиенты, особенно Gmail до недавних пор, беспощадно обрезают любые не встроенные стили. Писать CSS в тегах и запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Слайд 3

Особенности верстки email-рассылок: В стилях предпочтительней использовать развёрнутую форму записи свойств.

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

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

так: «border-width: 1px; border-style: solid; border-color: #e1e1e1;» , а не так: «border: 1px solid #e1e1e1;»; использовать background-color вместо background.

Аккуратно использовать свойства CSS3, так как работать они будут не везде
Все зависит от почтового клиента и устройство, с которого пользователь читает письмо. Если используете CSS3 в вёрстке писем — тщательно тестируйте.

Слайд 4

Особенности верстки email-рассылок: Ширина письма должна быть в среднем от 600px

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

Ширина письма должна быть в среднем от 600px

до 700px.
Если использовать ширину больше этого значения, то письмо по ширине не поместится в почтовый клиент.

Использовать только стандартные шрифты, которые присутствуют на всех устройствах.
Следующие шрифты можно использовать в рассылках без страха и риска. Правило @font-face поддерживается не во всех почтовых клиентах.

Слайд 5

Особенности верстки email-рассылок: Кнопки в виде ссылки с картинкой. Так будет

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

Кнопки в виде ссылки с картинкой.
Так будет проще

всего и надежнее. Также этот вариант нужно использовать, если шрифт на кнопке нестандартный или кнопка слишком большой ширины и её нужно будет уменьшать при адаптации.
Слайд 6

Верстка email-рассылки: https://www.figma.com/file/653XjXknJeNzxlVZVgvfGC/html_email?node-id=0%3A1 Ссылка на макет figma Ссылка на код https://github.com/JuliaSheleva/html_email

Верстка email-рассылки:

https://www.figma.com/file/653XjXknJeNzxlVZVgvfGC/html_email?node-id=0%3A1

Ссылка на макет figma

Ссылка на код

https://github.com/JuliaSheleva/html_email