Содержание
- Что такое HTML и CSS по-русски
- Создание адаптивных шаблонов с колонками «от двух к одной»
- Как отреагировала команда
- Адаптивная верстка
- Обязательные свойства для HTML-тегов
- Верстаем мобильные письма
- Боевое применение нового плагина для Фигмы
- Верстка HTML-писем
- Базовые правила HTML верстки писем для E-Mail рассылки
- Проблемы при рассылках на Gmail и Hotmail
Что такое HTML и CSS по-русски
В двух словах, HTML — строительный материал для веб-страниц, язык разметки. Он состоит из специальных тегов, которые содержат команды для браузера:
- <title> … </title> — название документа
- <a> … </a> — чтобы вставить ссылку
- <img> … </img> — чтобы вставить картинку
- <head> … </head> — содержит команды, которые объясняют почтовым движкам, как отображать письмо
- <body> … </body> — обозначает видимое содержание страницы
Существует множество других тегов для различных команд. Полный список можно посмотреть здесь.
Обычно теги открываются <> и закрываются </> — это попарные. Если в этой статье вы увидите незакрытые теги, они относятся к одиночным. Например: <img> и <br>.
Теги диктуют команды, на основе которых строится содержимое страниц.
Язык стилей CSS добавляет на страницу эффекты, анимацию и прочую красоту. CSS мы прописываем в HTML-коде через внутренний (inline) стиль или ссылаемся на сторонние классы стилей.
1 — задаем CSS через внутренний стиль; 2 — через сторонние классы стилей
Также теги HTML могут ссылаться на контейнер с CSS, который находится на другом сайте. Но если вы затеваете масштабную и длительную работу с ручной версткой, лучше загрузить все необходимое на свой сервер.
Чтобы сверстать рассылку, мало знать базовые правила HTML и CSS. Вы можете создать идеальное письмо и отправить его покорять интернет, но почтовым графическим движкам не понравится, как вписаны атрибуты, и все «полетит». Чтобы рассылочное письмо максимально точно передало ваши мысли и дизайн, рассмотрим базовые правила верстки HTML-рассылки и сложные, но важные нюансы, которые нужно обязательно учитывать.
Создание адаптивных шаблонов с колонками «от двух к одной»
Использование одноколоночных шаблонов — хороший выход при оптимизации рассылки для мобильных устройств. При этом существуют способы по созданию адаптивных двухколоночных шаблонов, без необходимости использования длинных CSS в media queries.
Двухколоночный шаблон позволяет поместить больше контента в верхнюю часть сообщения, отображаемого в десктоп- или веб-почтовых клиентах, но читать и перемещаться по таким письмам на мобильных устройствах — то еще удовольствие. Исправить это можно с помощью старого доброго кода.
Золотое правило вёрстки писем гласит: «Везде, где только можно, используйте HTML вместо CSS». Степень поддержки CSS различными почтовыми клиентами может значительно различаться, но все они одинаково работают с HTML. Например, атрибуты вроде align=”left” и cellpadding=”10” — гораздо более надежный инструмент, нежели их аналоги в CSS float: left; и padding: 10px;. Именно эти атрибуты будут использоваться при создании писем в формате «от двух к одной колонке».
Вот так подобное письмо может выглядеть в Outlook 2007:
В пример выше использована таблица-контейнер шириной 640px, которая содержит две таблицы 320px, формирующие колонки. У этих столбцов cellpadding=”20“ — это сделано для того, чтобы контент не прижимался к границам.
При вёрстке для веба обычно используют float:left;, чтобы выровнять столбцы. Однако вместо этого можно использоватьalign=”left”. Поскольку ширина таблицы-контейнера равняется или больше совокупной ширины двух вложенных таблиц, то использование HTML хорошо сработает. Ниже представлен упрощенный код подобного двухколоночного шаблона:
<table width="640" border="0" cellpadding="0" cellspacing="0"><tr> <td> <table width="320" border="0" cellspacing="0" cellpadding="20" align="left"> <tr> <td><p>Column Left Content</p></td> </tr> </table> <table width="320" border="0" cellspacing="0" cellpadding="20" align="right"> <tr> <td><p>Column Right Content</p></td> </tr> </table> </td> </tr></table>
Результат выглядит так:
Таблица-контейнер шириной 640 пикселей, так что шаблон будет двухколоночным. Но в том случае, если ширина экране меньше этого, то контент правой колонки будет «завернут» под левую. Если сделать ширину вложенных таблиц равной 320 пикселям, то при отображении на мобильном устройстве будет получаться одноколоночное письмо, которое совсем не нужно «зумить». Добиться такого эффекта можно с помощью добавления одной строки media query в HTML-код:
<style type="text/css"> @media only screen and (max-device-width: 480px) { table { width:320px !important; } }</style><table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">
В результате получится адаптивный шаблон, который будет двухколоночным на десктопе и одноколоночным на мобильных устройствах (в дефолтном приложении Mail для iPhone и почтовом клиенте Android).
Как отреагировала команда
Что говорит дизайнер
Андрей Ведерников, дизайнер Creative Soldiers:
Фигма — простой графический редактор без излишеств, у неё нет, как в Фотошопе, множества функций. Но, несмотря на простоту Фигмы, в неё удалось добавить сложный плагин, от которого наши дизайнеры, верстальщики и разработчики до сих пор под впечатлением. Он генерирует html-код для писем прямо из дизайн-макета.
Подойдёт не любой дизайн-макет, а только тот, который сделан по правилам разработчика плагина. В гайде к Marka описаны основные функции плагина для Фигмы и даны подробные разъяснения про его работу. Но главное, что нужно для успешной работы с Marka, — практика. Мы до сих пор открываем для себя особенности этого инструмента.
Работая с Marka, нужно мыслить блочно, создавать блочную модель исходного макета. И в этом плагине всё идёт в работу, каждая кнопочка несёт свою функцию и каждая функция плагина привязана к какому-то элементу интерфейса.
Можно загружать любые изображения, любой текст — всё автоматически переходит в код.
Раньше при сборке мастер-шаблона, чтобы что-то там изменить, необходимо было идти в код. То есть клиент вносит правки текстом или другим образом, а верстальщик идёт в код и правит. Сейчас клиент самостоятельно заходит в макет и меняет его.
Подводные камни нового плагина для Фигмы
Особенности плагина обнаруживаются, в большинстве своём, методом проб и ошибок.
Можно изучить гайд для разработчиков, но что-то придётся открывать напрямую в работе. Например, в письмах задан кёрнинг (расстояние между буквами) в 3%, а плагин для Фигмы не считал эту информацию. Приходится поправлять руками.
Ещё пример: мобильная версия рассылок работает не так, как на сайтах, и в Marka есть возможность перенести картинку на следующую строку мобильной версии, тогда как в веб-версии картинки расположены на одной строке. Обнаружили это тоже только на практике.
Плюсы Marka
Здесь я вижу один весомый плюс, который перевешивает все недостатки: с новым плагином всё делается быстрее — и дизайн, и вёрстка электронных писем, при этом дизайнер может выступать в роли верстальщика, не затрагивая вёрстку.
Что говорит менеджер
Я часто занимаюсь задачами, связанными с мастер-шаблонами, и создание таких шаблонов отнимает много времени у команды. Новый плагин для Фигмы помогает отказаться от работы верстальщиков, а по качеству исполнения не уступает результату работы специалиста.
Marka отлично подойдёт клиентам, у которых нет верстальщика в штате.
Плагин для Фигмы гораздо эффективнее классических блочных редакторов: у последних много ограничений при подготовке письма.
Адаптивная верстка
На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них. Суть данного метода заключается в следующем: при изменении ширины экрана устройства размер нашего письмо автоматически подстраивается. Внутренние блоки, которые располагаются горизонтально, при нехватки места прыгают друг под друга, таким образом все элементы письма, которым не хватает, будут уходить вниз. Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом :
Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег со стилями:
Общая структура разметки будет выглядеть следующим образом:
Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер #2 становится под блоком номер #1. Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега и подставлять обычные таблицы:
Можно использовать правило для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.
Какие клиенты поддерживают media queries, а какие нет:
Обязательные свойства для HTML-тегов
Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем. Их нужно использовать всегда во всех html тегах письма.
- — толщина рамки в пикселях;
- — отступ от рамки до содержимого ячейки;
- — расстояние между ячейками;
- — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:
- — всегда используем эти свойства для всех ссылок и , иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
- — тоже используем для всех ссылок и span, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
- — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
- — делает строчный элемент блочным:
- — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
- — толщина рамки в пикселях (px);
- — ширина картинки. Если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту . Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства и она будет пропорционально менять и высоту и ширину;
- — хак для Outlook, если не ставить display:block то Outlook добавит к картинке отступы.
Верстаем мобильные письма
Когда речь идет о мобильных стилях, чаще всего подразумевается не отдельный файл стилей, а media queries. Вот так они выглядят:
<style type="text/css"> @media only screen and (max-device-width: 480px) { /* сюда пишутся стили для мобильных платформ */ } /* сюда пишется CSS для десктопа */</style>
Давайте повнимательнее разберемся с тем, как происходит объявление @media. Прежде всего, чтобы создать «мобильный» CSS нужно реализовать какой-то критерий, помощью которого почтовый клиент будет определять какие стили использовать.
Для этого используется оператор @media only screen — он показывает, что почтовый клиент должен быть отображен на экране (вместо того, чтобы, к примеру, быть напечатанным на принтере). После этого в примере кода выше мы задали максимальную ширину экрана устройства в 480 пикселей
Это важно, поскольку у многих (но не у всех) мобильных устройств область отображения данных на экране составляет 480 пикселей или меньше
Поэтому часто используют max-device-width: 480px (это также ширина дисплея предыдущих моделей iPhone в ландшафтном режиме), но можно и расширить описание, чтобы охватить другие размеры экрана:
@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }
В этом примере использован к HTML-таблицам, содержащим текст и изображения, применен класс contenttable. Вот образец кода:
<style type="text/css"> @media only screen and (max-device-width: 480px) { /* сюда пишутся мобильные CSS-стили */ table { width: 320px !important; } } /* regular CSS styles go here */ table.contenttable { width: 640px; }</style>
Этот класс играет интересную роль — когда письмо открывают на устройстве с экраном в 480 пикселей или шире, он ни на что не влияет. Однако, когда экран 480 или меньше, то он сужает ширину таблиц до 320 пикселей. Для того, чтобы избежать необычного глюка в почте Yahoo, использованы селекторы атрибутов. В противном случае используется «обычный» CSS. Кроме того, можно включить и такие объявления:
@media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ table { width: 325px !important; } img { width: 325px !important; } p { display: none !important; }}
Далее мы рассмотрим более сложные техники адаптации мобильных писем для мобильных устройств.
Боевое применение нового плагина для Фигмы
Летом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.
Одним из первых заказчиков, для которых мы использовали новый инструмент, стал туроператор «Алеан».
Ещё одна работа — письма для агентства i-Media:
Красиво сверстаем ваши письма
Агентство интернет-рекламы i-Media
Мария Гудкова, маркетолог i-Media:
До внедрения плагина отправка рассылки запускала долгий процесс подготовки, от которого становилось немного дурно. Сначала отрисовка уникального дизайна, потом вёрстка писем, потом опять мы бежали к дизайнеру, потому что на тестах какой-нибудь элемент стремился занять не своё место. В общем, каждый раз мы испытывали себя на терпимость.
Пару месяцев назад мы одними из первых попробовали плагин Marka Pro и, если честно, очень сомневались и переживали. Думали, что ручной труд профессионального верстальщика заменить невозможно. Но мы попробовали и не пожалели.
Верстка HTML-писем
Шаблоны HTML-писем
Верстка писем для большинства непривычна и сложна, а первые письма получаются угловатыми и неуклюжими. К счастью, мир не без добрых людей и существуют бесплатные шаблоны, которые значительно облегчают верстку. Но если вы бесстрашный ниндзя и любите вызовы, или просто хотите уникальный дизайн, то создание собственного шаблона может принести пользу и даже радость. Ниже я подобрал несколько мест с бесплатными шаблонами, которые облегчат ваш путь:
- Универсальный, простой отзывчивый шаблон электронной почты.
- Litmus.com — можно найти отличные бесплатные адаптивные шаблоны под разные нужды.
- Отзывчивые транзакционные HTML шаблоны электронной почты.
- Cerberus — хорошая подборка адаптивных шаблонов.
- Responsiveemailpatterns.com — коллекция шаблонов и модулей для адаптивных писем.
Советую не начинать с чистого листа, а присмотреться к какому-нибудь шаблону и постепенно делать из него что-то уникально и красивое.
Базовые правила верстки HTML-писем
- вместо . Используя табличную верстку, вы избежите множества проблем с некорректным отображением вашего письма в разных почтовых клиента и браузерах. Табличная верстка правила в интернете долгое время благодаря корректному отображению в разных браузерах и большому числу параметров управляющих видом таблиц.
- Используйте универсальные атрибуты HTML-тегов и универсальные CSS-свойства.
- вместо ,
- вместо ,
- CSS2 вместо CSS3,
- HTML4 вместо HTML5,
- вместо ,
- HTML-атрибуты вместо CSS.
-
Встроенные (Inline) CSS вместо внешних .css файлов. Конечно, верстать такое не очень удобно, возникают сложности с проверкой и корректировкой кода. Но, на наше счастье, существуют сервисы по автоматическому переводу всех стилей во встроенные.
- Premailer.io
- inlinestyler.torchbox.com
Пример встроенного стиля
- Ширину всего документа в 600px. Это обезопасит ваших читателей от горизонтальной прокрутки. Вместо этого можно сделать письмо адаптивным.
- Задавайте таблицам атрибуты .
- Лучше всего использовать стандартные шрифты (Helvetica, Arial) имеющиеся на любом устройстве.
Вы можете свободно игнорировать некоторые правила верстки в угоду удобству и красоты, но нужно понимать, что пользователь может увидеть что-то совсем отличное от того, что вы хотели предложить.
Странные отступы
Для организации отступов можно использовать пустые конструкции и
Для вертикального отступа:
<div style="height: 10px; font-size: 10px; line-height: 11px;"> </div>
Для горизонтального отступа:
<td width="23" style="width: 23px; max-width: 23px; min-width: 23px;"> </td>
Но также можно применить padding к ячейке таблицы:
<td style="padding: 23px;"></td>
Верстка кнопок для HTML-писем
И тут тоже есть свои подводные камни. Обычным способом, к сожалению, кнопку не сделать, почтовый клиент может не принять такой код и вырежет его. Я нашёл два решения этой проблемы.
Первое решение завязано на хитром использовании все тех же таблиц. Выглядит красиво и адаптивно.
Показать / Скрыть пример
See the Pen Кнопки 1 by Ivanov Klim on CodePen.
Второе решение завязано на использовании Vector Markup Language (VML)— языка векторной разметки. На сайте buttons.cm можно самостоятельно сделать кнопку на этом языке.
Показать / Скрыть пример
See the Pen Кнопка 2 by Ivanov Klim on CodePen.
HTML-письма, фоновое изображение
Фоновое изображение лучше всего также накладывать с помощью VML. Существует схожий с кнопками онлайн-сервис создания фонового изображения. Ниже можно посмотреть пример реализации функционала сервиса с некоторыми изменениями для придания вида письма.
Показать / Скрыть пример
See the Pen Письмо странным людям by Ivanov Klim (@DreamerKlim) on CodePen.
Базовые правила HTML верстки писем для E-Mail рассылки
Несколько примеров почтовых клиентов:
- веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo и т.д.)
- десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
- мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad и т.д.)
К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).
Табличная верстка.
Верстая таблицами и забыв про блочную верстку, вы однозначно убережете себя от проблем со старыми почтовыми клиентами. Также, не стоит забывать, что веб-версии у почтовых провайдеров могут открываться в самых разнообразных браузерах, вполне возможно, даже в IE 6.0. Таблицы помогут вам быть аккуратными и красивыми везде одинаково.
Использовать универсально-поддерживаемые аттрибуты у HTML-тегов.
| Тэг | Аттрибуты |
|---|---|
| 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 |
Использовать универсально-поддерживаемые CSS-свойства
| CSS Свойства (строго Inline) | ||
|---|---|---|
| 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 | width |
Использование CSS строго Inline.
Забудьте про блочные css в начале документа. Только inline-стили. Конечно, это может вызвать геморрой при ручном приведении html-документа в порядок, но устранения подобных проблем существует сервис Печкин, который предлагает автоматический CSS-inliner, в рамках проекта Печкин.Лаборатория.
Желательно использовать ширину всего документа в 600px.
Задайте максимальную ширину в 600 пикселей и обезопасьте себя от гневных отзывов о горизонтальной прокрутке в почтовых клиентах ваших подписчиков.
Использование этих правил позволит вам создать универсально отображаемую HTML-версию своего письма, а, значит, все ваши подписчики будут удовлетворены ее внешним видом без исключений!
В данном материале использованы сервисы Печкин.Лаборатории, в которой вы можете найти инструменты для автоматизации верстки, создания текстовых версий письма и других вещей.
- 2.91
Голосов: 1355 | Просмотров: 5025
Проблемы при рассылках на Gmail и Hotmail
В этих популярных почтовых клиентах часто проявляются различные эффекты при отображении рассылок. Иногда их стиль отличаются в различных браузерах – Safari, Chrome или Firefox.
В них изображения передаются блочными элементами, поэтому необходимо добавить не только в CSS, но и в тег <img> параметр style=display:block. Если картинка встраивается в текст (это может быть значок после ссылки в тексте), необходимо указывать style=display:inline.
Фоновые изображения, атрибуты alt и изображения в Gmail и в Hotmail – аспекты, которым следует уделить особое внимание при верстке электронных писем
- При добавлении изображения, у него обязательно должен быть прописан атрибут border=0, а если изображение обернуто ссылкой, то для тега ссылки должно быть прописано свойство border:none (если не сделать последнего, то в некоторых клиентах вокруг картинки может отображаться синяя рамка).
- Формат gif лучше всего подходит для штрихованной графики и простых графических элементов.
- Формат jpeg лучше всего подходит для насыщенных, многослойных и фотографических элементов. Качество изображений, экспортируемых в формате jpeg¸ как правило, должно составлять 60% от изначального качества. В некоторых случаях вам прийдется увеличить качество до 75% для устранения помех изображения.
- Формат png лучше всего подходит для изображений с высокой прозрачностью.
Для встраивания изображений в текст (например, изображение стрелки после текстовой ссылки), вы должны включить style=display: inline; instead of display:block; <a href=https://site.com>
Здесь будет ссылка со стрелкой в конце <img scr=arrow.gif width=12 height=12 style=display:inline; border:0;></a>
Краткие выводы
Подведем некоторые итоги по вставке картинок в письма:
- Картинки улучшают внешний вид и результативность рассылок при правильном использовании.
- Верстка должна быть адаптивной, чтобы страница отображалась на экране мобильного устройства (без дополнительного сжатия).
- Формат используемых картинок должен соответствовать поставленным задачам (преимущественно .PNG или .JPEG).
- Шрифт подписи на картинке должен быть крупным, четким и контрастным.
- Картинка должна иметь размер, соответствующий шаблону (до 600рх шириной).
- При использовании картинки в качестве фона нужно учитывать видимость на ней текста, а также обеспечить альтернативное цветовое заполнение.
- Обязательно следует указать альтернативный текст (небольшого размера) в теге ALT.
- При вписывании картинки в ячейку таблицы необходимо соблюдать ряд правил.
- При установке на картинку ссылки требуется предусмотреть правила линковки и убрать окантовку при наведении.
- Нужно учитывать особенности стилевого оформления в Gmail и Hotmail.
При соблюдении этих рекомендаций ваши рассылки станут более эффективными и прибыльными!
Еще подборка полезных ссылок:
- Правила вёрстки email-писем – статья на хабре.
- Основы профессиональной верстки электронных писем.
- Инструмент проверки разметки в письмах
Похожие записи:
Регистрация на wildberries, внесение изменений после регистрации
Часовые пояса россии
Личный кабинет paylate: пошаговый процесс регистрации, оформление кредита на покупку
Согласование вывески на фасаде здания в москве
Как писать диалоги: шпаргалка для писателей
Что умеют умные линзы и когда они войдут в нашу жизнь