1. Найпопулярніші поштові платформи
2. Основні проблеми верстки
3. Як працювати зі шрифтами
4. Зображення та медіа
5. адаптивна верстка
6. Як зробити гумову верстку
7. адаптивні зображення
8. Неочевидні моменти в роботі з текстом email

Розповімо про особливості верстки email шаблонів - в чому основні проблеми верстки, як працювати з мультимедіа, шрифтами і адаптивністю. І все це з прикладами коду.

Найпопулярніші поштові платформи

розробники проекту Email Client Market Share відстежують статистику по частці ринку email серед різних поштових клієнтів. У разі конкретної компанії розподіл користувачів різних платформ і програм може бути іншим, але на старті непогано розуміти базову диспозицію на ринку. За даними на травень 2017 року, cамимі популярними поштовими платформами є iPhone і Gmail:

Основні проблеми верстки

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

Складнощі починаються з самого початку - існує безліч движків рендеринга листів, які використовуються різними поштовими програмами:

• Apple Mail, Outlook для Mac, Android Mail і iOS Mail використовують WebKit.
• Outlook 2000, 2002 і 2003 використовують Internet Explorer.
• Outlook 2007, 2010 і 2013 використовують Microsoft Word (так-так, Word!).
• Веб-клієнти, відповідно, використовують движки браузера - наприклад, Safari використовує WebKit, а Chrome використовує Blink.

Поштові клієнти додають власні стилі, крім тих, що Ви вибирали розробником розсилки. Наприклад, Gmail для всіх шрифтів в <td> встановлює значення. Також розробники поштового сервісу Google лише недавно анонсували підтримку вбудованого CSS і media queries .

Різноманітність поштових клієнтів і движків рендеринга призводить до необхідності використання універсальних підходів. Зокрема, це означає, що замість використання <div> краще застосовувати табличну верстку. Конкретно, це виливається в використання:

• <Table> замість <div>
• #FFFFFF замість #FFF,
• padding замість margin,
• CSS2 замість CSS3,
• HTML4 замість HTML5,
• background-color замість background, також варто використовувати розширені властивості, на кшталт padding-top ;, padding-left; та інші,
• фон кольором замість фонових зображень, а візуальні елементи через тег <img>,
• HTML-атрибутів замість CSS,
• інлайн CSS замість наборів стилів або блоків <style>.

Як працювати зі шрифтами

Використовуйте стандартні системні шрифти для відображення текстів листів - це найпростіше і надійне рішення. Але якщо необхідно внести зміни в типографіку можна використовувати веб-шрифти, наприклад, Google Fonts.

Щоб правила веб-шрифтів не конфліктували з Outlook, використовуйте спеціальний медіазапрос для WebKit:

