(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Верстка писем и email рассылок. Немного магии Gmail

Источник: habrahabr
dudeonthehorse


Автор изображения Mike, Creative Mints

Добрый день. Я уже не раз писал о том, что media_queries в почтовых клиентах работают прекрасно. Даже outlook.com в браузере их адекватно воспринимает. Но вот gmail на яблоке и андроиде так не считает.

Если в случае остальных клиентов мы можем сделать, например так:
@media only screen and (max-width:480px) { .big_img { display:none !important; } .small_img { display:block !important; } } @media only screen and (max-width:600px) { .big_img { display:block !important; } .small_img { display:none !important; } }
То в gmail на смартфонах и планшетах данный трюк не прокатит. Поясню. У нас есть две разные картинки для разных разрешений письма. И в зависимости от разрешения экрана мы показываем необходимое нам. Способ не претендует на правильность решения, а лишь показывает чего сделать нельзя. Ниже я покажу пару примеров того, как в gmail можно сделать все хорошо без особых усилий.

Допустим у нас есть письмо со следующим кодом:
<table class="wrapper" bgcolor="#eeeeee" width="600" cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><!-- content --></td> </tr> </table>
А так же media_queries для него:
@media only screen and (max-width:480px) { .wrapper { width:100% !important; } }

В этом случае на десктопах везде мы получим письмо шириной в 600px. В мобильных клиентах 100%. Исключение - gmail, который будет вести себя немного иначе. И по разному в зависимости от контента внутри обертки.

В случае кучи текста в блоке контента или вот такой картинки
<img src="http://example.com/image.png" width="100%">
Письмо будет отображаться нормально, по всей ширине мобильного устройства. Gmail хоть и проигнорирует указанные нами media_queries, но тем не менее подстроит резиновый контент под ширину экрана девайса.

А теперь давайте дадим ему вот такой контент.
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#cccccc" align="center"> <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/b4a/216/54f/b4a21654ffd064069f349bd572f7332b.png" width="32" height="32" alt="fb"></a>   <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/1ef/eea/040/1efeea040a1d21001f46c0dfd93fbe1a.png" width="32" height="32" alt="tw"></a>   <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/558/805/086/55880508675da2db40244b2c2e7aa794.png" width="32" height="32" alt="vk"></a>   <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/cbd/d4f/43b/cbdd4f43bc9dd167a99d2950b834909e.png" width="32" height="32" alt="vk"></a> </td> </tr> </table>
Тут мы имеем четыре иконки соцсетей. Так вот мобильный gmail в таком случае эту табличку на всю ширину не растянет. Он сделает ее по ширине в размере места, которое занимают иконки внутри таблицы.

Как сделать хорошо? Очень просто. Объедините блок социальных иконок с блоком резинового контента вот так
<table class="wrapper" bgcolor="#eeeeee" width="600" cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><img src="http://example.com/image.png" width="100%"></td> </tr> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#cccccc" align="center"> <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/b4a/216/54f/b4a21654ffd064069f349bd572f7332b.png" width="32" height="32" alt="fb"></a>   <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/1ef/eea/040/1efeea040a1d21001f46c0dfd93fbe1a.png" width="32" height="32" alt="tw"></a>   <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/558/805/086/55880508675da2db40244b2c2e7aa794.png" width="32" height="32" alt="vk"></a>   <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="http://habrastorage.org/storage3/cbd/d4f/43b/cbdd4f43bc9dd167a99d2950b834909e.png" width="32" height="32" alt="vk"></a> </td> </tr> </table> </td> </tr> </table>

Резюмирую


- Задавать фиксированные величины для обертки можно, gmail сам подстроит обертку под экран девайса
- Для элементов внутри обертки задаем процентные величины, либо фиксированные, но не более 320px по ширине.
- Мы не можем указывать разные стили отображения для разных разрешений экрана только в gmail клиентах.

Я изложил самые наболевшие примеры, которые встречаются в моей работе регулярно. Если у вас есть частные проблемы, описывайте их в комментариях, присылайте в личку или на dudeonthehorse собака gmail точка com. Я с удовольствием помогу решить проблему и, возможно, открою новые нюансы при верстке, о которых напишу в будущем.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 12.11.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Symantec Endpoint Protection Small Business Edition, Initial Hybrid Subscription License with Support, 1-24 Devices 1 YR
Microsoft Office 365 Бизнес. Подписка на 1 рабочее место на 1 год
Panda Global Protection - ESD версия - на 1 устройство - (лицензия на 1 год)
SmartBear LoadComplete - Node-Locked License Subscription w/ 250 Virtual Users (includes 1 year of Maintenance)
ESET NOD32 Антивирус - лицензия на 2 года на 3ПК
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
СУБД Oracle "с нуля"
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
eManual - электронные книги и техническая документация
Новые материалы
Компьютерные книги. Рецензии и отзывы
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100