Bootstrap — це фреймворк, на якому працює величезна кількість сайтів і вебзастосунків, і рано чи пізно кожному з них доводиться надсилати листи: привітання після реєстрації, посилання для скидання пароля, підтвердження замовлення. Наші безкоштовні шаблони листів для проєктів на Bootstrap дають вам дизайни, що відповідають вигляду вашого сайту, і водночас використовують саме ту розмітку, яку поштові скриньки справді розуміють.
Чому шаблони листів Bootstrap потребують іншого HTML
Сторінка на Bootstrap спирається на flexbox, медіазапити й таблицю стилів, що завантажується з файлу або CDN. Поштові клієнти поводяться з усіма трьома зовсім не так, як браузери:
- Жодних підключених таблиць стилів. Gmail, Outlook.com і Yahoo Mail ігнорують CSS-файл, підключений до листа за посиланням, тож класи Bootstrap потрапляють у поштову скриньку без жодних стилів за ними.
- Жодного flexbox у класичному Outlook. Outlook для Windows відображає листи за допомогою рушія рендерингу Word, який не підтримує flexbox, обтікання (float) і позиціонування, тож сітка Bootstrap там розвалюється.
- Мало місця для CSS. Gmail обмежує розмір блоку стилів у листі, а повна таблиця стилів Bootstrap у багато разів перевищує цей ліміт.
Саме тому розробники листів будують макети на таблицях і вбудованих стилях. Blocks виконує цю роботу за вас: шаблони складаються з табличних структур зі стилями, прописаними безпосередньо в елементах, містять виправлення для Outlook і адаптуються до екранів телефонів у тих поштових клієнтах, які це підтримують.
Як використати шаблон Blocks у проєкті на Bootstrap
- Оберіть шаблон і налаштуйте кольори, шрифти й логотип, щоб лист сприймався як частина вашого сайту.
- Експортуйте результат як HTML-файл або ZIP-архів із зображеннями чи скопіюйте код просто з редактора.
- Збережіть HTML у своєму проєкті як шаблон листа й замініть імена, посилання та дані замовлення змінними, які використовує ваш шаблонізатор.
- Надсилайте його через свій SMTP-сервер або поштовий API, як-от Amazon SES чи SendGrid, і додайте текстову версію для читачів, чиї поштові застосунки не показують HTML.
Якщо вам зручніше писати листи вручну з класами в стилі Bootstrap, існує окремий проєкт із відкритим кодом Bootstrap Email, який компілює таку розмітку в таблиці та вбудовані стилі. Його розробляють незалежно від команди Bootstrap, і він потребує етапу збирання на вашому комп'ютері. Blocks натомість іде візуальним шляхом: ви створюєте дизайн у браузері й одразу отримуєте готовий HTML.
Листи, які надсилає кожен сайт на Bootstrap
- Привітальні листи, які вітають нових користувачів і підказують перший крок у вашому продукті.
- Листи для скидання пароля з однією чіткою кнопкою та короткою приміткою про те, коли спливає термін дії посилання.
- Підтвердження замовлення для магазинів і сайтів бронювання, яким потрібен підсумок покупки, що викликає довіру.
- Онбординг-листи для вебзастосунків, які знайомлять із функціями по одній за лист.
Поради щодо шаблонів листів у вебпроєктах
- Розміщуйте зображення у відкритому доступі. Абсолютні URL зображень завантажуються в будь-якій поштовій скриньці, а відносні шляхи, скопійовані з вашого застосунку, ламаються.
- Тестуйте більш ніж в одному клієнті. Перш ніж запускати новий шаблон, перевірте принаймні Gmail, Apple Mail і Outlook для Windows.
- Давайте змінним зрозумілі назви. Читабельні заповнювачі точно підкажуть наступному розробникові, яке значення куди потрапляє.
- Зберігайте шаблони в репозиторії. Тримайте HTML листів поруч із кодом, який їх надсилає, щоб кожна зміна проходила рев'ю.
Щоб глибше розібратися у виборі розмітки, прочитайте наше порівняння фреймворків для листів і гід про HTML-листи та звичайні текстові листи. Якщо ваш застосунок надсилає багато системних листів, огляд сервісів транзакційних листів допоможе вибрати провайдера.
Отримайте безкоштовні шаблони листів для проєктів на Bootstrap
Оберіть шаблон вище, оформіть його відповідно до своєї теми Bootstrap і експортуйте чистий HTML для свого застосунку. Якщо ваша команда також надсилає розсилки, той самий дизайн можна експортувати напряму в Mailchimp або HubSpot.