Бесплатный отзывчивый шаблон электронной почты

1. Детали шаблона
2. Как мы создали адаптивный шаблон?
3. 2. Плавающие элементы
4. Настроить прочь!
5. Не забудьте проверить!
6. Автор: Алекс Ильхан

Этот пост был обновлен 12 июля 2018 года. Последний раз он обновлялся в феврале 2017 года и первоначально был опубликован в 2013 году.

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

Этот шаблон предлагает три различных «макета», которые срабатывают в зависимости от ширины экрана. По умолчанию он поддерживает 1-3 столбца и при запуске каждого условного оператора медиа-запроса он преобразуется в макет из одного столбца для удобного чтения на мобильных устройствах.

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

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

Как только вы загрузите шаблон и закончите настраивать его под свой контент, не забудьте проверить электронную почту. Несмотря на то, что мы протестировали этот дизайн, небольшое изменение кода может привести к поломке электронной почты. К счастью, наша платформа показывает вам, как выглядит ваша электронная почта на более чем 70 клиентах и ​​устройствах. Подпишитесь на нашу бесплатную пробную версию и сделайте это сегодня!

Скачать

Детали шаблона

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

Точки останова, которые мы выбрали для этого шаблона:

1. Ширина менее 480px для iPhone и небольших смартфонов.
2. Ширина от 481 до 640 пикселей для устройств Android среднего размера
3. Размер по умолчанию 580 пикселей для планшетов, веб-приложений и клиентов электронной почты на рабочем столе.

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

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

Этот шаблон был протестирован в большинстве основных почтовых клиентов. Но не верьте нам на слово: Попробуйте сами сегодня с нашей бесплатной семидневной пробной версией ,

Как мы создали адаптивный шаблон?

1. Медиа-запросы

Вот весь блок стилей:

<style type = "text / css"> .ReadMsgBody {width: 100%; background-color: #ffffff;} .ExternalClass {width: 100%; background-color: #ffffff;} body {width: 100%; цвет фона: #ffffff; Маржа: 0; padding: 0;} table {border-collapse: collapse;} экран @media only и (max-width: 640px) {body [yahoo] .deviceWidth {width: 440px! важный; padding: 0 4px;} body [yahoo] .center {text-align: center! важный;}} экран @ only only и (max-width: 479px) {body [yahoo] .deviceWidth {width: 280px! важный; padding: 0 4px;} body [yahoo] .center {выравнивание текста: центр! важный;}} </ style>

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

2. Плавающие элементы

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

Например:
<table align = ”left”>

Достаточно просто, верно? И да и нет. Использование таблиц выравнивания влево или вправо в Outlook 2007, 2010 и 2013 приводит к дополнительному заполнению таблиц. Итак, мы рекомендуем проверить это Временное решение для заполнения Outlook для выравнивания таблиц, чтобы они идеально подходили друг другу. В случае этого шаблона мы использовали процентную ширину для каждой плавающей таблицы, а в некоторых случаях нам приходилось полагаться на «<p style =» mso-table-lspace: 0; mso-table-rspace: 0; поле: 0 ″> 'исправить.

Настроить прочь!

Не стесняйтесь настроить этот шаблон в соответствии с вашими потребностями. Вы можете сделать электронную почту короткой и приятной для своих мобильных читателей, скрывая некоторые элементы в макете с помощью медиа-запросов. И Android, и iOS поддерживают свойство display: none.

Надеюсь, это сэкономит вам время и стресс при создании следующего адаптивного письма!

Не забудьте проверить!

Мы тщательно протестировали этот шаблон и доверяем ему, но когда вы обновите его своим контентом, вам нужно будет протестировать его снова. Наименьшее изменение кода может иметь серьезные последствия в мире электронной почты. Вот почему Email на Acid предлагает неограниченное тестирование на более чем 70 почтовых клиентах и ​​устройствах. Проверьте нашу бесплатную семидневную пробную версию и начните тестировать новый шаблон уже сегодня.

Тест сегодня!

Примечание. Этот пост предназначен для образовательных целей. Используемые материалы, включая, помимо прочего, художественные работы, исследования, методы кодирования и общий макет, следует рассматривать как «производные», и мы никоим образом не намерены нарушать какие-либо неизвестные авторские права. Мы очень уважаем миллионы дизайнеров и разработчиков, которые постоянно вдохновляют нас учиться и творить.

Если вы хотите получить права на использование любого из шрифтов, которые были включены в иллюстрацию нашего шаблона, их можно приобрести через Интернет: Ручная готика , Жаждущий Грубый , Жаждущий сценарий , фанерный ,

Автор: Алекс Ильхан

Приветствуя весь путь из Англии, Алекс привносит свой опыт разработки электронной почты вместе с бесконечным потоком чашек чая и британского цинизма. Следуйте за ним в Твиттере: @omgitsonlyalex.