Верстаем responsive emails
Основные правила для верстки писем:
1. Все стили инлайнятся, так как Gmail автоматически вырезается head, а также обертку body, оставляя только ее внутренности.Тем ни менее можно указать основные стили на случай если писем много и править их будет кто-то другой, кто забудет заинлайнить, и в большинстве почтовиках письмо будет смотреться неплохо:
<style media="screen" type="text/css">
* { font-family: Arial, sans-serif; margin:0; padding:0; }
p { font-size: 15px; margin: 15px 0; }
a { color: #0080C6; }
</style>
2. margin и padding
Некоторые почтовые клиенты (Outlook 2007, 2010, 2013 - назовем их семейство Outlook серии 2007; Outlook.com) не понимают свойства margin и padding. Поэтому не рекомендуется использовать тег <p>, так как отдельные почтовики (Outlook.com) могут автоматически добавлять свои отступы, нарушая тем самым верстку.
Предпочтительно использовать <div> в связке <br> для отступов.
3. font-family
Указание font-family (дабы избежать многократного дублирования) на максимально верхнем уровне (следующем после body), но для таблиц в минимальной вложенной (то есть если есть таблица в таблице, то для внутренней таблицы в теге table дополнительно указываем font-family).
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style='font-family:Arial,sans-serif;'>
Это связанно с проблемой в Outlook (семейства 2007), где все неуказанные инлайненые задаются своими по умолчанию (как правило семейством sans).
4. Размер шрифта задается аналогично font-family. При неправильном указании проблемы возникают в Apple mail 7-8, который выставляет по умочанию очень мелкий шрифт.
5. Свойства, которые желательно задавать отдельно в качестве аттрибутов, а не через css:
- bgcolor
- valign / align
- height / width
Пример:
<table bgcolor='#F0F0F0' border="0" cellpadding="0" cellspacing="0"
width="100%">
6. Отступы и чем их делать?
Допустимые варианты задания отступов (вместо margin и padding):
-
- <img src="space.gif" height="0" width="10" />
(однопиксельная картинка с заданными шириной или высотой для растяжки) - <td height="10" width="20"></td>
(пустые ячейки таблицы)
- <div style="font-size:35px;line-height:1;"> </div>
7. Особняком стоят ссылки.
В Gmail по умолчанию все ссылки синего цвета и подчеркнутые, поэтому для каждой из них нужно переопределить эти стили в случае необходимости:
<a href="#" style="color: #0080C6;text-decoration: none;">test</a>
8. Gmail
Так же стоит отметить, что Gmail автоматически преобразовывает URL и email адреса в ссылки.
Как насчет респонсив дизайна:
1. РезиновостьРезиновость задается через медиа-квери с обязательным добавлением "!important".
<style media="only screen and (max-width: 450px)" type="text/css">
@media only screen and (max-width: 450px) {
.logo { height: 19px!important; width: 115px!important; }
.top_space { width: 10px!important; }
}
</style>
Так как Gmail игнорирует стили и теги в head, в нем не будет резиновости, поэтому на него можно не ориентироваться. Как привило, респонсив делаются на ширину в 600px и 320px, но можно указывать и промежуточные варианты.
2. Задача:
скрыть элементы для писем, которые будут показаны только в мобильной версии.
Проблема в Outlook и Gmail. Если для первого достаточно указать в инлайне display: none, то Gmail не поддерживает конструкцию "display: none", зато понимает "display: none !important". Но этом случае (так как стиль заинлайнен) нет возможности перекрыть это свойство для мобильных устройств через медиа квери. Поэтому задача заметно усложняется:
<style media="only screen and (max-width: 600px)" type="text/css">
@media only screen and (max-width: 600px) {
div[class="show_m"] {
display: block!important;
float: none!important;
max-height: inherit!important;
overflow:visible !important;
width: auto!important;
}
}
</style>
<div class="show_m" style="
display: none;
float: left;
max-height: 0;
overflow: hidden;
width: 0;">
Текст, видимый для мобильных устройств
</div>
3. Обратная задача:
Для того, чтобы скрыть что-либо для мобильной версии, можно использовать привычное свойство: display: none!important;
<style media="only screen and (max-width: 600px)" type="text/css">
@media only screen and (max-width: 600px) {
div[class="hide_m"] {
display: none!important
}
}
</style>
<div class="hide_m">
Текст, скрытый для мобильных устройств
</div>
4. Двух- и одноколоночный вариант
Что делать, если нужно из двухколоночного сделать одноколоночный на всю ширину в телефоне?
Существуют два способа, хорошо описанных в статье.
Первый способ очень объемен и не работает в Android 4.2 и iPhone 5-6 (вторая колонка максимально сужается по ширине, но остается в первом ряду, не переходя во второй).
Второй вариант проще, но для семейства 2007 Outlook стоит следить, чтобы колонки не были вплотную, потому что могут перескочить на следующий ряд. Поэтому считаю второй способ более предпочтительным.
5. Еще одна особенность Gmail
Когда письмо достигает размера большего чем 102K, оно автоматически разрезается и добавляется сообщение:
[Message clipped] View entire message
И несколько полезных ссылок о верстке емэйлов:
1. С чего начать? 6 респонсив темплейтов для емэйлов.2. Хабр: Верстка email рассылок от А до Я для чайников
3. Гайд по поддерживаемым свойствам css в почтовых клиентах
4. Повторю: 2 способа как двухколоночный сделать одноколоночным.
5. Верстаем под Gmail: Override Gmail’s Mobile Optimized Emails
Комментарии