18 бесплатных инструментов для емейл-вёрстки, которые ускоряют и упрощают работу
Наши ребята из технического отдела собрали инструменты, которыми пользуются ежедневно при емейл-вёрстке. Эти инструменты позволяют им оптимизировать процессы и сокращают время на разработку. Некоторые из сервисов ребята изобрели сами.
Изучайте и используйте в своей работе. Вы наверняка найдёте здесь то, о чём раньше не слышали и что станет для вас интересным и полезным открытием 😉
Background Generator EMX Tools
Генератор бэкграундов. Outlook 2007–2016 не поддерживает фоновые изображения, прописанные в CSS. Чтобы обойти это ограничение, используют язык векторной разметки VML от Microsoft. Background Generator создаёт HTML-контейнер с VML-блоком, где будет прописано фоновое изображение со всеми необходимыми параметрами и которое будет отображаться во всех почтовиках.
Bulletproof email buttons от Campaign Monitor
Генератор vml-кнопок для писем. Позволяет сделать для Outlook кнопку, кликабельную по всей её площади.
Event Generator EMX Tools
Генератор календарей, которые поддерживает Outlook, iCal, Gmail и др. Позволяет реализовать в письме функцию, благодаря которой подписчик сможет добавить событие к себе в календарь. Так он не забудет о важных для вас мероприятиях.
Email Sharing EMX Tools
Позволяет прописать превью (Open Graph) ссылки — ту, информацию, которая потягивается за ней при шеринге (изображение, заголовок, описание).
URL Decoder/Encoder
Позволяет кодировать и декодировать. Чаще всего нужен при работе с шерингом ссылок. Помогает прописать данные для их превью — декодировать или закодировать их.
Webatic
Позволяет декодировать код в исходный вид. Пригодится, если нужно посмотреть, из-за чего произошла ошибка в отправленном письме или как устроено внутри какое-либо письмо в принципе.
Test Sender EMX Tools
Позволяет без использования ESP отправить письмо.
CSS-гайды
The Ultimate Guide to CSS от Campaign Monitor
Это справочники по селекторам, стилевым свойствам, их значениям и тому, какие почтовики их поддерживают.
CSS Guide EMX Tools ориентирован на российский рынок и содержит информацию по Яндексу, Mail.ru, Rambler. Can I email и Campaign Monitor содержат информацию по зарубежным почтовикам и Mail.ru.
TJML
Емейл-фреймворк, созданный нашим руководителем отдела веб-разработки Антоном Чирковым. Это готовая разметка для емейл-вёрстки. Позволяет ускорить и упростить процесс вёрстки.
Markup Validation Service
Валидатор кода. Проверяет код на корректность, чтобы он соответствовал синтаксису. Валидация кода — первый и обязательный этап проверки емейл-вёрстки.
Инструменты отладки и валидации AMP‑писем
Позволяют проверить корректность AMP‑кода. Если код будет некорректен, то получатели не увидят AMP‑письмо, вместо него покажется HTML‑версия.
PerfectPixel
Позволяет сравнить вёрстку с макетом и сверстать всё точно по нему.
Marsy
Аналог стандартного инспектора элементов, но с расширенными функциями. Помогает проверить стилизацию элементов (их цвета, размеры, расстояние до других объектов и т. д.) и проверить точность соответствия макету.
TinyPNG
Сервис сжатия PNG-картинок. Сжимает изображения, чтобы они меньше весили и быстрее грузились в письмах.
Optimizilla
Сервис для сжатия PNG- и JPEG-картинок. Также уменьшает изображения по весу, чтобы они быстрее грузились в письме.
Ну что, было полезно? Тогда сохраняйте эту подборку в закладки и делитесь ею с друзьями.
А какими инструментами для вёрстки писем и оптимизации этого процесса пользуетесь вы? Из этого списка или дополнительно. Делитесь в комментариях к статье 😉