По-настоящему адаптивные письма. Часть… снова первая
Первый пост был написан скорей на эмоциях. Метод Николь мне показался местами несостоятельным и громоздким, но стоит признать, что он во многом превосходит мои наработки и отныне я с удовольствием перенимаю ее приемы. Тем не менее Николь сделала легкие огрехи, которые я исправил. Также я убираю лишний мусор и экспериментирую с универсальными решениями для типичных задач при верстке.
К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.
Обертка
Давайте обрисуем новую обертку письма(Github):
Скрытый текст
Товар 1
Item1 END -->
Товар 2
Item2 END -->
Рассмотрим каждый фрагмент кода подробнее.
Сначала мы создаем таблицу шириной 100%, в которой и размещаем блоки. Это сделано для того, чтобы все прочие объекты не пытались обтекать наши блоки с товарами.
Следует обратить внимание еще на пару моментов: параметр display у нашего блока следует указывать как inline-block, также следует указывать параметр float. Сами блоки следует писать без пробелов и переносов строк (они могут быть внутри комментариев, для бОльшего удобства восприятия). Это решит проблему в веб интерфейсе Outlook.com (hotmail.com), где блоки отображаются как "инлайновые".
Если в outlook 2010/2013 возникает проблема с лишними отступами, ее можно решить, заключив контент блока в
Но это может вызвать проблемы в outlook 2007.
Между блоков следует код в - этот код предназначен исключительно для Outlook 2007/2010/2013. Он не поддерживает блочные теги, поэтому специально для него мы формируем вспомогательные ячейки таблицы.
При объявлении блоков можно комбинировать значения ширины указанной в процентах и ограничением минимальной ширины (чтобы блоки перескакивали, достигнув какой-то минимальной ширины)
Родительская таблица
В любом случае, максимальную ширину письма следует ограничивать.
Для большинства веб интерфейсов достаточно указать параметр max-width, который и решит данную задачу. Но Outlook данный параметр игнорирует. Поэтому для версий Outlook 2003-2013, а также Lotus следует все обернуть в таблицу созданную специально для него, а также чтобы исключить проблем в устаревшей версии Safari, необходимо добавить div с ограничением максимальной ширины:
А также следует у родительской таблицы задать класс, ширину которого описать в области head. При этом следует прописать параметр для мобильных устройств:
@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) < table[class="table600"]< width:100% !important; max-width:700px; >> .table600
Как вы видите, это несколько противоречит тому, что было написано в предыдущей статье об использовании style. Дело в том, что почти все веб-интерфейсы игнорируют данный параметр (вернее - вырезают), а вот мобильные почтовые клиенты по-умолчанию интерпретируют корректно (приложение Почта на Android до версии 5.0 и приложение Mail на iOS).
Это нам дает некоторую свободу в использовании дополнительных плюшек для мобильных устройств.
Изображения в тексте
Часто необходимо вставить изображение с обтеканием. Для корректного отображения в outlook следует использовать следующую конструкцию:
Медиа запросы(@media)
Наиболее популярные мобильные почтовые клиенты (стандартное приложение Android и iOS) поддерживают медиа-запросы, так что можно использовать стандартные приемы, применяемые при верстке адаптивных сайтов:
html < -webkit-text-size-adjust:none; -ms-text-size-adjust: none;>@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) < table[class="table600"]< width: auto !important; max-width:600px; >td[class="mob_center"] < text-align: center !important; >div[class="mob_center_bl"] < float:none !important; display: block !important; margin: 0 auto; >> .table600
Обратите внимание на первую строку - стиль -webkit-text-size-adjust:none; позволяет предотвратить увеличение шрифта на iOS-устройствах, это в значительной степени сделает отображение более аккуратным.
Также, вы, наверное, обратили внимание, что в качестве селекторов используются не классы, а атрибуты. Это критично для веб-интервейса yahoo.com
И так, подведем небольшой итог по данной статье:
Верстая адаптивное письмо следует помнить:
- параметры ширины должны быть указаны в процентах (если блок не является "плавающим")
- максимальная ширина блока, вместе со всеми внешними рамками и отступами не должна превышать 320px
- Outlook не воспринимает блочную структуру, для него нужно прописывать спец.теги, где описывать табличную структуру.
- Outlook.com(hotmail) плавающие блоки интерпретирует как инлайновые. поэтому не следует оставлять лишние пробелы и символы переноса строки
- приложение Gmail не поддерживает медиа-запросы (также как приложение от mail.ru, yandex.ru и большинство других)
- верстка писем,
- адаптивная верстка,
- копилка идей,
Хабр, давай пофиксим письма?
В очередной раз получив письмо от хабра, я расстроился. А дело вот в чем. На скриншоте слева мы видим нормальное адаптированное письмо. Так оно отображается во всех вменяемых мобильных почтовых клиентах, которые поддерживают media queries. Теперь давайте взглянем на скрин справа. Таким письмо мы видим в мобильных Gmail, Yandex, Mail.ru клиентах как на андроиде, так и на яблочке. Как вы уже возможно догадались, эти клиенты media queries не поддерживают.
В случае с хабром задача проста до боли. Нам нужно отказаться от медиазапросов в пользу банальной резиновой верстки с кусочками магии. Давайте представим, что текущее письмо хабра — это #NEWSLETTER# для упрощения восприятия кода.
Прежде всего рассмотрим обертку письма в ее текущем виде:
#NEWSLETTER#
Давайте избавимся от мусора:
#NEWSLETTER#
Уже намного лучше. А теперь давайте сделаем обертку адаптивной:
Похожие публикации: