От автора: Электронная почта может быть одним из самых мощных средств коммуникации с вашими пользователями и может послужить множеству целей. Вы можете использовать ее как способ привлечь внимание к выбранному контенту (ежемесячные/еженедельные рассылки, «обзор событий года» и т.д.), оказать услугу пользователям (аналитическая разбивка посещений страницы профиля/избранного), или поддержать связь с пользователями (анонсирование нового функционала). Здесь в Artsy, мы используем все эти виды email-рассылок и заметили, что они являются важным ресурсом. Однако, лучшие методики разметки шаблонов и использования CSS (помня о разнообразии устройств и размеров экранов ваших пользователей) очень отличаются и очень сильно отстают от нынешних стандартов HTML5 и методик создания красивых веб-страниц. В этой статье мне хотелось бы представить несколько техник, которые я успешно использовал в Artsy для создания email-шаблонов, которые будут хорошо выглядеть в вашем браузере или на мобильном устройстве, а также в нескольких самых популярных почтовых клиентах.
Основная разница между email и вебом
Фундаментальная разница между email и вебом, которой обязаны практически полностью отличная методология и правила, которым стоит следовать при верстке email-шаблонов, состоит в отображающем клиенте. В 2014 (предполагая, что вы не поддерживаете некоторые устаревшие версии Internet Explorer и старые версии других браузеров), в большинстве случаев браузеры отобразят HTML и CSS в стандартном виде. Хотя есть несколько заметных исключений, тем не менее, постепенное ухудшение поддержки старых версий вполне возможно. Это потому, что единственным «интерпретатором» вашего HTML кода является браузер конечного пользователя, который работает согласно определенному своду правил. С email-письмами, однако, интерпретатором является почтовый клиент, выбранный конечным пользователем, который может быть: нативным приложением iOS, веб-клиентом или даже самостоятельным декстопным приложением. Все они по-своему парсят/интерпретируют email до отображения, из-за чего HTML код, который хорошо смотрится на веб-странице может выглядеть совсем сломанным в email-письме, точно также как и одно и тоже письмо может выглядеть ощутимо по-разному в разных почтовых клиентах. Одной из основных причин, по которой почтовые клиенты так себя ведут, является то, что они убирают элементы, которые могут помешать их работе, либо это связано с безопасностью.
Также обратите внимание на то, что использование JavaScript в email-письмах, конечно же, недопустимо. В добавок, HTML код, который вы отправите пользователям должен быть в одном файле со встроенными стилями. Вы можете использовать такой инструмент как premailer, который позволит вам разрабатывать стили в отдельном файле, а затем сделать их встроенными.
Несколько основных моментов касательно таблиц
Да, на дворе 2014 год и да, мы собираемся поговорить о таблицах в техническом блоге. Это потому, что для email-шаблонов, таблицы будут вашим основным инструментом для позиционирования и расположения контента. Два самых распространенных CSS свойства (position и display) не подходят для использования в email-шаблонах. В большинстве случаев они не поддерживаются почтовыми клиентами (которые перепишут ваш HTML/CSS код) и приведут к неожиданному отображению. Однако, в принципе вы можете добиться любого расположения, используя таблицы.
Вот пример HTML кода, который генерирует верхнюю часть письма, приведенного выше. В то время как использование таблиц может резать глаз, обратите внимание, что мы можем добиться трех-колоночной разметки, с одинаковой шириной колонок и отцентрированными заголовками/текстом без применения позиционирования в CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<table border='0' cellpadding='0' cellspacing='0' style='margin: 0 20px; table-layout: fixed;' width='600px'> <tr> <td align='center' colspan='3' style='padding: 0px 0px 15px' valign='middle'> <font color='black' style='font-family: Georgia, serif;font-size: 16px; line-height: 1.3em; letter-spacing:2px;text-transform:uppercase;'> Cats Galore at the Cat Art Fair 2014 </font> </td> </tr> <tr> <td align='left' style='padding: 0px 0px 15px; border-right: 1px solid grey;' valign='middle'> <font color='black' style='font-family: Georgia, serif;font-size: 16px; line-height: 1.3em;'> <div style='text-align: center; font-size: 23px;'> 24 </div> <div style='text-align: center;'> works in your booth </div> </font> </td> <td align='middle' style='padding: 0px 0px 15px; border-right: 1px solid grey;' valign='middle'> <font color='black' style='font-family: Georgia, serif;font-size: 16px; line-height: 1.3em;'> <div style='text-align: center; font-size: 23px;'> 3,086 </div> <div style='text-align: center;'> total artwork views </div> </font> </td> <td align='right' valign='middle'> <font color='black' style='font-family: Georgia, serif;font-size: 16px; line-height: 1.3em;'> <div style='text-align: center; font-size: 23px;'> 471 </div> <div style='text-align: center;'> cities reached </div> </font> </td> </tr> <!-- остальной контент --> </table> |
Затем мы приводим тепловую карту и таблицу наибольшего числа просмотров по городам. Для этого мы используем ту же трех-колоночную таблицу, колонке, которая содержит тепловую карту мы задаем colspan со значением 2. Это для того, чтобы область занимаемая картой соответствовала двум колонкам верхней части, а в оставшейся колонке будет размещена таблица просмотров. Вот этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<tr> <td align='left' colspan='2' style='padding: 0px 0px 15pxl; width: 66%;' valign='middle'> <div> <img src='link_to_heatmap.png' width='400px'> </div> </td> <td align='right' style='padding: 0px 23px 15px; width: 33%; text-align:left;' valign='middle'> <font color='black' style='font-family: Georgia, serif;font-size: 12px; line-height: 1.3em; font-weight:bold;'> Top 10 Cities </font> <font color='black' style='font-family: Georgia, serif;font-size: 12px; line-height: 1.3em;'> New York 21.66% <br> London 3.34% <br> <!-- 'br'служит для переноса числа просмотров на новую строку --> </font> </td> </tr> |
Обратите внимание, что мы не используем ни позиционирование, ни свойство display в CSS. Однако, теперь в нашей таблице есть секция в 3 колонки и секция в 2 колонки и мы уже практически создали симпатичный email-шаблон! Я использовал строки в одной таблице, но мог бы и вложить одну таблицу в другую, это не имело бы отрицательных эффектов и почти никак не повлияло бы на верстку. В зависимости от вашего дизайна и разметки, вы можете использовать несколько таблиц (вложенных или нет) для поддержки разной ширины и количества колонок, и они все будут работать.
Фоновые изображения и текст, наложенный поверх изображений
Итак, таблицы хороши и вы можете многого добиться, используя их, без необходимости применять свойства CSS display или position. Но что если вам нужно поместить текст поверх изображения? (или даже второе изображение поверх первого?) Есть множество способов добиться подобного эффекта, но все они используют CSS и их не стоит использовать при верстке email-шаблонов (в частности: position, display, top, right, bottom, left, а также большинство свойств разметки кроме padding. Также не задавайте свойству padding отрицательное значение.) Не беспокойтесь, вы можете добиться нужного вида, используя фоновые изображения.
Вот, например шаблон письма, которое наши пользователи получают при регистрации:
Верхняя часть (фото iPhone) в действительности состоит из двух изображений (фото и иконка App Store), а также сам текст поверх изображения. Вот HTML код шаблона:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table cellpadding='0' cellspacing='0' id='iphone-table' style='border: 0;padding:10px 0px 15px 0px;width:625px' width='625'> <tr> <td align='left' valign='middle'> <table background='link_to_phone.png' cellpadding='0' cellspacing='0' height='265' style='height:265px;width:625px' width='625'> <tr> <td style='padding-top:57px;padding-right:53px;padding-left:375px;text-align:center;'> <div style='line-height:26px;'> <font style='text-transform: uppercase; font-size: 19px; font-family: Georgia, serif; color: white;-webkit-font-smoothing:antialiased;'> Download Artsy for iPhone </font> </div> <div style='padding-top:10px;'> <font style='font-size: 14px; font-family: Georgia, serif; color: white;-webkit-font-smoothing:antialiased;'> The art world in your pocket. </font> </div> </td> </tr> <tr> <td align='right' style='padding-right:82px;vertical-align:top;'> <a href='//itunes.apple.com/us/app/artsy-art-world-in-your-pocket/id703796080?ls=1&mt=8'> <img src='app_store.png' style='border: none; outline: none; vertical-align:top;' width='140px'> </a> </td> </tr> </table> </td> </tr> </table> |
Я решил использовать отдельную таблицу для этого контента, фоном которой является фото айфона в руке. В этой таблице 2 строки с одной колонкой для каждой. Первая строка, соответствующая верхней части изображения, содержит текст белого цвета “Download”, который позиционируется внутри колонки с помощью свойства padding, который хорошо поддерживается большинством почтовых клиентов (до тех пор пока оно имеет положительное значение!) Во второй строке, поверх нижней части фонового изображения, находится иконка с логотипом ‘Download on the App Store’, иконка обернута тэгом со ссылкой, ведущей в App Store. Также вы могли бы сделать эту иконку фоновым изображением и еще добавить какой-либо текст.
Важно знать, что единственная возможность поместить текст либо другое изображение поверх одного изображения – это использование фонового изображения (background-image).
Отзывчивость при просмотре с мобильных устройств
К этому моменту мы узнали, как создавать «динамичные» макеты (несколько колонок, боковая панель) и можем накладывать текст и изображения для дополнительного эффекта. Теперь разберемся с тем, как это будет выглядеть на мобильном устройстве. Медиа запросы будут наши основным инструментом (они хорошо поддерживаются мобильными почтовыми клиентами, за заметным исключением клиента Gmail под iOS).
Стоит помнить, что в зависимость от вашего случая применения, в принципе стоит разрабатывать дизайн с точки зрения концепции mobile first ( мобильные устройства в первую очередь). Это означает использование относительно больших шрифтов в макете, а также одни либо две колонки максимум для вашего контента. Так как размер экрана мобильного устройства значительно меньше, соответственно, меньше и пространство для размещения контента, медиа запросы, которые будут использованы, будут в основном увеличивать размер шрифтов и использовать with и float, чтобы (например) чтобы двух-колоночная разметка показывалась в одну колонку. В зависимости от дизайна вашего шаблона это может быть просто, либо достаточно сложно и это стоит учитывать в первоначальном дизайне.
Первым делом нужно поместить следующий код в meta тэг вашего HTML шаблона.
|
1 |
<meta name='viewport' content='width=device-width, initial-scale=1.0'> |
Это сообщит браузеру, что размер окна просмотра соответствует размеру экрана используемого устройства. В сочетании с медиа запросами это позволит нам создавать email-шаблоны под мобильные устройства.
В качестве примера, посмотрите на следующие два изображения. Это верхняя часть персонализированного письма еженедельной рассылки (блог пост о том как эффективно мы используем подобные практики), на первом снимке изображена десктопная версия письма, на втором – мобильная.
Верстка этого письма достаточно стандартна (похожа на ту таблицу для 3х-колоночной разметки). Для мобильных устройств мы хотим выровнять весь контент по левому краю и сжать его в одну колонку. Стоит заметить, что мы обрезаем текст с помощью значения ellipsis в десктопной версии, и когда весь контент помещается в одну колонку, у нас остается место, чтобы показать текст (но он все равно обрезается), поэтому нам нужно заключить текст в div (для обрезки нужен блочный элемент)
Вот как мы обрезаем текст:
|
1 2 3 |
<div id='row-to-expand' style='white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:150px;'> Some really long text that will get truncated </div> |
Мы задаем ширину блочному элементу и применяем значение ellipsis. Вот еще один снимок экрана, показывающий обрезку в действии:
Наш первый медиа запрос может быть чем-то вроде:
|
1 2 3 4 5 |
@media (max-device-width: 320px){ div[id='row-to-expand']{ width: 260px !important; } } |
Мы задали лимит в 320px (размер экрана iPhone в вертикальном положении), и ширину, меньшую либо равную ему, это правило сыграет свою роль. Обратите внимание, что ‘!important’ в конце (все наши медиа запросы будут содержать это значение для того, чтобы они перекрывали встроенные стили). Этого достаточно чтобы сделать div шире и показать больше текста.
Вот код медиа запросов для оставшейся части этой секции, который трансформирует 3 колонки в одну:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media (max-device-width: 320px){ td[id='summary-col']{ float: left !important; } td[id='summary-header']{ float: right !important; width: 300px !important; } td[id='nested-summary-col']{ width: 300px !important; float: left !important; padding: 0px !important; } table[id='summary']{ width: 300px !important; } } |
Там, где td[id=’nested-summary-col’] находятся элементы td, которые содержат миниатюру и имя художника или название галереи. По большому счету, все, что мы делаем – это меняет ширину родительской таблицы на 300px, а затем задаем аналогичную ширину в 300px каждой ячейке td и добавляем свойство float. Это легко превратит вашу таблицу в одно-колоночную разметку.
Несколько приемов в верстке email-шаблонов
Иногда необходимо спрятать/показать некоторый контент в зависимости от того, мобильное устройство используется либо настольный компьютер. Такое действие может вызвать затруднения за неимением возможности использовать display:none; вот несколько приемов, которые мне подошли:
width: 0px; (works for hiding images) (подходит если нужно спрятать картинку)
line-height: 0px; (works for hiding text) (подходит, чтобы спрятать текст)
font-size: 0px; (works for hiding text) (поможет скрыть текст)
Еще один факт, с которым вы столкнетесь, это цвет ссылок, который в электронных письмах автоматически становится синим. Так происходит потому, что многие почтовые клиенты по умолчанию делают ссылки синими, даже если им не заданы стили, либо задан черный цвет. Простой прием избежать этого – явно задавать вашим ссылкам цвет вроде ‘#000001’. Этот «почти черный» цвет будет оставлен без изменения почтовыми клиентами, в то же время он достаточно близок к черному, что разница невооруженному глазу неочевидна.
Вот снимок экрана, где используется библиотека isotope, который помогает добиться разметки похожей на Pinterest, с обрезкой текста и размерами, измененными под мобильные устройства (здесь присутствует масса уловок):
Вот руководство, которое я использую при подготовке работ для колоночной разметки подобной этой. Вы передаете коллекцию работ (где каждая работа имеет произвольный размер), количество колонок и желаемую ширину. Она вернет вам работы, сгруппированные в колонки, которые могут отображаться в письме, соблюдая размеры и приблизительно одинаковую высоту колонок – в результате получается разметка с эффектом динамики. Для этого письма мы группируем этот набор работ в 2 колонки, ширина каждой колонки 300px для настольных компьютеров.
Отличные инструменты для использования:
Premailer Эта библиотека позволит вам писать CSS код обычным (т.е. не встроенным) способом, а затем при генерации/компиляции встроить его в документ.
Litmus, используя виртуальные машины Litmus с разными операционными системами и почтовыми клиентами, вы можете просмотреть как образец письма будет выглядеть при различных конфигурациях. Я советую выяснить на какие почтовые клиенты/браузеры/операционные системы вы ориентируетесь и убедиться, что вы протестируете все шаблоны для них.
Haml (или другой язык шаблонизации на выбор).Многие блоки контента в наших письмах генерируются динамически, и синтаксис Haml, позволяющий циклы и условия, а также стиль строковых вычислений, похожий на Ruby, оказались незаменимыми.
На этом все! Посредством множества проб и ошибок я создал комплект инструментов, техник и хаков, к которым я прибегал для того, чтобы быстро разрабатывать отзывчивые и симпатичные email-шаблоны. Я вижу ограниченный набор инструментов в распоряжении как некоторого рода загадку, посредством решения которой вы все равно можете создавать разметку для своего контента, которая отлично выглядит, будучи отзывчивой. Предпросомтр email-шаблонов с помощью Inbox Inspector позволил мне с уверенностью создавать, развертывать и отправлять письма пользователям.
Автор: Matt Zikherman
Источник: //artsy.github.io/
Редакция: Команда webformyself.
Комментарии (1)