<Style> @import url (http://fonts.googleapis.com/css?family=Pacifico); / * Type styles for all clients * / h1 {...} / * Type styles for WebKit clients * / @media screen and (-webkit-min-device-pixel-ratio: 0) {h1 {...}}

Дуже важливо прописати для кожного елементу таблиці <td> font family, font size і color, інакше поштовий клієнт може проігнорувати обраний шрифт. Це правило потрібно дотримуватися і для будь-яких блокових елементів, в яких знаходиться текст, таких як <p>, <h1> ... <h5>, <div>

Зображення та медіа

Наступна важлива тема при верстці листів - робота з зображеннями і медіа.

Деякі поштові програми за замовчуванням показують картинки, а деякі їх блокують. Крім іншого, це впливає на можливість збору статистики. Як правило, для цього використовуються спеціальні картинки малого розміру - пікселі відстеження. Це означає, що якщо поштова програма блокує зображення, то зрозуміти, чи відкрив користувач лист, просто не вдасться.

Поведінка поштових клієнтів тут вельми варіативно:

• Outlook блокує рендеринг зображень за замовчуванням,
• Apple Mail не блокує,
• Gmail не блокує.

Важливо включати alt-текст для всіх використовуваних картинок - це допоможе одержувачу листи зрозуміти, що повинно було бути на місці зображень, якщо його email-клієнт раптом йому їх не покаже. Для тега <img> можна прописати стильові правила тексту , Наприклад colorілі font-family, які будуть застосовуватися до alt-тексту.

Гифки підтримуються більшістю поштових клієнтів, однак Outlook версій з 2007 до 2013 їх не підтримує - програма просто показує перший кадр.

адаптивна верстка

• близько половини всіх листів в світі відкривають з мобільних пристроїв, і ці цифри зростають.
• за даними проекту Email Client Market Share частка iPhone на ринку поштових клієнтів становить 31%, у iPad 11%, а у Android 4% - це більше 45%, але ж є ще Windows Mobile і інші ОС.
• Дослідники з MailChimp виявили , Що число кліків на посилання в адаптивних листах за останній час зросла майже на 15% - з 2,7 до 3,1%.

Цифри говорять про те, що необхідно приділяти особливу увагу тому, як листи відображаються на різних мобільних пристроях. Веб-дизайнер Массімо Кассандра публікував на SitePoint корисну інструкцію по створенню адаптивних версій email-повідомлень . Нижче - витримка основних порад з цього матеріалу.

Замовте шаблон email розсилки!

Наш дизайнер зверстає шаблон під ваші потреби

Замовити шаблон

Існує два основних види листів для мобільних пристроїв - один стовпчик і багатоколонкові. У першому випадку особливих складнощів з тим, щоб зробити контент адаптивним, не виникає, оскільки немає необхідності в реорганізації елементів листи. Необхідно лише забезпечити зменшення ширини шаблону для кращого відображення на пристроях різного розміру.

Один стовпчик лист на робочому столі і смартфоні

Для забезпечення коректної зміни розміру, потрібно адаптувати ширину таблиці. Вище ми говорили про те, що в сфері email досі в ходу табличная верстка:

<Table cellspacing = "0" cellpadding = "0" border = "0" width = "600"> <! - тут текст листа -> </ table> @media screen and (max-width: 480px) {table {width: 100%! important; }}

Також потрібно буде адаптувати розміри зображень і розмір шрифту font-size - і все.

У разі багатоколоночних листів все куди складніше, оскільки колонки, які розташовувалися одна поруч з іншою в деськтопной версії листи, повинні бути перерозподілені для його відображення на смартфоні.

Зробити це можна за допомогою вкладених таблиць. Вважається, що цей підхід - більш надійний спосіб домогтися підтримки різних поштових клієнтів. Головна «фішка» тут у використанні атрибуту align = "left" для розташування таблиць по горизонталі. У кожного елемента повинна бути конкретна ширина, і сума ширин всіх елементів повинна дорівнювати ширині контейнера:

Зі зменшенням ширини екрану пристрою може знадобитися змінювати розмір контейнера і забезпечувати стовідсоткову ширину таблиць і колонок:

table [class = "body_table"] {width: 600px; } Table [class = "column_table"] {width: 180px; } Table [class = "spacer_table"] {width: 30px; height: 30px; } @Media only screen and (max-width: 480px) {table [class = "body_table"] {width: 420px! Important; } Table [class = "column_table"] {width: 100%! Important; }}

Массімо Кассандра залив цей код на Codepen - це спеціальна пісочниця, в якій можна протестувати приклад, підставляючи власні дані.

Ця техніка дозволяє домогтися того, що лист буде відображатися в більшості поштових клієнтів. Можливо ви помітили дивне написання селектор класу [class = "body_table"] замість звичного .body_table - це спеціальний хак для роботи з поштовим сервісом Yahoo. Справа в тому, що він некоректно працює з CSS з медіазапросамі і даний хак дозволяє ігнорувати ці стилі.

Для кодування HTML-версій листів можна використовувати будь-які редактори коду, наприклад, Atom або Sublime Text.

Другий спосіб створення багатоколоночних листів за допомогою властивості display більш елегантний. Суть методу полягає в зміні для комірок таблиць їх дефолтного властивості display при зменшенні ширини екрану пристрою, на якому відображається лист:

table [class = "body_table"] {width: 600px; } Table td [class = "column"] {height: 100px; width: 200px; } @Media only screen and (max-width: 480px) {table [class = "body_table"] {width: 440px! Important; } Table td [class = "column"] {width: 100%! Important; display: block! important; }}

Тут можна пограти з прикладом коду на Codepen.

В описаних вище способах ми для мобільних дозволів міняємо початку задану ширину таблиць і комірок, перетворюючи їх в блокові елементи. В такому випадку верстка не є по-справжньому гумовою - ми просто прописуємо потрібні стильові правила під певні дозволи екрану. Плюс цей спосіб не спрацює в мобільних поштових клієнтів, таких як Яндекс.Пошта і Mail.ru під iOS і Android, які не підтримують медіазапроси.

Як зробити гумову верстку

Варіант створення гумової верстки в листах - використовувати обертаючі діви із зазначенням максимальної ширини max-width. Так як Outlook не підтримує це правило, під нього прописуються спеціальна інструкція-коментар, в якій міститься табличная верстка.

<! - [if mso | IE]> <table border = "0" cellpadding = "0" cellspacing = "0" width = "640" align = "center" style = "width: 640px;"> <tr> <td> <! [Endif] -> <div style = "margin: 0 auto; max-width: 640px;"> <table cellpadding = "0" cellspacing = "0" style = "width: 100%;" align = "center" border = "0"> <tr> <td> ... </ td> </ tr> </ table> </ div> <! - [if mso | IE]> </ td> </ tr> </ table> <! [Endif] ->

А от більш детальний приклад коду .

Створювати і редагувати багатоколонкові шаблони з такими коментарями досить складно, однак цей процес можна спростити, використовуючи фреймворки для створення шаблонів, наприклад MJML .

Шаблон MJML представляє набір особливих тегів розмітки, які після компіляції перетворюються в звичайну табличну верстку:

<Mj-container> <mj-section> <mj-column> <mj-text> Hello World! </ Mj-text> </ mj-column> </ mj-section> </ mj-container>

адаптивні зображення

Окрема тема - створення адаптивних версій зображень. Тут досить використовувати класичний метод створення адаптивного контенту - img {max-width: 100%;}.

Великі банери, призначені для відображення на всю ширину на робочому столі, в мобільних поштових клієнтів можуть стати нечитабельним. У такому випадку, за допомогою медіазапросов можна приховувати початкове зображення і відображати в якості фону інше:

@media only screen and (max-device-width: 480px) {img [class = "original_img"] {display: none; } [Class = "substitute_image"] {background-image: url (background_image.png; width: 440px! Important; height: 240px! Important}}

Приклад - з цього керівництва

Ми в SendPulse надаємо послугу дизайну шаблонів , Але але є і спеціалізовані агентства, як Site Elite Studio .

Неочевидні моменти в роботі з текстом email

На закінчення ще кілька порад, які допоможуть створити якісну поштову розсилку.

Не забувайте про текстову версію листи

Більшість листів, які приходять користувачам - це так звані MIME-повідомлення. Цей стандарт має на увазі використання і HTML-версії і звичайної текстової версії листи - поштовий клієнт отримує їх обидві, а потім сам вирішує, яку з них використовувати в залежності від налаштувань. Тому при відправці листів дуже важливо включати обидві їхньою версією.

Важливо пам'ятати, що деякі поштові клієнти навіть plain-text листи будуть відображати як HTML-повідомлень. Наприклад, Gmail додасть додаткові стилі і перетворить URL в посилання.

Прехедер повідомлення дуже важливий

При створенні розсилок часто забувають про так званому тексті превью або прехедере. Прехедер - це невеликий шматочок тексту, який підтягується з тексту повідомлення, і зазвичай він відображається під полями з ім'ям відправника і темою повідомлення.

Цей елемент використовують, щоб деталізувати тему листи і стимулювати абонентів до відкриття. Текст превью витягується з перших кількох рядків тексту листа. При цьому в тексті листа його можна відображати або приховувати за допомогою нескладного коду.

Іноді в прехедер може потрапляти службова інформація, начебто іконок соцмереж, закликів до дії або фрази «Відкрити в браузері». Не допускайте таких помилок, а використовуйте прехедер по максимуму.

Для превью повідомлень і тестування прехедеров можна використовувати цей інструмент від Остіна Вудалла (Austin Woodall).

Дотримуйтесь описаним вище радам і ви зможете створити якісний шаблон листи, не здійснюючи поширених помилок, навіть якщо це ваша перша розсилка.

[Всього голосів: 5 Середній: 5/5]