1. Напоминание о том, как создать шаблон рассылки новостей
2. Определите ширину для каждого элемента
3. Добавить медиа-запросы
4. Вставьте определенный «класс» для каждого элемента
5. Применить конкретный CSS к вашему новому "классу"
6. Создать дизайн двух колонок
7. Совместимость

Напоминание о том, как создать шаблон рассылки новостей

Прежде всего, вы должны иметь в виду, что шаблон бюллетеня сделан с таблицами .

Эта структура не такая гибкая, как структура сайта (с <div> и <span>), и не позволяет вам использовать веб-библиотеки, такие как: Bootstrap или Jquery.

Чтобы получить хороший результат на каждом почтовом клиенте (в основном Outlook), вы должны сделать это «старой школой»!

Вот краткий список из 5 важных правил:

- Нет специального шрифта.

- Нет фоновых изображений, только цвет фона.

- Нет процентной ширины. Определите ширину для каждого <table> и <td>.

- Ограничьте вложенность таблиц (слишком сложный HTML - плохая идея для вашей оценки спама!)

- Убедитесь, что ваша рассылка в порядке без картинок, потому что многие почтовые клиенты блокируют их автоматически (пользователь должен принять вашу электронную почту, чтобы увидеть ее фотографии). Заполните тег «alt», подумайте о цвете фона под вашими фотографиями, не используйте только одно изображение в качестве информационного бюллетеня. Вы можете проверить свою новостную рассылку без картинок в AcyMailing при предварительном просмотре новостной рассылки.

Определите ширину для каждого элемента

Основная идея адаптивного дизайна - изменить ширину каждого HTML-элемента в зависимости от размера экрана.

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

Вот пример:

Показать / Скрыть код php

<table width = "600"> <tr> <td width = "20"> </ td> <td width = "560"> Основная область содержимого </ td> <td width = "20"> </ td> </ tr> </ table>

Добавить медиа-запросы

Вы найдете эти медиазапросы в конце таблицы стилей CSS на каждом из наших адаптивных шаблонов.

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

Для этого просто поместите Media Query перед вашими css-свойствами, как условие. Вот пример с тремя основными размерами устройств: 600 пикселей (планшет, ноутбук), 480 пикселей (смартфон, горизонтальный вид), 320 пикселей (смартфон, вертикальный вид).

Показать / Скрыть код php

@ media (min -width: 10px) {. my_css_class {width: 300px; размер шрифта: 14 пикселей; ...}} @ media (min -width: 480px) {. my_css_class {width: 460px; размер шрифта: 14 пикселей; ...}} @ media (min -width: 600px) {. my_css_class {width: 600px; размер шрифта: 14 пикселей; ...}}

Вставьте определенный «класс» для каждого элемента

Чтобы применить конкретный CSS, сначала нужно определить определенный «класс» для каждого HTML-элемента, который будет перемещаться.

Всегда с одним и тем же примером, вот результат:

Показать / Скрыть код php

<table width = "600" class = "w600"> <tr> <td width = "20" class = "w20"> </ td> <td width = "560" class = "w560"> Основная область содержимого < / td> <td width = "20" class = "w20"> </ td> </ tr> </ table>

Применить конкретный CSS к вашему новому "классу"

Благодаря медиа-запросам вы можете переопределить ширину для каждого <table> <td>, но также и для изображений. Действительно, если вы не ограничите размер ваших изображений, они нарушат структуру вашего шаблона, если они больше экрана устройства. Используйте «максимальную ширину», чтобы ограничить размер ваших изображений, и «высоту: авто», чтобы сохранить правильные пропорции.

Новый CSS с медиа-запросами:

Показать / Скрыть код php

@ media (минимальная ширина: 20 пикселей) и (максимальная ширина: 320 пикселей) {. w600 {ширина: 320 пикселей! важный ; } w560 {ширина: 300 пикселей! важный ; } w20 {ширина: 10 пикселей! важный ; } w600 img {max -width: 320px! важный ; высота: авто! важный } . w560 img {max -width: 300px! важный ; высота: авто! важный}} @ media (min -width: 480px) {. w600 {ширина: 480 пикселей! важный ; } w560 {ширина: 460 пикселей! важный ; } w20 {ширина: 10 пикселей! важный ; } w600 img {max -width: 480px! важный ; высота: авто! важный } . w560 img {max -width: 460px! важный ; высота: авто! важный}} @ media (min -width: 600px) {. w600 {ширина: 600 пикселей! важный ; } w560 {ширина: 560 пикселей! важный ; } w20 {ширина: 20 пикселей! важный ; } w600 img {max -width: 600px! важный ; высота: авто! важный } . w560 img {max -width: 560px! важный ; высота: авто! важный } }

Создать дизайн двух колонок

Мы советуем вам сделать дизайн одной колонки, чтобы ограничить проблемы макета

Если вы хотите создать дизайн из двух столбцов с двумя основными областями содержимого, вам придется поместить каждую из них в отдельную таблицу <table> со свойствами align = "left" и "display: block".

Вот пример:

Показать / Скрыть код php

<table width = "600" class = "w600"> <tr> <td width = "600" class = "w600"> <table align = "left" width = "300" style = "display: block"> < tr> <td> Ваша первая область контента </ td> </ tr> </ table> <table align = "left" width = "300" style = "display: block"> <tr> <td> Ваш первый контент область </ td> </ tr> </ table> </ td> </ tr> </ table>

Совместимость

Большинство пользователей будут читать вашу рассылку на своих мобильных устройствах. Поэтому принятие адаптивного дизайна - это действительно ключ к успеху! Тем не менее, «отзывчивый дизайн» - это совсем недавно появившееся понятие, касающееся электронной почты, и вы не сможете получить ОТЛИЧНЫЙ результат на всех устройствах и на всех почтовых клиентах. Результат зависит от самого телефона, почтового клиента, а также от приложения, которое используется для чтения электронных писем.

Медиа-запросы приложения Amazon Kindle Fire ✔ Amazon Kindle Fire HD ✔ Android 2.1 Eclair ✘ Android 2.2+ ✔ BlackBerry OS 5 ✘ BlackBerry OS 6+ ✔ BlackBerry Playbook ✔ Приложение Gmail (Android и iOS) ✘ Устройства iOS (iPhone, iPod, iPad) ✔ только для собственного почтового ящика приложения (iOS) ✔ Приложение Microsoft Outlook Exchange (Android) ✘ Приложение Microsoft Outlook Exchange (Iphone) ✘ Microsoft Surface ✘ Microsoft Windows Mobile 6.1 ✘ Microsoft Windows Phone 7 ✘ Microsoft Windows Phone 7.5 ✔ за исключением учетных записей Gmail Microsoft Windows Phone 8 ✘ Palm's Open Web OS 4.5 ✔ Yahoo! Приложение (Android и iOS) ✘

Похожие

Комментарии