Основні прийоми та необхідні знання, які необхідно опанувати для розробки електронної пошти.
Основні принципи (правила) верстки Email:
Розмір файлу не повинен перевищувати 102 кб тільки HTML коду без картинок.
В Google Gmail він буде обрізаний та зявиться кнопка показати повну версію.
Розмір із картинками шрифтами оптимальна вага 1мб.
Фактори які впливають на розмір файлу:
Зображення:
Всі зображення мають бути заздалегідь завантажені на сервер та прописані в хтмл прямий лінк на картинку
Зображення слід додавати як атрибути, а не 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>
Плюси:
Мінуси:
<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> </i>
<span style="mso-text-raise:50%;">
<![endif]-->My link text<!--[if mso]></span>
<i style="mso-font-width:200%;" hidden> ​</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;"> </i>
<![endif]-->
<span style="mso-text-raise: 15pt;">I am a button →</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;"> </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;"> UPDATE NOW </a>
</td>
Скинути падінги – mso-padding-alt:0;
Додати лівий та правий падіг Outlook <!–[if mso]> <![endif]–>
<i style="mso-font-width:200%;mso-text-raise:100%" hidden> </i>
<i style="mso-font-width:200%;" hidden> ​</i>
Додати падінг вниз
<span style="mso-text-raise:50%;">My link Text</span>
Додати падінг верх
<i style="mso-font-width:200%;mso-text-raise:100%" hidden> </i>
role="button"
border-radius до <a> Для Outlook будуть квадратними.
лінки можна верстати через SPAN на TD або додати SPAN в тег A
добто задаєм ті самі стилі дизайну що і самомій кнопці A
Верстку кнопок як показує практика використовують тег img,
Шрифти:
Використання сторонії шрифтів рекомендують не використовувати. Варіант який можна використовувати це гугл шрифти за допомогою @import але надати альтернативу стандартним шрифтам Arial
Текст та форматування:
ul ol – можна використовувати – хто пам’ятає adobe dreamweaver
обертаємо в тег <p> для стилізації
для переноса використовують тег <br>
Є кілька способів уникнути перенос текста.
Найпростіший – додати нерозривний пробіл ( )
або нерозривний дефіс (‑), щоб зв’язати два слова разом.
Це вирішить більшість проблем з розривом рядка.
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/
Instructions
Related articles
Problem
Solution
Related articles
-20240315-100529.png?api=v2)
