От автора: в этом уроке мы познакомимся с фреймворком 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 необходимо открыть командную строку и прописать команду:
|
1 |
npm install --global foundation-cli |
Затем необходимо открыть директорию проекта с помощью команды cd [путь к папке с проектом]. В папке проекта необходимо выполнить команду:
|
1 |
foundation new --framework emails |
Выскочит вопрос «Как называется проект?» (без пробелов). Вам необходимо указать имя проекта, нажать Enter и немного подождать, пока создадутся все файлы проекта.
Запускаем двигатель
На этом этапе все файлы проекта созданы, модули Node и компоненты Bower установлены. Для запуска фреймворка и сервера необходимо зайти в папку проекта и выполнить команду:
|
1 |
foundation watch |
После этого в вашем браузере откроется веб-адрес по умолчанию (часто это //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. Одноколоночная секция:
|
1 2 3 4 5 |
<container> <row> <columns small="12" large="12">Column One</columns> </row> </container> |
После компиляции эта простенькая разметка дает нам следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<table class="container"> <tbody> <tr> <td> <table class="row"> <tbody> <tr> <th class="small-12 large-12 columns first last"> <table> <tr> <th>Column One</th> <th class="expander"></th> </tr> </table> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table> |
Ниже – пример сетки с одной строкой, в которой две колонки (на маленьких экранах колонки сжимаются до 12, а на больших – до 6).
|
1 2 3 4 5 6 |
<container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container> |
На деле для создания структуры мы используем один тег container и набор row и column.
Создаем электронное письмо
Понимая основы Inky, давайте изменим тему сообщения. В хедере файла pages/index.html необходимо изменить код ниже – если вы работали с YAML, то вам должна быть знакома эта форма «Front Matter»:
|
1 2 3 |
--- subject: Cake Poker Summer Tournament --- |
Область логотипа
Для вставки логотипа используется обычный HTML тег img в теге column. Путь к логотипу начинается из папки документа, а само изображение лежит в папке assets. Я дополнительно добавил пустую строку над изображением, прописав тег row с пустой колонкой column:
|
1 2 3 4 5 6 7 8 9 |
<row> <columns small="12" large="12"> </columns> </row> <row> <columns small="12" large="12"> <img src="../assets/img/logo.png" alt="Cake Poker logo"> </columns> </row> |
Вводный текст
Дальше внутрь container я добавил пару строк со вступительным текстом: приветствие и информация по поводу главного приза.
|
1 2 3 4 5 6 7 8 9 10 |
<row> <columns small="12" large="12"> <p><strong>Our Dear Poker fan!</strong> We got news for you: the summer championship is coming soon. If you want to participate, please register your place before the 5th of June!</p> </columns> </row> <row> <columns small="12" large="12"> <p>The grand prize is <strong>1 million euros</strong> and life time 10% online rakeback!</p> </columns> </row> |
Изображения
Я добавил изображение с городом, в котором будет проводиться турнир. Путь к изображению также привязан к папке документа.
|
1 2 3 4 5 6 7 |
<row> <columns small="12" large="12"> <center> <img src="../assets/img/london.jpg" alt="London picture"> </center> </columns> </row> |
Обратите внимание на то, что тег img завернут в center. Данный тег нужен для того, чтобы Inky подключил специальные классы выравнивания – нам не нужно заботиться о точной центровке изображения.
Дополнительная информация
Раздел с дополнительной информацией немного сложнее, в нем описаны детали предстоящего события. В этой секции я сделал 2 колонки в строке, каждая строка с отдельным пояснением. И опять, на мобильных устройствах колонки раздвигаются на всю ширину экрана.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<row> <columns small="12" large="12"> <p>Details about the tournament</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>London, Royal Hall of Gamblers</em></p> </columns> <columns small="12" large="6"> <p>The perfect place for a modern poker championship.</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>Markuee Hotel</em></p> </columns> <columns small="12" large="6"> <p>Nearby four star **** accomodation with full service and great food.</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>Massage</em></p> </columns> <columns small="12" large="6"> <p>A free service for all tournament players.</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>Buy-in</em></p> </columns> <columns small="12" large="6"> <p>500 + 50 GBP</p> </columns> </row> |
Кнопка
И в конце для регистрации участников я добавил кнопку Register. Кнопка создается с помощью button и тега center.
|
1 2 3 4 5 6 7 8 9 10 11 |
<row> <columns small="12" large="12"> <center> <button href="//webdesign.tutsplus.com">Register</button> </center> </columns> </row> <row> <columns small="12" large="12"> </columns> </row> |
Скомпилированная версия
При внесении изменений во время разработки ваш проект постоянно обновляется в браузере. Скомпилированный код лежит в папке dist, основном файле index.html и css/app.css.
Заключительный этап
Если в проекте нам все нравится, можно выполнить команду ниже, и все стили пропишутся напрямую в разметку, а проект будет сжат:
|
1 |
npm run build |
После этой команды в папке dist будет лежать минифицированная финальная версия, которую можно использовать, но уже нельзя редактировать!
Заключение
Вы только что создали свою первую адаптивную HTML версию электронного письма при помощи фреймворка Foundation for Emails! Мы создали простой макет, в котором есть ряды с одной и двумя колонками, изображения, много текста и кнопка Register.
Автор: Adam Burucs
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
