Theme

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

Written by

in

Основні прийоми та необхідні знання, які необхідно опанувати для розробки електронної пошти.

Основні принципи (правила) верстки Email:

  • Чим менше, тим краще

Розмір файлу не повинен перевищувати 102 кб тільки HTML коду без картинок. 

В Google Gmail він буде обрізаний та зявиться кнопка показати повну версію. 

Розмір із картинками шрифтами оптимальна вага 1мб. 

Фактори які впливають на розмір файлу:

  • Довжина електронного листа

  • Забагато зображень

  • Великі розміри зображення

  • Зображення без стиснення

  • Анімовані GIF-файли

  • Стиль кодування

  • Спеціальні шрифти

Зображення:

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

Зображення слід додавати як атрибути, а не CSS. Outlook буде конвертуйти розміри в CSS автоматично у PX. 

Обовязково додаємо інлайнові стилі width: 100%; max-width: 400px;

<img src=”img-url.jpg width=”400” height=”100” style=”width: 100%; 
max-width: 400px; display: block;” alt=”20% 
off all seeds” />

Добавити display: block;

Обов’язково добавляємо ALT до зображення.

Якщо не вірно відображає картинка тобто ширина висота то можна задати ще стилі для TD

Винуватцем важких електронних листів є анімовані GIF-файли. Кожен кадр анімованого GIF-файлу є, по суті, окремим зображенням. Що більше кадрів у вашому GIF, то важчим він буде. 

Google Gmail другий за популярністю емейл клієнт, на першому місці Apple далі йде Outlook. Yahoo

Використовувати DIV чи TABLE

<DIV>

Плюси:

  • Більш гнучке планування.

  • Орієнтований на майбутнє. Код буде легко оновлювати в майбутньому, якщо припинять підтримку таблиць.

  • Більш доступний.

Мінуси:

  • Потребує додаткового коду для роботи в Outlook.

<TABLE>

Плюси:

  • Краща підтримка у всіх поштових клієнтах.

  • Більш зрозумілий, оскільки не потребує додаткового коду який потрібен для роботи в Outlook. (тільки для нових версій)

Мінуси:

  • Потребує додаткового стилю, щоб правильно відображатися.

Основи верстки:

Базова структура https://litmus.com/community/snippets/280-html-starter-template-from-carin-slater-foundations-of-email-development/
xmlns:o="urn:schemas-microsoft-com:office:office"  використовується для 

Outlook

Виправляє помилку на Apple пристроях для корректного відображення масштабу, щоб не показувало на половину екрана)

Мета теги для підтримки кольорової схеми встановленої в браузері.

Для коректного відображення у Windows Outlook використовують слідуючий тег

  • <!--[if mso]> <![endif]--> Цей оператор if означає, що цей код видимий лише для версії Windows Outlook.

  • <o:PixelsPerInch>96</o:PixelsPerInch> це покращить візуалізацію моніторів з вищою роздільною здатністю або користувачів, які вручну вирішили збільшити роздільну здатність через консоль хром.

role="article"

Тег спеціальних можливостей який відповідає клієнту що це опис статті, хоча це може бути не стаття

aria-roledescription="email"

Тег який вказує тобто перейменовує із статті на електронну пошту. Можем написати щось своє)

aria-label="email name"

Тег в якому ми вставляємо від кого прийшов лист. Назву наприклад пошти чи ім’я

Preheader це опис листа який ми бачимо коли приходить повідомлення, це не підпис Subject, це опис після підписа

Коли використовуємо <table>

потрібно обнулити border, cellpadding і cellspacing та додати атрибути для вирівнювання елементів у клітинок таблиці. 

Ось приклад таблиці  600px. Максимальна ширина контейнера оптимальна 600px;

@media screen and (max-width: 600px) {
 .responsive-table {
   width: 100% !important;
 }
}

role=“presentation” використовуємо для спеціальних можливостей, якщо використовуємо тільки візуально то цей тег не потрібний

Приклад верстки на <table>

TR – це як окрема секція, коли ми верстаємо окремі блоки тобто картку товара ми її обов’язково знову обертаємо в table наприклад в tr це як нова секція ми додаємо td із класом two-columns де буде 2 карточки товару, кожна карточка це новий table (inline-block) якому ми задаєм максмиальну ширну

приклад верстки на <div>

Як добавляти відступи в табличній верстці приклад:

Фантомні теги

<!–[if mso]> <![endif]–> – для підтримки Outlook 

<!–[if (gte mso 9)|(IE)]><!–> <![endif]–> – щоб не відображати в Outlook на ПК

Верстка кнопок

Outlook не підтримує падінги на кнопках тому використовуємо фантомний тег для Outlook 

Також Outlook не підтримує бордер радіус

