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

37

Від автора: у цьому уроці ми познайомимося з фреймворком 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 необхідно відкрити командний рядок і прописати команду:

npm install —global foundation-cli

Потім необхідно відкрити директорію проекту за допомогою команди cd [шлях до папки з проектом]. В папці проекту необхідно виконати команду:

foundation new —framework emails

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

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

Запускаємо двигун

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

watch foundation

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

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

Папка src

В директорії проекту ви знайдете папку src, в якій будуть:

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

layouts, обгорткові макети

pages, базовий HTML-код

partials, повторно використовувані частини HTML

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

Сітки

У Foundation використовується 12-тиколоночная сітка. Так як в електронних листах горизонтальне простір часто обмежена, особливо під час перегляду на мобільних пристроях, то рекомендується використовувати одну чи дві колонки максимум.

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

: контейнер для рядків

: колонка з контентом

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

One Column

Після компіляції ця простенька розмітка дає нам наступний код:

One Column

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

One Column
Column Two

На ділі для створення структури ми використовуємо один тег container і набір row і column.

Створюємо електронний лист

Розуміючи основи Inky, давайте змінимо тему повідомлення. У хедері файлу pages/index.html необхідно змінити код нижче – якщо ви працювали з YAML, то вам повинна бути знайома ця форма «Front Matter»:


subject: Cake Poker Summer Tournament

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

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

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

Вступний текст

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

Our Dear Poker fan! 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!

The grand prize is 1 million euros and life time 10% online rakeback!

Зображення

Я додав зображення з містом, в якому буде проводитися турнір. Шлях до зображення також прив’язаний до папки документа.

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

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

Додаткова інформація

Розділ з додатковою інформацією трохи складніше, в ньому описані деталі майбутньої події. У цій секції я зробив у рядку 2 колонки, кожна рядок з окремим поясненням. І знову, на мобільних пристроях колонки розсуваються на всю ширину екрану.

Details about the tournament

London, Royal Hall of Gamblers

The perfect place for a modern poker championship.

Markuee Hotel

Nearby four star **** accomodation with full service and great food.

Massage

A free service for all tournament players.

Buy-in

500 + 50 GBP

Кнопка

І врешті для реєстрації учасників я додав кнопку Register. Кнопка створюється з допомогою button і тега center.

Register

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

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

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

Якщо в проекті нам все подобається, можна виконати команду нижче, і всі стилі пропишуться безпосередньо в розмітку, а проект буде стиснутий:

npm run build

Після цієї команди в папці dist буде лежати минифицированная фінальна версія, яку можна використовувати, але вже не можна редагувати!

Висновок

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