Кілька рад по розмітці і чуйності email-листів

22

Від автора: Електронна пошта може бути одним з найбільш потужних засобів комунікації з вашими користувачами і може послужити безлічі цілей. Ви можете використовувати її як спосіб привернути увагу до обраного контенту (щомісячні/щотижневі розсилки, «огляд подій року» тощо), надати послугу користувачам (аналітична розбивка відвідувань сторінки профілю/обраного), або підтримати зв’язок з користувачами (анонсування нового функціоналу). Тут в Artsy, ми використовуємо всі ці види email розсилок і помітили, що вони є важливим ресурсом. Однак, кращі методики розмітки шаблонів і використання CSS (пам’ятаючи про різноманітність пристроїв і розмірів екранів ваших користувачів) дуже відрізняються і дуже сильно відстають від нинішніх стандартів HTML5 і методик створення красивих веб-сторінок. У цій статті мені хотілося б представити кілька технік, які я успішно використовував у Artsy для створення email-шаблонів, які будуть добре виглядати у вашому браузері або на мобільному пристрої, а також в декількох найбільш популярних поштових клієнтів.

Кілька рад по розмітці і чуйності 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.

Cats Galore at the Cat Art Fair 2014
24
works
in your booth
3,086
total artwork views
471
cities reached

Потім ми наводимо теплову карту і таблицю найбільшого числа переглядів по містах. Для цього ми використовуємо ту ж трьох-колонкову таблицю, колонки, яка містить теплову карту ми задаємо colspan = 2. Це для того, щоб область займана картою відповідала двом динамікам верхній частині, а решти колонці буде розміщена таблиця переглядів. Ось цей код:

Кілька рад по розмітці і чуйності email-листів
Top 10 Cities
New York
21.66%

London
3.34%

Зверніть увагу, що ми не використовуємо ні позиціонування, ні властивість display в CSS. Однак, тепер в нашій таблиці є секція в 3 колонки і секція в 2 колонки і ми вже практично створили симпатичний email-шаблон! Я використовував рядки в одній таблиці, але міг би і вкласти одну таблицю в іншу, це не мало б негативних ефектів і майже ніяк не вплинуло б на верстку. В залежності від вашого дизайну та розмітки, ви можете використовувати кілька таблиць (вкладених) для підтримки різної ширини й кількості колонок, і вони всі будуть працювати.

Фонові зображення і текст, накладений поверх зображень

Отже, таблиці гарні і ви можете багато чого домогтися, використовуючи їх, без необхідності застосовувати властивості CSS display або position. Але що, якщо вам потрібно помістити текст поверх зображення? (або навіть друге зображення поверх першого?) Є безліч способів добитися подібного ефекту, але всі вони використовують CSS і їх не варто використовувати при верстці email-шаблонів (зокрема: position, display, top, right, bottom, left, а також більшість властивостей розмітки крім padding. Також не ставте властивості padding від’ємне значення.) Не турбуйтеся, ви можете добитися потрібного виду, використовуючи фонові зображення.

Ось, наприклад шаблон листа, яке наші користувачі отримують при реєстрації:

Кілька рад по розмітці і чуйності email-листів

Верхня частина (фото iPhone) насправді складається з двох зображень (фото і іконка App Store), а також сам текст поверх зображення. Ось HTML код шаблону:

Download Artsy for iPhone
The art world in your pocket.
Кілька рад по розмітці і чуйності email-листів

Я вирішив використовувати окрему таблицю для цього контенту, фоном якої є фото айфона в руці. У цій таблиці 2 рядки з однією колонкою для кожної. Перша рядок, що відповідає верхній частині зображення, містить текст білого кольору «Download», який позиціонується всередині колонки з допомогою властивості padding, який добре підтримується більшістю поштових клієнтів (до тих пір, поки воно має позитивне значення!) У другому рядку, поверх нижньої частини фонового зображення, знаходиться іконка з логотипом ‘Download on the App Store’, іконка обгорнута тегом з посиланням, що веде в App Store. Також ви могли б зробити цю іконку фоновим зображенням і ще додати який-небудь текст.

Важливо знати, що єдина можливість помістити текст або інше зображення поверх одного зображення – це використання фонового зображення (background-image).

Чутливість при перегляді з мобільних пристроїв

До цього моменту ми дізналися, як створювати динамічні макети (кілька колонок, бічна панель) і можемо накладати текст і зображення для додаткового ефекту. Тепер розберемося з тим, як це буде виглядати на мобільному пристрої. Медіа запити будуть наші основним інструментом (вони добре підтримується мобільними поштовими клієнтами, за помітним винятком клієнта Gmail під iOS).

