Ваша первая адаптивная верстка email письма на Foundation for Emails

Ваша первая адаптивная верстка email письма на Foundation for Emails

От автора: в этом уроке мы познакомимся с фреймворком Foundation for Emails от ZURB. Мы установим его, узнаем, что входит в комплект и создадим с его помощью адаптивную email страницу.

Фреймворки

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

HTML версии электронных писем разительно отличаются от обычных веб-страниц. Это то же самое, что вернуться опять в 1999. Приходится работать с табличными макетами, инлайновыми стилями и подключать десктопные программы типа Thunderbird и Outlook, а также электронные ящики (Gmail, Yahoo). Решить эту проблему можно, выбрав современный HTML email фреймворк, такой как Foundation for Emails.

Что входит в комплект?

Для создания электронных писем ZURB предоставляет все необходимое в одном комплекте. Комплект состоит из:

Gulp: система автоматизации процесса разработки

Inky HTML: конвертирует обычный код в табличный

Sass: популярный CSS препроцессор

Inliner: инлайновые стили

BrowserSync: тестовый сервер для перезагрузки

Image Compression: автосжатие изображений

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

Создаем проект

Для работы я использую Windows 10, 64 bit. Если вы работаете из-под другой версии, это не должно вызвать проблем.
Стек работает с Node.js и его менеджером пакетов npm. Для установки Foundation for Emails необходимо открыть командную строку и прописать команду:

Затем необходимо открыть директорию проекта с помощью команды cd [путь к папке с проектом]. В папке проекта необходимо выполнить команду:

Выскочит вопрос «Как называется проект?» (без пробелов). Вам необходимо указать имя проекта, нажать Enter и немного подождать, пока создадутся все файлы проекта.

Запускаем двигатель

На этом этапе все файлы проекта созданы, модули Node и компоненты Bower установлены. Для запуска фреймворка и сервера необходимо зайти в папку проекта и выполнить команду:

После этого в вашем браузере откроется веб-адрес по умолчанию (часто это http://localhost:3000/). Перед вами будет новый готовый email шаблон:

Папка src

В директории проекта вы найдете папку src, в которой будут:

assets, стили и изображения

layouts, оберточные макеты

pages, базовый код HTML

partials, повторно используемые части HTML

Страница индекс находится в src/pages/index.html

Сетки

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

Foundation for Emails использует Inky, новый язык шаблонизации, который избавляется от сложной разметки, к чему неизбежно приводят табличные макеты. Ниже представлены теги на языке Inky, с помощью которых можно создавать сетки:

<container: контейнер

<row>: контейнер для строк

<columns>: колонка с контентом

Размер сетки можно задать с помощью атрибутов small и large. Одноколоночная секция:

После компиляции эта простенькая разметка дает нам следующий код:

Ниже – пример сетки с одной строкой, в которой две колонки (на маленьких экранах колонки сжимаются до 12, а на больших – до 6).

На деле для создания структуры мы используем один тег container и набор row и column.

Создаем электронное письмо

Понимая основы Inky, давайте изменим тему сообщения. В хедере файла pages/index.html необходимо изменить код ниже – если вы работали с YAML, то вам должна быть знакома эта форма «Front Matter»:

Область логотипа

Для вставки логотипа используется обычный HTML тег img в теге column. Путь к логотипу начинается из папки документа, а само изображение лежит в папке assets. Я дополнительно добавил пустую строку над изображением, прописав тег row с пустой колонкой column:

Вводный текст

Дальше внутрь container я добавил пару строк со вступительным текстом: приветствие и информация по поводу главного приза.

Изображения

Я добавил изображение с городом, в котором будет проводиться турнир. Путь к изображению также привязан к папке документа.

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

Дополнительная информация

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

Кнопка

И в конце для регистрации участников я добавил кнопку Register. Кнопка создается с помощью button и тега center.

Скомпилированная версия

При внесении изменений во время разработки ваш проект постоянно обновляется в браузере. Скомпилированный код лежит в папке dist, основном файле index.html и css/app.css.

Заключительный этап

Если в проекте нам все нравится, можно выполнить команду ниже, и все стили пропишутся напрямую в разметку, а проект будет сжат:

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

Заключение

Вы только что создали свою первую адаптивную HTML версию электронного письма при помощи фреймворка Foundation for Emails! Мы создали простой макет, в котором есть ряды с одной и двумя колонками, изображения, много текста и кнопка Register.

Автор: Adam Burucs

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree