Особливості верстки HTML-листів: базові правила, кнопки, фон

1. Верстка HTML-листів
2. Базові правила верстки HTML-листів
3. дивні відступи
4. Верстка кнопок для HTML-листів
5. HTML-листи, фонове зображення
6. Тестування HTML-листи

1. Шаблони HTML-листів
2. Базові правила верстки
3. дивні відступи
4. Верстка кнопок для HTML-листів
5. Фонове зображення в HTML-листах
6. Тестування HTML-листи

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

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

Мій шлях через цей вир проходив не без казусів: мені раніше ніколи не доводилося зустрічатися з табличній версткою і з якимись необгрунтованими обмеженнями відносно користування css. Але основна проблема полягала навіть не в цьому: скрипт, який організовує відправку листів, підрізав мій код (в основному css) і лист приходило зміненим. На усвідомлення цього пішло ще пару годин і багато-багато нервових клітин.

Верстка HTML-листів

Шаблони HTML-листів

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

1. Універсальний, простий чуйний шаблон електронної пошти.
2. Litmus.com - можна знайти відмінні безкоштовні адаптивні шаблони під різні потреби.
3. Чуйні транзакційні HTML шаблони електронної пошти.
4. Cerberus - хороша підбірка адаптивних шаблонів.
5. Responsiveemailpatterns.com - колекція шаблонів і модулів для адаптивних листів.

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

Базові правила верстки HTML-листів

1. <table> замість <div>. Використовуючи табличну верстку, ви уникнете безлічі проблем з некоректним відображенням вашого листа в різних поштових клієнта і браузерах. Таблична верстка правила в інтернеті довгий час завдяки коректному відображенню в різних браузерах і великій кількості параметрів керуючих видом таблиць.
2. Використовуйте універсальні атрибути HTML-тегів і універсальні CSS-властивості.
   • #FFFFFF замість #FFF,
   • padding замість margin,
   • CSS2 замість CSS3,
   • HTML4 замість HTML5,
   • background-color замість background,
   • HTML-атрибути замість CSS.
3. Вбудовані (Inline) CSS замість зовнішніх .css файлів. Звичайно, верстати таке не дуже зручно, виникають складнощі з перевіркою і коригуванням коду. Але, на наше щастя, існують сервіси з автоматичного перекладу всіх стилів у вбудовані.
   • Premailer.io
   • inlinestyler.torchbox.com

   Приклад вбудованого стилю <p style = "color: #ffffff"> Просто текст якийсь </ p>

4. Ширину всього документа в 600px. Це убезпечить ваших читачів від горизонтальної прокрутки. Замість цього можна зробити лист адаптивним.
5. Задавайте таблицями атрибути border = "0" cellpadding = "0" cellspacing = "0".
6. Найкраще використовувати стандартні шрифти (Helvetica, Arial) наявні на будь-якому пристрої.

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

дивні відступи

Для організації відступів можна використовувати порожні конструкції <div> і <td>

Для вертикального відступу:

<Div style = "height: 10px; font-size: 10px; line-height: 11px;" > & Nbsp; </ Div>

Для горизонтального відступу:

<Td width = "23" style = "width: 23px; max-width: 23px; min-width: 23px;" > & Nbsp; </ 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-листи

Перед відправкою листа раджу протестувати його. Для цього можна використовувати сервіс PutsMail або Яндекс пошту.

Щоб вставити HTML в структуру письма в Яндекс поштою, виконайте наступні дії: переконайтеся, що у вас включено оформлення → Клацніть правою кнопкою миші по рядку введення тексту → Оберіть "досліджувати елемент" → У вікні, відкрийте виділений <div> → Правою кнопкою натисніть на <br> і виберіть "edit as html" → Введіть код письма і відправте лист. Лист може відобразитися неправильно, але не турбуйтеся: лист прийде в звичайному вигляді.