Передмова
Пропоную розглянути всі тонкощі і нюанси верстки html-листів - від простих шаблонів рішень, до сучасних адаптивних підходів.
На відміну від звичайної верстки, коректне відображення якої необхідно забезпечити в різних браузерах, html-лист може бути відкрито як через веб-інтерфейс поштового провайдера, так і через поштовий клієнт, різноманітність яких накладає ряд обмежень при створенні листа.
У Росії більшість інтернет-користувачів використовують пошту:
А з поштових клієнтів найбільш популярні:
важливі особливості
Для забезпечення коректного відображення листи у всій різноманітності поштових клієнтів і веб-інтерфейсів застосовується табличний підхід.
При створенні листа слід враховувати, що багато поштові клієнти по-замовчуванням не завантажують зображення, тобто необхідно забезпечити прийнятне відображення без зображень, використовуючи колір фону, альтернативний текст для зображень (alt) і т.д.
Більшість веб-інтерфейсів вирізують всі стилі, зазначені між
і , а також володіють лише обмеженою підтримкою стилів CSS. Не можна використовувати скорочену форму, типу: border: 1px solid # 000000:Так, код кольору теж скорочувати не можна (запис #fff буде некоректна).
«Розмір має значення» - веб інтерфейси gmail і yahoo обрізають лист, число символів перевищує в якому певну величину (102Кб і 100 Кб відповідно), так що намагайтеся максимально скоротити ваш код.
Розробка простого html-шаблону листа
Все-таки верстка - це більше практика, ніж теорія, тому пропоную розглянути конкретний приклад.
Загальний макет письма
Ширина листа не повинна перевищувати 700px, так як в більшості веб-ітерфейсом тіло листа займає не більше 50% від загальної ширини активної області, а поява горизонтального скролінгу сильно погіршить юзабіліті, та й просто враження про лист.
Колір фону веб-інтерфейсу, де будуть переглядати нашу верстку, може бути різним, тому необхідно все обернути в таблицю з бажаним кольором фону, навіть якщо він білий.
І так, загальним макет листи прийме наступний вигляд:
Як було зазначено вище для верстки листів використовується табличній підхід. При цьому, слід використовувати максимально просту структуру таблиць. Намагайтеся уникати об'єднання осередків (colspan, rowspan). Складні таблиці не завжди вірно відтворюються Outlook. Краще використовувати вкладені таблиці. І не забувайте вказувати параметри align і valign у осередків.
Значення атрибутів CELLPADDING і CELLSPACING слід встановити як "0" і не використовуйте ніяких значень атрибута BORDER крім "0" у table, так як не всі поштові клієнти коректно інтерпретують інші значення.
Вертикальні і горизонтальні відступи
В результаті, для створення в емейл необхідних інтервалів по горизонталі доводиться використовувати властивість відступів (padding). Ще більш ускладнює ситуацію те, що поштовий клієнт Outlook не підтримує відступи padding, а відступи margin - підтримує.
У зв'язку з цим краще відмовитися від використання як padding так і margin. Горизонтальний відступ можна зробити за допомогою порожнього вічка (В яку помістити символ нерозривного пробілу &bsp;), А щоб зробити відступ справа і зліва - можна створити вкладену таблицю менших розмірів.
Вертикальний відступ можна задати наступним чином:
Або ж використовуючи border кольору фону.
Текст і посилання
Оформлення тексту слід виробляти тегами - span. Для батьківської комірки (або блоку) вказати line-height. Варто зазначити що outlook.com ігнорує параметр line-height.
При верстці листів слід використовувати стандартні шрифти (Arial, Verdana, Tahoma, Times New Roman і т.д.).
Спеціальні текстові символи завжди повинні застосовуватися з використанням відповідних кодів спецсимволов, щоб одержувачі могли бачити адекватно відображений текст на будь-якій платформі.
І так, з огляду на всі вищевказані рекомендації, оформлення тексту буде виглядати наступним чином:
У посилань необхідно вказувати атрибут target = "_ blank", щоб уникнути можливих проблем з відкриттям сторінки в поточному вікні.
Часто необхідно, щоб, наприклад, прийменник ні відірваний від слова, щоб це гарантувати використовуйте символ нерозривного пробілу:
А якщо необхідно перенести слово, скористайтеся символом Це буває корисно, наприклад, для довгих посилань, які можуть «розривати» шаблон.
У другому випадку, Необхідно прописати посилання виду: href = "tel: +79876543210"
Зображення і фон
Створюючи html-листа не можна обійтися без використання зображень, але слід пам'ятати про ряд особливостей. Як зазначалося раніше, багато поштові клієнти по-замовчуванням не завантажують зображення, тому якщо воно несе в собі якусь смислове навантаження (крім естетичної), необхідно вказати атрибут alt. (Атрибут alt в будь-якому випадку повинен бути присутнім, але він може бути і порожнім alt = ""). А щоб оформлення альтернативного тексту відповідало дизайну і краще читалося, зображення можна обернути як текстовий фрагмент, розглянутий раніше.
У зображень необхідно завжди вказувати значення висоти і ширини.
Щоб уникнути проблем відображення зображень в ряді веб-інтерфейсів, вони повинні бути представлені як блокові елементи:
Не всі емейл-клієнти підтримують фонові зображення (особливо це стосується Outlook), тому їх потрібно використовувати з обережністю або уникати зовсім. Не забудьте вказати відповідне значення фонового кольору BGCOLOR, щоб текст, накладений на зображення в певному розділі, було видно навіть тим користувачам, у кого фонові зображення не відображаються і / або зображення відключені.
Підводячи підсумок, складемо шаблон листи, що містить прехедер, хедер, контентную частина і футер.
Адаптивна верстка листів
Для початку слід зазначити, як себе ведуть звичайні листи на екранах мобільників: на пристроях під управлінням iOS все лист масштабується, щоб воно повністю вмістилося на екран (тому листи стають нечитабельним і вимагають ручного масштабування).
Пристрої же на Android відображають лист в масштабі 100%, в зв'язку з чим, ми бачимо лише невеликий фрагмент листа і не можемо в повній мірі оцінити ні дизайну, ні контенту, що значно знижує відсоток кліків (CLR).
Адаптивні листи забезпечують коректне відображення на будь-яких пристроях, тим самим підвищуючи лояльність передплатників, і як наслідок - у таких листів вище CLR. З недоліків можна відзначити лише те, що на розробку дизайну і верстку адаптивних листів потрібно більше часу - тобто вище їх собівартість.
Види мобільного адаптації
Існує кілька підходів адаптації листів для мобільних пристроїв:
- мобільна верстка;
- гумова верстка;
- застосування медіа-запитів;
- комбінування декількох підходів.
Мобільна верстка
Даний підхід застосовується тільки якщо близько 70% всіх відкриттів проводиться з мобільних пристроїв.
гумова верстка
Підхід майже протилежний вищевикладеному. У «чистому» вигляді застосовується досить рідко.
Складається він в наступному: використовуються лише відносні розміри всіх блоків і зображень (у відсотках). За рахунок чого лист займає всю площу екрана, незалежно від його розміру. Даний підхід має ряд обмежень по структурі розташування об'єктів.
Застосування медіа-запитів
Як це видно з назви, заснований на використанні медіа-запитів CSS3. Забезпечує найкраще відображення листи на екрані будь-якого розміру, дозволяє змінювати параметри відображення тексту, розташування блоків і т.д. Майже що повна свобода =)
Відображення на моніторі комп'ютера, додатку Mail на iOS і в прокладанні gmail на Android
Комбінування декількох підходів
Підхід використання медіа-запитів, безсумнівно хороший тим, що дозволяє забезпечити найкраще відображення, але, на жаль, дає невелике охоплення мобільного аудиторії. Тому я пропоную взяти на озброєння відразу кілька підходів, а саме - гумова верстка + застосування медіа-запитів.
Таке поєднання забезпечує гарне відображення листи на будь-яких пристроях і в будь-яких додатках, незалежно від підтримки медіа-запитів.
Надалі буду описувати саме цей підхід.
Розробка загального макета адаптивного листи
Необхідно розуміти, що наш лист має коректно відображатися як на мобільних пристроях, так і в десктопний поштових клієнтів і веб-інтерфейси. Тому до тих прийомів і обмеженням що були описані раніше при адаптивної верстці додаються нові =)
І так, загальний шаблон адаптивного листи матиме вигляд:
Тут потрібно пояснити: деякі мобільні додатки, в тому числі стандартне Mail на iOS за замовчуванням збільшують шрифт в листі (який менше 13px), щоб цього уникнути необхідно додати стиль:
При описі стилів, як селектор слід використовувати атрибути - це робиться для того, щоб уникнути проблем в веб інтерфейсі yahoo, який некоректно їх інтерпретує.
Про тест і посилання тут нічого нового сказати не можна, керуємося правилами, описаними вище.
зображення
Основні моменти були описані раніше, тут додам лише те, що відноситься безпосередньо до адаптивної верстці.
«Retina» - екрани, вірніше сказати екрани з підвищеною щільністю пікселів характерні саме для мобільних пристроїв, тому ваш лист може виглядати трохи розмитим на екрані, наприклад iPhone. Щоб цього уникнути використовуйте зображення в 2 рази великих розмірів. Наприклад замість іконки 40х40, використовуйте іконку 80х80, прописавши розміри як 40х40.
Ефект плаваючого зображення (щоб текст обтікав зображення праворуч або ліворуч) можна домогтися в такий спосіб:
Або ж навпаки - фрагмент коду, який outlook проігнорує:
Прийоми при створенні адаптивного листи
Для забезпечення платформ доводиться використовувати різні прийоми, про які я б хотів зупинитися окремо.
блокова адаптація
Перестроювання блоків на мобільних пристроях один під одного.
Реалізується це таким чином:
Де кожен їх блоків описується наступною структурою:
Застосуємо тепер отримані знання на практиці і адаптуємо лист, що ми робили раніше для мобільних пристроїв.