Варто пам’ятати, що у залежність від вашого випадку застосування, в принципі варто розробляти дизайн з точки зору концепції mobile first ( мобільні пристрої в першу чергу). Це означає використання відносно великих шрифтів в макеті, а також одні або дві колонки максимум для вашого контенту. Так як розмір екрану мобільного пристрою значно менше, відповідно, менше і простір для розміщення контенту медіа запити, які будуть використані, в основному збільшувати розмір шрифтів і використовувати with і float, щоб (наприклад) для двох-колоночная розмітка показувалася в одну колонку. Залежно від дизайну вашого шаблону це може бути просто, або досить складно, і це варто враховувати в первісному дизайні.

Першим ділом потрібно помістити наступний код в meta тег вашого HTML шаблону.

Це повідомить браузеру, що розмір вікна перегляду відповідає розміру екрана пристрою. У поєднанні з медіа запитами це дозволить нам створювати email-шаблони під мобільні пристрої.

Як приклад, подивіться на наступні два зображення. Це верхня частина персоналізованого листа щотижневої розсилки (блозі пост про те як ефективно ми використовуємо подібні практики), на першому знімку зображена десктопна версія листа, на другому – мобільна.

Кілька рад по розмітці і чуйності email-листів

Кілька рад по розмітці і чуйності email-листів

Верстка цього листа досить стандартна (схожа на ту таблицю для 3х-колонковою розмітки). Для мобільних пристроїв ми хочемо вирівняти весь контент по лівому краю і стиснути його в одну колонку. Варто зауважити, що ми обрізаємо текст за допомогою значення ellipsis в десктопної версії, і коли весь контент поміщається в одну колонку, у нас залишається місце, щоб показати текст (але він все одно обрізається), тому нам потрібно заключити текст в div (для обрізки потрібен блоковий елемент)

Ось як ми обрізаємо текст:

Some really long text that will get truncated

Ми задаємо ширину елементи блоків і застосовуємо значення ellipsis. Ось ще один знімок екрана показує обрізку в дії:

Кілька рад по розмітці і чуйності email-листів

Наш перший медіа запит може бути щось на зразок:

@media (max-device-width: 320px){
div[id=’row to expand’]{
width: 260px !important;
}
}

Ми поставили ліміт 320px (розмір екрану iPhone у вертикальному положенні), і ширину, меншу або рівну йому, це правило зіграє свою роль. Зверніть увагу, що ‘!important’ в кінці (всі наші медіа запити будуть містити значення для того, щоб вони перекривали вбудовані стилі). Цього достатньо щоб зробити div ширше і показати більше тексту.

Ось код медіа запитів для решти цієї секції, який трансформує 3 колонки в одну:

@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, з обрізанням тексту і розмірами, зміненими під мобільні пристрої (тут присутня маса прийомів):

Кілька рад по розмітці і чуйності email-листів

Ось керівництво, яке я використовую при підготовці робіт для колонковою розмітки подібної до цієї. Ви передаєте колекцію робіт (де кожна робота має довільний розмір), кількість колонок і бажану ширину. Вона поверне вам роботи, згруповані колонки, які можуть відображатися в листі, дотримуючись розміри і приблизно однакову висоту колонок – в результаті виходить розмітка з ефектом динаміки. Для цього листа ми групуємо цей набір робіт в 2 колонки, ширина кожної колонки 300px для настільних комп’ютерів.

Відмінні інструменти для використання:

Premailer Ця бібліотека дозволить вам писати CSS код звичайним (тобто не вбудованим) способом, а потім при генерації/компіляції вбудувати його в документ.

Litmus, використовуючи віртуальні машини Litmus з різними операційними системами та поштовими клієнтами, ви можете переглянути як зразок листа буде виглядати при різних конфігураціях. Я раджу з’ясувати на які поштові клієнти/браузери/операційні системи ви орієнтуєтеся і переконатися, що ви протестуєте всі шаблони для них.

Haml (або іншу мову шаблонізації на вибір).Багато блоки контенту в наших листах генеруються динамічно, і синтаксис Haml, що дозволяє цикли та умови, а також стиль строкових обчислень, схожий на Ruby, виявилися незамінними.

На цьому все! За допомогою безлічі проб і помилок я створив комплект інструментів, технік і хаків, до якого я вдавався для того, щоб швидко розробляти чуйні і симпатичні email-шаблони. Я бачу обмежений набір інструментів в розпорядженні як деякого роду загадку, за допомогою вирішення якої ви все одно можете створювати розмітку для свого контенту, яка відмінно виглядає, будучи чуйною. Предпросомтр email-шаблонів з допомогою Inbox Inspector дозволив мені з упевненістю створювати, розгортати і відправляти листи користувачам.