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-гайды

CSS Guide EMX Tools

Can I email

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‑писем

от Mail.ru
от Gmail

Позволяют проверить корректность AMP‑кода. Если код будет некорректен, то получатели не увидят AMP‑письмо, вместо него покажется HTML‑версия.

PerfectPixel

Позволяет сравнить вёрстку с макетом и сверстать всё точно по нему.

Marsy

Аналог стандартного инспектора элементов, но с расширенными функциями. Помогает проверить стилизацию элементов (их цвета, размеры, расстояние до других объектов и т. д.) и проверить точность соответствия макету.

TinyPNG

Сервис сжатия PNG-картинок. Сжимает изображения, чтобы они меньше весили и быстрее грузились в письмах.

Optimizilla

Сервис для сжатия PNG- и JPEG-картинок. Также уменьшает изображения по весу, чтобы они быстрее грузились в письме.

Ну что, было полезно? Тогда сохраняйте эту подборку в закладки и делитесь ею с друзьями.

А какими инструментами для вёрстки писем и оптимизации этого процесса пользуетесь вы? Из этого списка или дополнительно. Делитесь в комментариях к статье 😉

Проверьте на ошибки вашу рассылку и емейл-стратегию
Пришлём чек-лист на ваш емейл.
Имя
Email *
Array
(
    [0] => WP_Term Object
        (
            [term_id] => 1425
            [name] => Статьи
            [slug] => articles
            [term_group] => 0
            [term_taxonomy_id] => 1907
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 545
            [filter] => raw
            [cat_ID] => 1425
            [category_count] => 545
            [category_description] => 
            [cat_name] => Статьи
            [category_nicename] => articles
            [category_parent] => 0
        )

)
Поделиться статьёй
Подписаться на рассылку