16 новых адаптивных html-шаблонов

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

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

Шаблоны имеют 5 тем: новости (ньюслеттер), праздники, мероприятие (ивент), промо и магазин.

Вот лишь пару из них:

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

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

Отображение на смартфонах и планшетах

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

Почтовые приложения

Не все почтовики имеют свои мобильные приложения и не все приложения распознают адаптивность.

Например приложения для Gmail, Yahoo и Outlook.com (бывший Hotmail), как для платформы Android, так и для iOS, прекрасно распознают адаптивные шаблоны.

Приложения Gmail для iPhone

      

Приложения Yahoo Mail для iPhone

      

Приложения Gmail для Android

      

Приложения Outlook.com для Android

      

Мобильные приложения Яндекса и Mail.ru, увы — нет. Все что они делают, так это масштабируют письмо по ширине экрана и для того, чтобы его прочитать, пользователю смартфона придется его увеличить (иначе — зумить).

Родные почтовые клиенты

У смартфонов Android и iOS есть свои родные email-клиенты, которые как раз прекрасно справляются с адаптивностью.

Родной почтовый клиент iPhone

      

Родной почтовый клиент iPad

Родной почтовый клиент Android

      

Как редактировать адаптивные шаблоны

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

Горизонтальные и вертикальные блоки

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

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

Можно удалять

Один или несколько основных горизонтальных блоков:

Один или несколько горизонтальных блоков внутри одного вертикального блока:

Нельзя удалять

Вертикальные блоки, иначе нарушается адаптивность шаблона:

Пустые вспомогательные блоки между вертикальными элементами:

Для того, чтобы элементы хорошо отображались и на десктопе, и на экране смартфона, в структуру шаблоны вставлены специальные «пустые», вспомогательные блоки. Тут, например, кажется что все криво и косо, но достаточно посмотреть на превью письма, чтобы убедиться что на самом деле все в порядке (это кстати ваш первый проверочный пункт — посмотреть превью).

Изображения и картинки

Заменять картинки следует используя соответствующую иконку в панели инструментов . Придерживайтесь заданной ширины изображений. От 320px до 590px для главной/большой картинки и логотипа, и 276px — для маленьких. Высота картинки значения не имеет.

Меняя ширину большого изображения или лого, не забывайте указать это же значение и в дополнительных свойствах изображения — в процентах. Например, если ширина 590px — это 100%, 510px — это 86%, 320% — это 54% и тд.

Маленьких картинок (276px) это не касается.

Касаемо других свойств картинок: можно изменить фон картинок, стиль alt-текста, скруглять края, бросать тень. НЕ советуем оформлять картинку рамкой (border), так как это может нарушить правильное отображение шаблона на определенных девайсах.

Какие элементы стиля можно редактировать

Можно менять цвет фона, цвет, размер и стиль шрифта (заголовки и текст), а также цвет и размер кнопок. Можно изменить выравнивание текста, хотя это сработает только для десктопной версии. Для большинства элементов стиля, для мобильной версии, в заголовках шаблонов прописано выравнивание по центру, так как это обеспечивает наибольшую читаемость. Еще можно поэкспериментировать с отступами текстовых блоков (padding). По большому счету, все что касается inline css можно редактировать.

***

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

Напоминаем, что эти же шаблоны, в скором времени появятся и в нашем новом html-редакторе drag’n’drop.

Источник