3377
Когда дело доходит до планирования email маркетинговой кампании, маркетологам всегда приходится учитывать различные факторы, чтобы быть уверенными в том, что не будет никаких проблем с доставкой и рендерингом писем. Главный ключевой фактор – это поддержка разнообразных почтовых клиентов. Учитывая, что подписчики используют разнообразные почтовые клиенты и устройства, становится очень важным то, чтобы каждое письмо отображалось как задумано и не встречало критических проблем при рендеринге.
Последние исследования говорят о том, что на данный момент самым популярным клиентом являетсяApple iPhone, следом за ними идут Gmail, Apple iPad, Apple Mail и Outlook. Эти почтовые клиенты классифицированы, как самые широко используемые и самые редко используемые. 80% подписчиков используя самые популярные клиенты, сталкиваются с проблемами при рендеринге, таким образом рост возрастает вероятность неверного отображения письма.
Давайте быстро пробежимся по основным моментам в разработке писем, которые вызывают затруднения при рендеринге письма в самых популярных почтовых клиентах.
Десктопные почтовые клиенты
Gmail для десктопа – это пожалуй самый удобный и самый популярный почтовый клиент среди пользователей.
С чем тут можно столкнуться? Во-первых, сообщение может обрезаться, поэтому старайтесь, чтобы размер письма был ниже 102кб и избегайте ненужных стилей.
<style> и <link> не поддерживаются в шапке, когда письмо отправлено через почтовик. Поэтому нужно переписывать код, добавляя цвет стиля для каждого элемента ссылки.
Также тут не работают селекторы атрибутов, поэтому вместо них используем классовые селекторы.
Фоновые изображения не поддерживаются для неродных идентификаторов, подстроенных под Gmail. Используйте цвет фона, как подложку. По-хорошему вообще всегда его используйте.
Outlook и Outlook.com это стандартные почтовые клиенты для любой рабочей среды.
Шрифты Google не поддерживаются, используйте подходящие фолбечные шрифты с условными Outlook комментариями. Также тут не поддерживается max-width и min-width. Используйте таблицы с фиксированной шириной и флюидные шаблоны с фиксированной шириной с медиа запросами.
Также не поддерживаются внешние отступы в <p> и <a>. Используйте <td> тег для добавления внешнего отступа.
Также клиент от Microsoft показывает только первый кадр GIF в письме. Так что используйте статичный фолбэк для GIF или попытайтесь донести важное сообщение в первом кадре вашей GIF анимации.
Не поддерживает фоновые изображения на весь экран. Поэтому избегайте использования контентозависимой графики для фоновых изображений.
Email веб приложения
Gmail для мобильных устройств используется для отправки и получения gmail сообщений на ходу. Тут есть очень интересные тонкости в работе.
Gmail для iPhone конвертит числа и даты в синий цвет. Чтобы этого избежать используйте text-decoration и выставляйте классы в медиа запросах и указывайте !important чтобы переопределять инлайновые стили.
Между двумя изображениями появляется белая линия. Используйте display:block в теге изображения, чтобы её убрать.
Размер шрифта увеличивается на 50% в приложении Gmail. Включайте white-space: nowrap или используйте графические распорки. Указывайте !important и используйте контент для мобильных устройств.
Yahoo! Mail – с приходом новых почтовых клиентов, количество пользователей Yahoo значительно снизилось, но раньше он использовался широкими массами.
Флоаты не поддерживаются, добавляйте align=”top” для изображений. Используйте также align=”center”, а для таблиц с фиксированной шириной, используйте выравнивание по центру в td.
Min-width и max-width для вебпочты и андроид приложения не поддерживаются медиа запросами. Вместо них используйте атрибут ширины или/и соответствующе контролируйте стиль шаблона.
Outlook.com много людей до сих пор предпочитают традиционную версию, несмотря на пришествие новой версии outlook.com
# в href режет теги якорей. Используйте доменное имя вместо #.
Также иногда тут появляются ненужные белые пробелы между изображениями. Вы можете удалить ненужные отступы, добавив свойство display. Просто в стиле пропишите img {display: block;}
Не поддерживаются границы RGB. Используйте HEX коды для фоновых изображений.
Мобильные email приложения
Apple iPhone нативное приложение – это самый используемый почтовый клиент, потому что он безукоризненный и поддерживает интерактивные элементы.
Но и тут случаются неприятности. Например, текст ресайзится. Так что используйте минимальный размер шрифта в 22 пикселя для шапки и 14 пикселей для тела письма.
На iOS9, по сторонам появляется белое пространство. Поэтому указывайте margin и padding равные нулю для тела письма в инлайновом формате.
Так же для iOS9 не поддерживается селектор следующего элемента ~. Используйте смежные селекторы +, когда используете :hover или :checked
Для iOS10 адаптивные письма появляются увеличенными из-за авто-масштабирования. Отключить его вы можете, используя <meta name=”x-apple-disable-message-reformatting”> и добавляя padding:0 в тело письма.
Нативное приложение под Андроид. Андроид версии ниже пятой, используют нативные клиенты, которые затем были заменены на Gmail. Около 10% пользователей до сих пор используют эти клиенты под андроид.
Andorid 4.4 рендерит видео, но не отображает их. Используйте подкладку.
Некоторые Android клиенты не поддерживают селекторы следующего элемента E~Y. Используйте в этом случае для тела письма { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }.
Нативные клиенты для Samsung не поддерживают абсолютное позиционирование. Используйте маргины.
