Ведущие почтовые клиенты Mali.ru, Gmail, Outlook, Yahoo поддерживают всего лишь 50% всех html и css. Html-разметка для email-рассылок еще не стандартизирована. И некоторые элементы, которые используются при верстке web страниц, в письме могут отображаться неправильно. Поэтому, перед отправкой рассылки необходимо проверять, как письмо будет отображаться в разных почтовых службах. В NotiSend такую проверку можно сделать на одном из этапов создания рассылки.
В этой статье представим рекомендации для верстки писем.
Чего еще не стоит делать при верстке письма
Изображения с разными областями для клика
Не стоит создавать изображение, которое ведет к разным адресам, так как это не распознается почтовыми провайдерами. В таком случае стоит нарезать изображение и каждую часть связать с нужной веб-страницей.
Не использовать дизайнерские шрифты
Нестандартные шрифты будут некорректно отображаться в большинстве почтовых клиентов, так как загрузка шрифтов и стилей из сторонних ресурсов отключена. Определите для себя резервный шрифт, если выбранные не будет распознаваться почтовым провайдером.
Также в NotiSend есть набор безопасных шрифтов, которые можно использовать.
Не использовать расширенный код
Советуем не пользоваться JavaScript, Flash, HTML5 и CSS3. Так как расширенный код еще не сочетается с email-версткой.
Также не стоит забывать о весе письма, который должен не превышать 102 КБ. После этого показателя почтовый клиент может обрезать письмо.
HTML редактор в NotiSend отлично подходит для создания корректных email-писем, в сервисе есть все необходимое:
- Лёгкость навигации по коду (при клике на элемент перемещаешься к фрагменту html-кода).
- Подсветка синтаксиса, которая упрощает редактирование.
- Можно импортировать готовые шаблоны вместе с изображениями.
- Два редактора в одном (html, wysiwyg).
- Тестирование отображения шаблона перед отправкой (удобно, чтобы исправлять ошибки).
- База писем конкурентов, которые можно использовать и адаптировать под себя или просто для примера.
Техническая информация
Общий список тегов html и css, которые, корректно отображаются в макетах писем.
Примечания поддерживают следующий HTML, но поддерживают только свойства CSS с *.
| UNIVERSALLY SUPPORTED CSS PROPERTIES (INLINE ONLY) | ||
| background | background-color | border |
| border-bottom | border-bottom-color | border-bottom-style |
| border-bottom-width | border-color | border-left |
| border-left-color | border-left-style | border-left-width |
| border-right | border-right-color | border-right-style |
| border-right-width | border-style | border-top |
| border-top-color | border-width | * color |
| * display | * font | * font-family |
| * font-size | * font-style | font-variant |
| font-weight | height | letter-spacing |
| line-height | * list-style-type | padding |
| padding-bottom | padding-left | padding-right |
| padding-top | table-layout | * text-align |
| * text-decoration | text-indent | text-transform |
| vertical-align |
| HTML TAG | ATTRIBUTES (UNIVERSALLY SUPPORTED) |
| a | class, href, id, style, target |
| b | class, id, style |
| br | class, id, style |
| div | align, class, dir, id, style |
| font | class, color, face, id, size, style |
| h1 | align, class, dir, id, style |
| h2 | align, class, dir, id, style |
| h3 | align, class, dir, id, style |
| h4 | align, class, dir, id, style |
| h5 | align, class, dir, id, style |
| h6 | align, class, dir, id, style |
| head | dir, lang |
| hr | align, size, width |
| img | align, border, class, height, hspace, id, src, style, usemap, vspace, width |
| label | class, id, style |
| li | class, dir, id, style, type |
| ol | class, dir, id, style, type |
| p | align, class, dir, id, style |
| span | class, id, style |
| strong | class, id, style |
| table | align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width |
| td | abbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width |
| th | abbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width |
| tr | align, bgcolor, class, dir, id, style, valign |
| u | class, id, style |
| ul | class, dir, id, style |
Список поддерживаемых тегов Mail.ru
amp for email accent-color align-items aspect-ratio @media (orientation) background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size background block-size & inline-size border-image border-inline & border-block individual logical properties border-inline & border-block longhand properties border-inline & border-block border-radius logical properties border-radius border box-shadow box-sizing caption-side column-count css column properties conic-gradient() direction display:flex display:grid display:none display filter flex-direction:column flex-wrap: wrap float font-weight font shorthand clamp() max() min() gap, column-gap, row-gap grid-template-* properties height property hyphens !important keyword inline-size fit-content, min-content, max-content justify-content letter-spacing line-height linear-gradient() list-style-image list-style-position list-style-type list-style margin-block-start & margin-block-end margin-inline & margin-block margin-inline-start & margin-inline-end margin-inline & margin-block max-block-size max-height property max-width min-height property min-inline-size min-width property mix-blend-mode object-fit object-position outline-offset outline overflow-wrap overflow padding-block-start & padding-block-end padding-inline & padding-block padding-inline-start & padding-inline-end padding radial-gradient() rgb() rgba() adjacent sibling combinator chaining selectors child combinator class selector descendant combinator general sibling combinator grouping selectors id selector type selector system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace table-layout text-align-last text-align text-decoration-color text-decoration-thickness text-decoration text-emphasis-position text-emphasis text-overflow text-shadow text-transform text-underline-offset css calc() function ch unit cm unit em unit ex unit in unit initial unit mm unit pc unit % unit pt unit px unit rem unit vh unit vmax unit vmin unit vw unit vertical-align visibility white-space width property word-break writing-mode address align attribute local anchors aria-hidden attribute aria-label attribute aria-labelledby attribute aria-live attribute background attribute <blockquote> element <del> element dir attribute <div> element html5 doctype <h1> to <h6> elements height attribute image maps <input type=»checkbox»> element <input type=»hidden»> element <input type=»radio»> element <input type=»reset»> element <input type=»submit»> element <input type=»text»> element lang attribute <ul>, <ol> and <dl> loading attribute mailto: links <p> element role attribute <select> element <small> element <span> element <strike> element <strong> element <style> element <table> element <textarea> element valign attribute width attribute animated png image format base 64 image format bmp image format gif image format ico image format jpg image format png image format webp image format не поддерживаются bimi animation @font-face @import @keyframes @media (-webkit-device-pixel-ratio) @media (hover), @media (any-hover) @media (prefers-color-scheme) @media (prefers-reduced-motion) @supports font-kerning opacity position :active :checked :first-child :first-of-type :focus :has() :hover lang() :last-child :last-of-type :link :not :nth-child :nth-last-child :nth-last-of-type :nth-of-type :only-child :only-of-type :target :visited ::after ::before ::first-letter ::first-line ::marker ::placeholder universal selector * tab-size transform css variables (custom properties) z-index aria-describedby attribute <audio> element <base> <bdi> element <body> element <dialog> element <form> element <link> element <marquee> element <meter> element <object> element <picture> element <progress> element required attribute <rp> element <rt> element <ruby> element html5 semantics srcset and sizes attributes embedded <svg> image target attribute <video> element <wbr> element avif image format hdr image format heif image format video as image assets ppm image format svg image format tiff image format
