Получить профессию в Skypro
Оформляем HTML письмо для Gmail: инлайн стили
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Верстка HTML-писем для Gmail основана на встроенных CSS-стилях и табличной верстке. При работе с данной почтовой службой стили в тегах <head> и <style>, а также современные методы верстки, включая Flexbox и Grid, часто игнорируются. Поэтому рекомендуется держаться простых и сдержанных дизайнов: сложные CSS-стили могут не корректно отработать в Gmail.
Вот как может выглядеть пример письма с необходимыми встроенными стилями:
<table>
<tr>
<td style="background: #4CAF50; color: white; padding: 10px;">
Оформленный заголовок
</td>
</tr>
<tr>
<td style="padding: 20px;">
Содержимое письма
</td>
</tr>
</table>С применением встроенных стилей и таблиц вы обеспечиваете сохранение ожидаемой визуализации письма в Gmail.
О совместимости и адаптивности
С 2016 года Gmail стал относиться более толерантно к медиа-запросам и селекторам классов, однако все еще предпочитается использование встроенных стилей ради корректного отображения во всех почтовых клиентах. Инструменты типа Premailer помогут преобразовать сложные наборы CSS в совместимые встроенные стили и избежать ошибок.
Для гарантированно правильного отображения на всех устройствах выбирайте такие веб-безопасные шрифты, как Arial, Tahoma и sans-serif. Для корректировки работы с Microsoft Outlook применяйте условные комментарии. Слишком много CSS может негативно влиять на скорость загрузки письма.
Тестирование и оптимизация
Убедитесь в правильном внешнем виде ваших писем, применяя сервисы тестирования писем, такие как Litmus, чтобы гарантировать корректное отображение в Gmail и других почтовых клиентах. Отсеивайте код от излишних стилей, оставляя лишь необходимые для работы.
Вы должны знать, какие CSS-свойства поддерживает Gmail, чтобы экономить свое время и усилия.
Визуализация
Подготовка HTML-письма для Gmail схожа с процессом создания наряда для торжественного случая:
Оформление писем для Gmail: 📧👔📏
1. Учитывайте **встроенные CSS-стили**, как кройщик, делающий мерку для костюма: 🧵
2. Избегайте перегрузки элементами, такими как теги **<style>** и **медиа-запросы**: 💔
3. Опирайтесь на преверенную **табличную верстку** как на главный фундамент дизайна: 🍽️
4. Будьте внимательны к размерам **изображений**, чтобы они были не слишком большими или маленькими: 🖼️📏<=600px
Задача: создать такое письмо, воспоминание о котором останется надолго!Инструменты, которые сделают разработку проще
Есть несколько инструментов и сервисов, которые помогут вам ускорить и упростить разработку:
- Premailer: детально проверяет и корректирует ваше письмо, в роли модного критика.
- MailChimp и Mandrill: идеальны для начинающих разработчиков писем, в роли личных стилистов.
- MJML: это фреймворк, больно облегчающий создание адаптивных дизайнов писем, в роли вашего персонального дизайнера.
Не прекращайте развиваться и адаптироваться к изменениям
Имейте в виду, что почтовые клиенты, так же как и индустрия моды, постоянно изменяются. Отслеживайте обновления и новшества в отображении CSS и использовании новых подходов для улучшения ваших писем, включая оптимизацию под Outlook с использованием XML и условных комментариев.
Полезные материалы
- Введение в создание и отправку HTML-писем для веб-разработчиков — подробный гайд по дизайну писем.
- Понимание Gmail и CSS — объяснение нюансов работы с CSS в Gmail.
- Поддержка CSS | Gmail | Google для разработчиков — актуальная информация о поддержке CSS в Gmail.
- Создание простого адаптивного HTML-письма — практическое руководство по созданию писем с адаптивным дизайном.
- Can I email… Таблицы поддержки HTML и CSS в письмах — данные о поддержке разных свойств и технологий в различных почтовых клиентах.
- MJML – Фреймворк для адаптивных писем — инструмент облегчает процесс разработки адаптивных писем.