Абсолютно новое руководство по поддержке CSS в электронной почте

  1. Что нового в обновлении 2017 года?
  2. Проверено больше возможностей CSS
  3. Проверено больше почтовых клиентов
  4. Полный редизайн
  5. Только веб
  6. Заворачивать

Интересный факт: с тех пор прошло более десяти лет Руководство по поддержке CSS в электронной почте было впервые выпущено ,

Не очень забавный факт: прошло почти 4 года с момента нашего последнего полного обновления результатов испытаний.

Руководство по CSS всегда было одним из наших самых популярных ресурсов, помогая людям во всем мире, которые пишут электронные письма, выполнять свою работу. Как разработчик электронной почты, я считал его знаковым интернет-ориентиром задолго до того, как присоединился к Campaign Monitor.

Но со времени последнего крупного обновления в 2013 году мы наблюдаем рост популярности новых почтовых клиентов и такие клиенты, как Gmail, претерпели значительные улучшения которые не были отражены в руководстве.

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

Но сегодня у нас есть что-то особенное для вас. Ознакомьтесь с новым руководством по CSS в электронной почте.

Что нового в обновлении 2017 года?

Что не ново! Когда мы приступили к работе над новым руководством по CSS, мы не просто хотели повторно протестировать и обновить то, что уже было там. CSS не стоит на месте за последние 3 года, как и почтовые клиенты.

Проверено больше возможностей CSS

Предыдущее руководство включало 111 различных функций, тогда как новое руководство охватывает в общей сложности 278 функций .

Это включает в себя передовые методы макета, такие как CSS сетка а также Flexbox и прогрессивные улучшения, такие как CSS анимация а также переходы , Другие дополнения включают расширенные типографские свойства, такие как Шрифт-функция-настройка а также Шрифт растяжения , чтобы увидеть, какие клиенты позволяют вам настроить ваши текстовые стили.

Мы также стали более детальными в нашем освещении Веб-шрифты где мы сейчас тестируем поддержку отдельных форматов, включая встроенный WOFF а также WOFF2 , И аналогично, мы не просто тестируем поддержка медиа-запросов , но индивидуальный функции медиазапроса лайк мин-ширина а также макс-разрешение ,

Мы также удалили все наши старые результаты тестов и протестировали каждую функцию в каждом почтовом клиенте, используя новый набор тестовых электронных писем, чтобы привести все данные в актуальное состояние.

Хотя большинство новых функций, которые мы добавили, не будут поддерживаться во многих старых почтовых клиентах, многие из них поддерживаются в достаточно современных клиентах, которые стоит рассмотреть, даже если это означает, что ваша электронная почта не будет выглядеть везде одинаково ,

Проверено больше почтовых клиентов

С 2014 года появилось много новых почтовых клиентов. Особенно на мобильных устройствах, где мы расширили наше руководство, чтобы включить приложения для Android и iOS таких клиентов, как Gmail, Yahoo! Почта и Outlook. За Android-приложение Gmail мы проверили IMAP а также Gmail адреса отдельно, чтобы захватить различия в рендеринге.

Мы также проверили 4.2.2 а также 4.4.4 версии Почты Android отдельно, поскольку между ними произошли серьезные изменения в поддержке CSS.

Для настольных клиентов, таких как Apple Mail, Thunderbird, AOL Desktop и Postbox, мы повторно протестировали последнюю версию. И для различных клиентов электронной почты для настольных компьютеров, выпущенных Microsoft на протяжении многих лет, мы постарались охватить как можно больше из них.

В общем, мы перешли от 24 до 35 почтовых клиентов. Если вы умножите это на количество протестированных функций, размер руководства по CSS увеличится более чем в три раза .

Полный редизайн

Наша предыдущая таблица поддержки CSS уже лопалась, особенно если вы пытались просмотреть ее на маленьком экране. Теперь, когда данные выросли втрое, нам пришлось изменить дизайн руководства, чтобы учесть увеличение объема информации.

Для этого мы заменили формат таблицы отзывчивым аккордеоном, где вы можете щелкнуть, чтобы развернуть содержимое, которое вы хотите прочитать.

Для этого мы заменили формат таблицы отзывчивым аккордеоном, где вы можете щелкнуть, чтобы развернуть содержимое, которое вы хотите прочитать

Если функция частично поддерживается или требует использования префикса поставщика, эта информация теперь отображается внутри строки, а не скрывается как всплывающая подсказка при наведении курсора, как раньше. Это изменение особенно удобно, если вы читаете на мобильном телефоне.

Чтобы упростить поиск по огромным объемам данных, есть также поле поиска, которое позволяет вам перейти непосредственно к функции, которую вы хотите проверить.

Чтобы упростить поиск по огромным объемам данных, есть также поле поиска, которое позволяет вам перейти непосредственно к функции, которую вы хотите проверить

В верхней части страницы вы также найдете меню всех почтовых клиентов, где вы можете нажать, чтобы увидеть обзор функций, которые не поддерживаются в каждом из них.

Возможно, моим любимым из всех улучшений является возможность глубокой ссылки непосредственно на определенную часть руководства.

Если вам постоянно приходится искать, какие виды медиа-запросов поддерживаются и где, вы можете добавить в закладки страница медиазапросов , Если кто-то спросит, работают ли фоновые изображения URI данных в электронной почте, вы можете указать их прямо на нужную ссылку ,

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

Наконец, мы добавили место под результатами для каждой функции, чтобы предоставить больше информации и соответствующих ресурсов. Это будет то, что мы будем заполнять постепенно с течением времени.

Только веб

Еще одно изменение заключается в том, что мы больше не предоставляем версии руководства в формате Excel и PDF. Есть несколько причин для этого.

Во-первых, увеличение содержания сделало эти форматы менее подходящими.

Во-вторых, мы хотим постоянно обновлять руководство. За кулисами мы добавили систему управления контентом, которая делает этот процесс намного более плавным, чем раньше.

И в-третьих, мы поняли, что для того, чтобы поддерживать руководство в актуальном состоянии, нам нужно было уменьшить любые трения, мешающие нам делать это. Поддержание единой версии руководства намного более осуществимо, чем поддержание трех форматов.

Так что, если вы среди избранных, которые имеют наша ограниченная версия постера руководства по CSS висит на стене: поздравляю - теперь это официально историческая реликвия. Только не кодируйте свои электронные письма, основанные на этом.

Заворачивать

Вы часто слышите, что большинство маркетологов электронной почты сейчас используют инструменты перетаскивания, такие как наш Email Builder разрабатывать свои электронные письма. Но что также верно, так это то, что в нашем сообществе больше, чем когда-либо, разработчиков электронной почты, которые творчески используют новейшие методы CSS и придумывают новые.

Мы рады наконец-то снабдить вас новейшим руководством по поддержке CSS в электронной почте.

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

Что нового в обновлении 2017 года?
Что нового в обновлении 2017 года?