<a href="https://parcel.io" style="background-color:#005959; 
text-decoration: none; padding: .5em 2em; color: #FCFDFF; 
display:inline-block; border-radius:.4em; mso-padding-alt:0;
text-underline-color:#005959">
  <!--[if mso]>
  <i style="mso-font-width:200%;mso-text-raise:100%" hidden>&emsp;</i>
  <span style="mso-text-raise:50%;">
  <![endif]-->My link text<!--[if mso]></span>
  <i style="mso-font-width:200%;" hidden>&emsp;&#8203;</i><![endif]-->
</a>

<a rel="noopener" target="_blank" href="https://www.litmus.com/" style="background-color: #1F7F4C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; color: #ffffff; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">

    <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
    <![endif]-->
    <span style="mso-text-raise: 15pt;">I am a button &rarr;</span>
    <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
    <![endif]-->
</a>
<td style="text-align: center;background-color: #489DFF;border-radius: 7px;">
   <a href="#" target="_blank" style="background-color: #489DFF;font-weight: 600;font-size: 16px;line-height: 20px;color: #FFFFFF;text-align: center;text-decoration: none;padding: 16px 16px 16px 16px;display: inline-block;border-radius: 7px;">&nbsp;&nbsp;&nbsp;UPDATE NOW&nbsp;&nbsp;&nbsp;</a>
</td>

Скинути падінги – mso-padding-alt:0;

Додати лівий та правий падіг Outlook <!–[if mso]> <![endif]–>

<i style="mso-font-width:200%;mso-text-raise:100%" hidden>&emsp;</i>

  <i style="mso-font-width:200%;" hidden>&emsp;&#8203;</i>

Додати падінг вниз

<span style="mso-text-raise:50%;">My link Text</span>

Додати падінг верх

<i style="mso-font-width:200%;mso-text-raise:100%" hidden>&emsp;</i>

role="button"

border-radius до <a> Для Outlook будуть квадратними.

лінки можна верстати через SPAN на TD або додати SPAN в тег A

добто задаєм ті самі стилі дизайну що і самомій кнопці A

Верстку кнопок як показує практика використовують тег img,

Шрифти:

Використання сторонії шрифтів рекомендують не використовувати. Варіант який можна використовувати це гугл шрифти за допомогою @import але надати альтернативу стандартним шрифтам Arial

Текст та форматування:

ul ol – можна використовувати – хто пам’ятає adobe dreamweaver

обертаємо в тег <p> для стилізації

для переноса використовують тег <br>

Є кілька способів уникнути перенос текста. 

Найпростіший – додати нерозривний пробіл (&nbsp;) 

або нерозривний дефіс (&#8209;), щоб зв’язати два слова разом.

Це вирішить більшість проблем з розривом рядка. 

CТИЛІ

Перед початком використовуємо CSS resets 

https://github.com/JayOram/email-css-resets/blob/main/CSS-normalise.css

Зовнішні стилі – не використовуємо

Вбудовані стилі – використовуємо але потім проганяємо через сервіси які перероблять на інлайнові

https://www.campaignmonitor.com/resources/tools/css-inliner/

https://templates.mailchimp.com/resources/inline-css/

Інлайнові стилі – рекомендують для використання

Більшість електронної пошти використовують поєднання вбудованих та інлайнових стилів.

Лінки URL

Поштові клієнти Apple Gmail Samsung всім посиланням дають синій колір щоб цього позбутися додаємо стилі

style>

a[x-apple-data-detectors] {

    color: #77d6fc !important;

    font-size: inherit !important;

    font-family: inherit !important;

    font-weight: inherit !important;

    line-height: inherit !important;

}

 

u + #body a {

    color: #77d6fc !important;

    font-size: inherit !important;

    font-family: inherit !important;

    font-weight: inherit !important;

    line-height: inherit !important;

}

 

#MessageViewBody a {

    color: #77d6fc !important;

    font-size: inherit !important;

    font-family: inherit !important;

    font-weight: inherit !important;

    line-height: inherit !important;

}

</style>

Використання медіа запиту для чорної теми

Обовязково має бути присутній мета тег та додані стилі для підтримки чорної теми

<!–to support dark mode meta tags–>

    <style type="text/css">

      :root {

        color-scheme: light dark;

        supported-color-schemes: light dark;

      }

    </style>

@media (prefers-color-scheme: dark) {}

щоб перебити стилі обов’язково вказуємо !important;

color: #ffffff !important;

Декілька правил

Ширину слід додавати як властивості CSS до вбудованих таблиць

Якщо не вірно відображає картинка тобто ширина висота то можна задати ще стилі для TD

Адаптив:

Як і в звичайній верстці ми використовуємо медіа запити

якщо ми задали table інлайнові стилі max-width: 276px; то в медіа запитах нам потрібно вказати значення в !import

width: 100% !important;

max-width: 100% !important;

@media screen and (max-width: 599.98px) {}

reallygoodemails.com – email template

https://putsmail.com/ – test email

Convert inline style

https://www.campaignmonitor.com/resources/tools/css-inliner/

https://templates.mailchimp.com/resources/inline-css/

Зображення зберегти

https://imgbb.com/

для плейсхолдера зображень

https://placehold.co/

Comments

Leave a Reply

More posts