Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Создание простого адаптивного HTML-шаблона электронного письма

by
Length:LongLanguages:

Russian (Pусский) translation by Sergei Tolkunov (you can also view the original English article)

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

Медиа-запросы: только полдела

Было время, когда было вполне достаточно определения типа устройства для создания адапивного шаблона электронного письма, которое одинаково хорошо отображалось бы и в iOS, и в Android почтовых клиентах, оба семейства смартфонов поддерживали CSS свойство @media.

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

Наиболее примечательным является последнее обновление приложения Gmail для Android, которое является в два раза более популярней, чем стандартное почтовое Android-приложение (что составялет 11% от общих запусков). Оно никогда не поддерживало media-запросы, и до сих пор не поддерживает, однако сейчас оно масштабирует ваши электронные письма путем сжатия размера внешней таблицы для заполнения всей доступной области отобржения экрана. Этот процесс сложно проконтролировать и, в том случае, если все ваши письма зависят от медиа-запросов для правильного отображения на мобильных устройствах, создается несколько неприятных результатов.

Почему плавающий шаблон "темная лошадка"

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

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

Сегодня мы этим и займемся.

pure-base

Первый этап

Давайте начнем с создания пустого шаблона.

Все что мы создаем, так это наша базовая страница с собственным заголовком, типом документа и таблицей-контейнером с примененным цветом фона (и для body-страницы, и для большой таблицы-обвертки, так как пока стилизация тэга body не поддерживается полностью). Для получения более подробной информации этой первоначальной настройки, просмотрите Создание HTML-шаблона электронного письма в Scratch.

Я расположила главную таблицу контента по центру с помощью класса 'content'.

Обратите внимание

Примечание: в ходе выполнения урока вы заметите то, что я собираюсь разместить CSS в заголовке страницы. Обычно я размещаю стили в заголовке страницы, когда собираюсь использовать их снова, или оставить встроенными одноразовые стили.

Важно: Когда вы используете CSS в заголовке вашего документа, вы обязаны в конце разработки использовать инструменты для их преобразования во встроенные. Если вы используете сервисы, наподобии MailChimp или Campaign Monitor, они автоматически предложат вам преобразовать эти стили во встроенные, когда вы импортируете вашу разметку. Вы обязаны это делать, потому что некоторые почтовые клиенты, такие как Gmail, проигнорируют или вырежут содержание вашего тэга <style>, или попросту проигнорируют их в целом. Вы также можете использовать такое приложение, как Premailer для преобразования ваших стилей во встроенные. Если вы будете испольвовать Premailer или подобный инструмент, не забудьте вырезать ваши медиа-запросы перед обработкой (так как мы хотим оставить их нетронутыми), затем повторно вставьте их. MailChimp и Campaign Monitor позаботиться об этом автоматически.

Сокрытие мобильных стилей от Yahoo!

Вы заметите, что тэг body имеет дополнительный атрибут. Почта Yahoo любит интрепретировать ваши медиа-запросы как проповеди, поэтому, чтобы предотвратить это, вы должны использовать селекторы атрибутов. Я нашла простейший способ сделать это (как было предположено Email by Acid) - просто добавить случайный атрибут в тэг body. Я использовала ожидаемое 'yahoo', но вы можете использовать что-либо своё.

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

Два трюка для усвоения плавающего метода

Как вы можете заметить, нашей таблице 'content' присвоены все 100% ширины, поэтому она будет занимать всё доступное в ширину пространство экрана смартфона или планшета. Мы также назначим максимальную ширину 600px для избежания отображения шаблона на экране монитора или устройств с большим расширением.

Мы имеем два достаточно хитрых момента, которые можно использовать для того, чтобы убедиться, что всё отображается как запланировано на всех почтовых клиентах. Эти два фикса благодаря отличному уроку Тины Йе доступны на FogCreek Blog.

1. Преодоление отсутствия поддержки свойства max-width

К сожалению, свойство max-width поддерживается не всеми почтовыми клиентами. Для того, чтобы ваши письма правильно отображались в Outlook и Lotus Notes 8/8.5, нам надо поместить ("обвернуть") каждую таблицу в некоторый в код условия, который создает всепоглощающую таблицу. Это в основном нацелено на работу с IE (его движок рендеринга используется в Lotus Notes) и Microsoft Outlook.

