Как использовать платформу Foundation для электронной почты для создания адаптивного дизайна электронной почты

Существует множество маркетинговых инструментов, которые позволяют с легкостью создавать адаптивный дизайн электронной почты. Дело в том, что вы можете предпочесть иметь больший контроль над тем, как выглядят ваши электронные письма, и лучший способ сделать это - создать их с нуля. Использование фреймворка, такого как Foundation for Emails, дает вам превосходный компромисс. Вам не нужно будет разрабатывать каждый компонент с нуля, но вы получите полный контроль над тем, как, когда и где использовать их.

В этой статье мы сначала объясним, что такое почтовые фреймворки и как они могут вам помочь. Затем мы перейдем к обсуждению Foundation для электронной почты и того, как вы можете использовать ее для создания собственных настраиваемых, отзывчивых почтовых кампаний. Давай приступим к работе!

Что такое почтовые платформы (и как они могут помочь вам создавать более качественные электронные письма)

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

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

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

• Готовые элементы помогают быстрее создавать электронные письма. В настоящее время большинство электронных писем включают в себя элементы, помимо изображений и текста, такие как кнопки и меню. Включение этих элементов может занять много времени, но фреймворк позволяет мгновенно вставлять и настраивать их.
• Отзывчивый "из коробки". Поскольку все больше и больше людей обращаются к мобильным устройствам, вам необходимо убедиться, что ваши электронные письма хорошо отображаются на их экранах. Большинство современных фреймворков по умолчанию отзывчивы, а это значит, что у вас на одну проблему меньше.
• Шаблоны могут помочь вам начать работу над дизайном. Многие современные фреймворки электронной почты включают в себя множество шаблонов, которые помогут вам быстро создавать кампании.

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

Введение в платформу Foundation для электронной почты

Прежде чем идти дальше, важно отметить, что в Интернете доступны две платформы Foundation - Foundation для сайтов и Foundation для электронной почты - и мы собираемся сосредоточиться на последней в этой статье. Главное преимущество - адаптивная сетка. Этот тип системы не является революционным, но популярность Foundation основана на простоте ее использования.

Выбрать фреймворк довольно просто (даже если у вас нет опыта кодирования), и вы можете выбрать одну из двух версий - одну на основе каскадных таблиц стилей (CSS), а другую - на Sass. Естественно, что версия Sass позволяет сэкономить еще больше времени, устраняя необходимость повторных CSS стилистики, но это требует некоторого знакомства с Node.js.

Наконец, Foundation for Email также предоставляет вам множество «шаблонов», таких как кнопки и меню, чтобы сделать вашу работу еще проще. Чтобы сэкономить больше времени, вы даже можете использовать шаблон вместо того, чтобы разрабатывать макет с нуля.

Ключевая особенность:

• Использует адаптивную сетку для создания современных почтовых кампаний.
• Предлагает версию фреймворка CSS или Sass.
• Позволяет использовать шаблоны для быстрого добавления общих элементов в электронные письма.
• Использует макеты, чтобы еще больше упростить процесс создания электронной почты.

Цена: Бесплатно | Больше информации

Как использовать основу для электронных писем для создания современного дизайна (за 4 шага)

Как мы уже упоминали, существует две версии Foundation for Emails. В этом разделе мы собираемся использовать вариант CSS, поскольку для его настройки требуется меньше усилий. Кроме того, конечные результаты должны выглядеть одинаково - все, что меняется, - это то, как вы их добиваетесь.

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

Шаг № 1: Загрузите Foundation для файлов электронной почты

Прежде всего, перейдите на страницу « Начало работы с электронной почтой» и нажмите кнопку « Загрузить стартовый комплект» под заголовком «Версия CSS» :

Получив файл, распакуйте его и извлеките его содержимое в новую папку. На этом этапе ваша папка должна содержать файл index.html и две подпапки - одну для вашего CSS, а другую для ваших шаблонов.

А пока запустите свой любимый текстовый редактор и откройте в нем файл index.html . Он должен быть довольно пустым, но мы скоро это исправим.

Шаг # 2: ознакомьтесь с сеткой

Отзывчивость Foundation for Email основана на ее гибкой сетке. Если вы составляете электронное письмо с нуля, вам нужно создать свою собственную сетку для сегментирования разделов электронного письма. Для этого мы собираемся использовать три разных компонента: контейнеры, строки и столбцы.

Откройте файл index.html вашего Foundation в текстовом редакторе и прокрутите вниз до раздела body :

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

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

<table class="container">
<tr>
<td></td>
</tr>
</table>

Теперь давайте добавим туда строку:

<table class="row"> <tr> <th></th> </tr> </table> 

Наконец, мы можем разделить эту строку на столбцы:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Имейте в виду, что каждая строка может содержать до 12 столбцов. Приведенный выше код сообщает вашему почтовому клиенту, что он должен отображать ваш контент, используя полные 12 столбцов на маленьких экранах, таких как мобильные устройства ( small-12 ), но занимать только шесть на настольных компьютерах ( large-6 ).

Проблема в том, что если ваша электронная почта отображается на большом экране, там шесть пустых столбцов, поэтому нам нужно добавить вторую таблицу, чтобы исправить это:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

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

Если бы вы теперь открыли свой файл index.html в браузере, вы бы увидели следующее:

Да, он довольно прост, но механика должна быть очевидна на этом этапе. В каждом электронном письме может быть столько строк, сколько вы хотите, и вы можете иметь до 12 столбцов для каждой строки. А пока продолжайте экспериментировать с сеткой, пока не найдете макет, который вам нравится, и используйте текстовые заполнители, чтобы помочь вам идентифицировать их, пока вы не начнете добавлять элементы.

Шаг № 3: Добавьте компоненты в свои электронные письма

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

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

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

Теперь перейдем к фоновым изображениям. Это немного сложнее, потому что вам нужно использовать класс- оболочку, чтобы они занимали всю ширину вашей строки и назначили им определенный фон с помощью CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

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

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

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

Шаг №4: Создайте стиль письма с помощью CSS

Некоторые почтовые клиенты (например, Microsoft Outlook) удаляют некоторые теги стилей из ваших HTML-файлов. Это сделано для того, чтобы электронные письма отображались без проблем, а также для устранения потенциальных угроз безопасности. Однако в результате ваши электронные письма будут выглядеть довольно скучно, если вы не добавите CSS непосредственно в свой HTML (или не встроите его).

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

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Это может немного запутаться, поэтому мы рекомендуем работать с файлами HTML и CSS отдельно, а затем использовать такой инструмент, как Foundation Inliner, чтобы объединить их за вас. Просто вставьте свой код, нажмите кнопку, и он позаботится обо всем остальном за вас.

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

Заключение

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

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

1. Загрузите файлы фреймворка.
2. Ознакомьтесь с сеткой.
3. Используйте компоненты для своих писем.
4. Создайте стиль своего электронного письма с помощью CSS.

У вас есть вопросы о том, как использовать платформу Foundation for Emails? Спросите в разделе комментариев ниже!

Миниатюра статьи, сделанная Faberr Ink / shutterstock.com.