Адаптивные почтовики | Кодементор

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

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

Что такое адаптивные почтовые программы?

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

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

Пример адаптивного раздела

Адаптивный вид рабочего стола

Адаптивный вид для мобильных устройств

Как сделать адаптивный мейлер

Раньше мы не могли использовать медиа-запросы для почтовых программ, но после обновления Gmail 2017 Gmail теперь читает медиа-запросы на всех своих платформах (в приложениях и в Интернете) и в настоящее время является наиболее часто используемым почтовым клиентом. Это позволяет иметь различную структуру для мобильных и настольных компьютеров.

Загадка Outlook

Тот, кто когда-либо пробовал программировать почтовую программу для Outlook, знает, как сложно добиться на ней даже самых тривиальных вещей. Большинство свойств CSS не работают с ним (или, по крайней мере, не работают ожидаемым образом). Для Outlook (Windows Desktop) мы должны сохранить все свойства CSS встроенными. А мобильная адаптивная секция должна быть в пределах следующих комментариев

Адаптивная мобильная секция

Переадресованные почтовые программы

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

Матрица свойств Gmail

Матрица свойств Gmail (наиболее часто используемый почтовый клиент)

Матрица свойств Yahoo

Матрица свойств Yahoo

О чем следует помнить

• используется для информирования механизма рендеринга, какие теги HTML следует ожидать и какой набор правил придерживается HTML и CSS. Несмотря на то, что некоторые почтовые клиенты (клиенты веб-почты, такие как Gmail, Google Apps, Yahoo! Mail и Outlook.com) удаляют код и применяют свой собственный, рекомендуется включать его в код электронной почты.
• Ширина почтовика не должна превышать 600–650 пикселей.
• Руководство Apple по человеческому интерфейсу iPhone рекомендует минимальный целевой размер 44 пикселя в ширину и 44 пикселя в высоту. Нет ничего более бесполезного, чем облака крошечных ссылок на устройствах с сенсорным экраном.
• Минимальный размер шрифта, отображаемый на iPhone, составляет 13 пикселей. Имейте это в виду при стилизации текста, потому что все, что меньше, будет увеличено и может нарушить макет.
• По возможности используйте display: none; чтобы скрыть лишние детали в вашем мобильном макете, это уменьшит размер почтовой программы на мобильном телефоне, уменьшив прокручиваемый контент.

Яху Хак

По какой-то странной причине приложение Yahoo для Android не читает css, если оно встроено в тег. Нам нужно поместить его в тег.