Чим верстка листів
відрізняється від верстки веб-сторінок
На відміну верстки веб-сторінок, коректне відображення яких необхідно забезпечити тільки в браузерах, html-лист може бути відкрито як через веб-інтерфейс поштового провайдера, так і через поштовий клієнт, різноманітність яких накладає ряд обмежень при створенні верстки листи.
- mail.ru (bk.ru, list.ru, inbox.ru) - 54,77%,
- yandex.ru - 20,07%,
- gmail.com - 13,69%,
- rambler.ru - 6,33%,
- yahoo.com - 1,65%,
- outlook.com - 1,37%.
А з поштових клієнтів (згідно з моїми спостереженнями) найбільш популярні:
Для початку зазначимо, що
Решта розглянемо на конкретному прикладі.
Розробка простого html-шаблону листа. Загальний макет письма.
Ширина листа не повинна перевищувати 700 px (нехай буде 600 px), так як в більшості веб-інтерфейсів тіло листа займає не більше 50% від загальної ширини активної області, а поява горизонтального скролінгу сильно погіршить юзабіліті, та й просто враження про лист.
Колір фону веб-інтерфейсу, де будуть переглядати нашу верстку, може бути різним, тому необхідно все обернути в таблицю з бажаним кольором фону, навіть якщо він білий. Отже, загальний макет листи прийме наступний вигляд:
Використовуйте максимально просту структуру таблиць. Складні таблиці не завжди вірно відтворює Outlook. Намагайтеся уникати об'єднання осередків (colspan, rowspan). Краще використовувати вкладені таблиці. І не забувайте вказувати параметри align і valign у осередків.
Значення атрибутів CELLPADDING і CELLSPACING слід встановити як «0». Не використовуйте ніяких значень атрибута BORDER, крім «0», у table, так як не всі поштові клієнти коректно інтерпретують інші значення.
Вертикальні і горизонтальні відступи
Або ж використовуючи border кольору фону.
Текст і посилання
При верстці листів слід використовувати стандартні шрифти (Arial, Verdana, Tahoma, Times New Roman і т.д.). Спеціальні текстові символи завжди повинні застосовуватися з використанням відповідних кодів спецсимволов, щоб одержувачі могли бачити адекватно відображений текст на будь-якій платформі.
Отже, з огляду на всі вищевказані рекомендації, оформлення тексту буде виглядати наступним чином:
У посилань необхідно вказувати атрибут target = "_ blank", щоб уникнути можливих проблем з відкриттям сторінки в поточному вікні.
Часто необхідно, щоб, наприклад, прийменник ні відірваний від слова. Щоб це гарантувати, використовуйте символ нерозривного пробілу:
У другому випадку необхідно прописати посилання виду: href = "tel: 79876543210".
Зображення і фон
Багато поштові клієнти за замовчуванням не завантажують зображення, тому, якщо воно несе в собі якусь смислове навантаження (крім естетичної), необхідно вказати атрибут alt (атрибут alt в будь-якому випадку повинен бути присутнім, але він може бути і порожнім alt = "") . А щоб оформлення альтернативного тексту відповідало дизайну і краще читалося, зображення можна обернути як текстовий фрагмент, розглянутий раніше.
У зображень необхідно завжди вказувати значення висоти і ширини. Щоб уникнути проблем відображення зображень в ряді веб-інтерфейсів (в тому числі Gmail), вони повинні бути представлені як блокові елементи:
Підводячи підсумок, складемо шаблон листи, що містить прехедер, хедер, контентную частина і футер.