Помещаем нашу таблицу в некоторый код условия:

2. Исправление для Apple Mail

Покажется странным, но Apple Mail (обычно очень прогрессивный почтвый клиент) также не поддерживает свойства max-width. Но так как оно поддерживает медиа-запросы, мы можем добавить один, который укажет приложению происвоить ширине класса 'content' нашей таблицы всю доступную устройству ширину, тем самым полностью отображая все 600px.

Создание заголовка

Создаем первую строку таблицы - заголовок. Добавляем нижеуказанное для стилизации строки, которую мы создали:

И затем в своих CSS стилях, задаем подложку для нашего заголовка.

Создание первой адаптивной строки

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

Левая колонка

Заменим наше маленькое привествие тем, что приведено ниже.

Создаем таблицу в 70px и также добавляем небольшую подложку, которая будет смотреться, как зазор между нашими двумя колонками. Подложка снизу добавит вертикального просвета, когда наши колонки нагромоздяться друг на друга на смартфоне.

Правая колонка

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

pure-frog

Если вы будете оставлять в запасе по-крайней мере 25px, ваши таблицы будут такими, как вы ожидаете.

pure-frog

К более широкой правой таблице мы собираемся применить тот же метод, что и для нашей таблицы-контейнера, который включает в себя создание класса и также условного кода-обвертки. Для этой таблицы мы также задаем 100% ширины доступной на смартфоне, на котором она будет проваливаться вниз относительно левой таблицы.

Как вы можете увидеть, что я создала класс, названный 'col425', для этой таблицы и задала ширину 425px для него. Я поместила таблицу, которая будет содержать в себе другую таблицу в 425px шириной, в код условия. Затем мы добавляем наш класс также и в медиа-запрос, который мы создали для Apple Mail.

Сейчас внутри нашей ячейки добавим стилизированный заголовок.

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

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

pure-frog

Создание одноколоночной строки текста

Для создания одной строки текста, просто напросто добавим новую строку в нашу таблицу с классом '.content'. Этой строке добавим класс '.innerpadding' с многократно используемыми значениями подложки. Также добавим класс 'borderbottom', чтобы создать рамку для каждой строки.

CSS этой секции:

Создание двухколоночной статьи

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

Мы добавили кнопку с классом 'buttonwrapper'. Она содержит ячейку-распорку с цветовой заливкой фона и также текстовую ссылку внутри себя. Я предпочитаю использовать этот способ, потому что он позволяет использовать кнопки с плавающей шириной, что очень полезно при создании многократно используемых шаблонов, где ширина каждой кнопки может быть различной. Если же ширина вашей кнопки фиксирована, вы можете предпочесть использоватьBulletproof Button Generator.

Стили для нашей кнопки:

Также установим ширину для нового класса 'col380', и добавим наш размер в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

pure-frog

Создание одной колонки для изображения

Это очень простая строка. Просто установим для изображения 100% ширину письма и убедимся, что его высота установлена в auto.

В наших CSS:

Создание финальной строки обычного текста

Наконец мы добавим строку текста без рамки внизу.

Создание подвала

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

Добавим требуемые стили для подвала в CSS:

Оптимизация кнопок для мобильных устройств

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

Удалим цвет из тэга td, к которому он был применен и затем добавить его в тэг a с большой подложкой.

Я использую оба свойства max-width и max-device-width в этом медиа-запросе в попытке избежать баг Oulook.com IE9

Теперь, когда вы щелкните в любой части цветной кнопки это будет ссылка.

Дальнейшие усовершенствования с использованием медиа-запросов

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

В качестве примера мы добавим кнопке ссылку Отписаться, добавив ссылке определенный класс.

и добавляем соответствующие CSS стили в медиа-запрос:

pure-frog

Вы можете также наметить классы .innerpadding, .header и .footer, чтобы уменьшить влияние подложки для клиентов, которые поддерживает медиа-запросы.

Тестируй и двигайся дальше!

Наконец, как и всегда, убедитесь, что вы прошли валидацию (используя W3C Validator - вы можете иметь только одну ошибку с собственным атрибутом 'yahoo' тэга body) и протестируй всё ли в порядке, используя реальные устройства и на Интернет-просмотрищиках, наподобие Litmus или Email on Acid.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.