Верстка e-mail
Верстка е-мейлів має певні особливості. Вона заснована на досить старих технологіях HTML2.0 та CSS першої редакції.
Ще є проблемою те, що HTML-код мають інтерпритувати багато різних програм, серед яких iOS Mail, MS Mail, Outlook, Outlook Express, The Bat!, Mozilla Thunderbird, Opera Mail та десякти інших.
Наразі поштовими програмами користуються в основному корпоративні клієнти і вони втрачають популярність на користь веб-інтерфейсів. Та локально можна зберігати сотні-тисячі гігабайтів електронних листів, а в хмарних сервісах це - дороге задоволення.
Але на мобільних платформах додатками для електронних листів користується майже кожен.
Кожна з цих програм може відображати верстку е-мейл трохи по-своєму. Більше того, різні версії MS Outlook відображають верстку по-різному. Складається враження, що у версії 2007-го року двіжок був більш продвинутий, ніж у 2010-го, який славився великою купою глюків у відображенні.
По-перше, ви не можете використовувати блоки <div>, вся верстка була таблична.
По-друге, ви досить обмежено можете використовувати стилі. Ви повинні зробити гарно все без стилів, а тоді добавити стилі для більш продвинутих програм.
По-третє - забудьте про бекграунд. Ви можете вставляти тільки картинки, через атрибут bgcolor задавати фоновий колір.
Ширина макета у е-мейлів як правило коливається в межах 580-620 пікселів. Це пов’язане з розповсюдженням в свій час моніторів 640 і 1024 пікселя в ширину.
На екранах в 640 пікселів е-мейл займав всю ширину екрану, на екранах в 1024 пікселя - збоку ще могла розміщуватися панель з деревом каталогів поштового ящика.
Останнім часом з'явилась можливість використовувати деякі стилі. Вони завжди прописуються в тег, ніяких класів немає.
Зі стилів використовуємо тільки padding, color, text-decoration, font-size, line-height.
<h1 style="font: normal 24px/36px Arial, Helvetica, sans-serif; color: blue;">
Шановний Боба!</h1>
<p style="...">Повідомляємо вам, що у нашому інтернет-магазині почався сезон знижок...
Стандартна початкова сітка е-мейлів
Скачайте макет (jpg) та зробіть порізку. Зверніть увагу, що якщо текст розташовується на фоновому зображенні, градієнті - цей текст потрібно вирізати разом із фоном, а не відключати як у верстці сайтів.
Починаємо верстати з базової сітки. !DOCTYPE можна не використовувати, за часів html2.0 цього тега ще не було.
 |
 |
|
| Сюди вставляємо таблицю з контентом | ||
|
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="20" height="20"></td>
<td width="580"><img src="images/spacer.gif" alt="" width="580" height="20"></td>
<td><img src="images/spacer.gif" alt="" width="20" height="20"></td>
</tr>
<tr>
<td> </td>
<td>
Сюди вставляємо таблицю з контентом:
<table width="580" border="0" cellspacing="0" cellpadding="0">
...
</table>
</td>
<td> </td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="" width="20" height="20"></td>
<td> </td>
<td> </td>
</tr>
</table>
Для пустих комірок необхідно використовувати прозорий файлик spacer.gif, який триматиме розмір комірки, або нерозривний пробіл .
Всі зображення потрібно зберігати на сервер і вставляти абсолютні посилання.
Ви не можете використовувати скрипти, відео та аудіо. Замість відео зазвичай вставляється картинка-заглушка з посиланням на ютуб чи веб-сторінку, де це відео можна переглянути.
Тестування та відправка e-mail
Повноцінно протестувати електронний лист доволі важко: його потрібно розіслати зі свого сервера (що знаходиться у "білому" списку серверів) на десятки популярних е-мейл провайдерів: google-mail, ukr.net, i-ua, yandex-mail, mail-ru, aol, msn і т.д.
Після розсилання листи потрібно перевіряти у веб-інтерфейсах (сервіси можуть змінювати вашу верстку: щось видаляти, щось добавляти, щось "оптимізувати"), а також у десятках популярних програм, зазначених вище.
Сама поверхнева перевірка - у Google-mail:
1. Заляйте на github.io чи свій хостінг зображення з верстки е-мейла.
2. Пропишіть в коді е-мейла повні URL-адреси на зображення.
3. Створіть в гуглі нового листа і через інструменти розробника вставте у лист HTML-код свого листа.
4. Відправте лист самі собі та перегляньте результат.
Якщо є можливість скористатися сервером з PHP - то алгоритм дій приблизно наступний:
Створіть файл mail.php поруч із вашою версткою е-мейлів.
<?php
error_reporting(0);
$mail = 'boba@mail.com';
$subject = 'Тестування e-mail верстки';
$ctype = 'Content-type: text/html; charset=utf-8 \r\n';
$message = 'Сюди вставляємо код зверстаного е-мейла';
mail($mail, $subject, $message, $ctype);
echo 'Done <i>13</i>';
В змінну $message потрібно внести лише вміст тега body, тільки таблиці, не вставляйте весь код HTML!
У е-мейлів немає доктайпа, тегів html, head, meta, link, body.
Зображення можна заляти на поточний сервер, скористатися гітхабом, іншими хмарними сервісами з вільним доступом до ресурсів.
Переконайтесь, що прописали свою електронну адресу.
Перевірте, чи все гаразд з лапками, апострофами.
Запустіть у браузері скрипт.
Через деякий час на вашу електронну скриньку має прийти тестовий лист. Можливо, він попаде в паку smap.
Є трохи простіший спосіб протестувати е-мейл. Спочатку вам в html-файлі треба повидаляти все до тега body включно, і закриваючі теги body, html, залишити лише таблиці. Також потрібно прописати абсолютні шляхи до зображень.
Тепер замість вставляння html-коду в php, екранування лапок з апострофами, можна просто імпортувати вміст файла у змінну:
$message = file_get_contents('mail.html');
Домашнє завдання
- Зверстайте е-мейли: emails.zip (jpg)
- Протестуйте зверстані е-мейли, відправивши їх собі на пошту двома способам: вставивши код в php-файл та імпортувавши код з файла. Замість Done пропишіть пояснення, типу "Code in PHP", "Import code from html"
Додаткова інформація
Хабрахабр: Верстка email рассылок от А до Я для чайников.
Якщо вам потрібно буде верстати багато шаблонів e-mail - використовуйте фреймворки, наприклад, Foundation for Emails 2.
pilotmailer.com - тестування е-мейлів.
htmlemailcheck.com/check - тестування е-мейлів.