(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
Quest Software. SQL Navigator Professional Edition
SAP® Crystal Dashboard Design Departmental 2016 WIN INTL NUL
Rational ClearCase Multisite Floating User License
SAP Crystal Reports XI R2 Dev 2006 INTL WIN NUL License (Version 11)
Microsoft Office 365 Бизнес. Подписка на 1 рабочее место на 1 год
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
СУБД Oracle "с нуля"
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
eManual - электронные книги и техническая документация
Новые материалы
Вопросы и ответы по MS SQL Server
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100