Решения новых проблем с отображением в Gmail

Решения новых проблем с отображением в Gmail

Не каждый почтовый клиент одинаково показывает электронные письма. Это мы уже конечно же давно знаем.

А богатое HTML кодом письмо это как новый ребенок на игровой площадке, не каждый должен с ним играть прямо тут и сейчас. Некоторые будут готовы сразу поприветствовать его тут и сейчас (Apple Mail, Thunderbird), но вот некоторых придется поуговаривать (Gmail, Outlook, Yahoo!), чтобы они поиграли с этим письмом.

В этой статье мы расскажем про старые и новые хаки работы с Gmail при разработке email.

Как шалит Gmail?

В соответствии с опросом Litmus Client Market Share на март 2018 года , Gmail десктопный и Android держат 22% и 3% соответственно среди распространения почтовых клиентов. Таким образом очень важно, чтобы ваши письма рендерились как надо на обоих, когда большинство ваших подписчиков является пользователями Gmail.

На 29 марта 2018 года, много Gmail пользователей c Android, испытывали затруднения в получении писем, в которых изображения были расплющены и также были ненужные пробелы между разными секциями.

В то время как множество проблем прошлых лет были залатаны в последующих обновлениях, всё таки существуют общеизвестные беды, такие как:

Отключение графики по-дефолту

Недостаток инлайновой CSS поддержки

Нет поддержки медиа запросов

Float, margin, параграфы и padding не поддерживаются Gmail

Gmail приложение для iPhone превращает телефонные номера и даты в синий цвет по автомату.

Проблема с размерами изображений

Изображения стали несоразмерными в Gmail Android. Как лучшая практика при кодинге письма — делается display: block для размера в два раза меньше, чем у изображения, чтобы оно показывалось ясно на ретина дисплеях.

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

Выяснилось, что Gmail удаляет любое указание высоты в медиа запросах и автоматически наследует высоту из десктопной версии.

Таким образом, когда изображение просматривается в Gmail Android, оно имеет ширину относительно размеру экрана, но высота указывается с десктопного шаблона.

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

Во-первых не указывайте высоту для изображений в мобильном шаблоне. Во-вторых любая распорка, которую вы хотите использовать — в ней нужно добавлять cell-padding.

Адаптивные письма не рендерятся сторонними приложениями. Так как Gmail убрал медиа запросы из писем, адаптивки теперь должны кодится без медиа запросов. Такие шаблоны известны как Spongy.

1. @media only screen and (max-width: 480px)
2.  
3. {
4.  
5. .hide {display:none !important;}
6.  
7. }
8.  
9. <table cellpadding="0" cellspacing="0" border="0" class="hide">
10.  
11. <tr>
12.  
13. <td height="1" class="hide" style="min-width:700px; font-size:0px;
15. line-height:0px;">
16.  
17. <img height="1" src="spacer.gif" style="min-width: 700px;
19. text-decoration: none; border: none;” />
20.  
21. </td>
22.  
23. </tr>
24.  
25. </table>

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

Приложение Gmail увеличивает размер шрифта почти на 50%

В мобильном приложении, Gmail иногда автоматически увеличивает размер шрифта почти на 50%, в зависимости от ширины экрана. Это может значительно повысить читабильность, но может порушить общую концепцию шаблона. Есть 4 способа этого избежать.

1) Используйте display: none

1. <div style="display: none; line-height: 0; color: #ffffff;">
2. Hello World!
3. </div>

2) Используйте white-space: nowrap

1. <div style="white-space: nowrap; line-height: 0; color: #ffffff;">
2. Hello World!
3. </div>

3) Используйте изображение подкладку

1. <tr class="em_dn">
2.     <td>
3.       <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
4.         <tr>
5.           <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 600px;">
6.             <img src="spacer.gif" width="600" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;"/>
7.             </td>
8.           </tr>
9.       </table>
10.     </td>
11.   </tr>

4) Используйте div и &nbsp вместе

1. <div class="em_dn" style="font:20px courier; color:#ffffff; 
2. background-color:#ffffff;">
3. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
4. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
5. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
6. </div>

Gmail скрывает изображения по-дефолту

Мы не категоризируем это как сильную проблему. Так как 43% пользователей Gmail читают свои письма без изображений. Это показывают исследования.  Лучшей практикой тут является включение правильного альта с подходящим text-align. Но убедитесь в том, что когда изображение не загружается, оно не оставляет большое пустое место вместо себя. Для этого используйте display: none

1. td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide]
2.  
3. {
4.  
5. display:none !important;
6.  
7. }

Gmail стилизует ссылки синим подчеркиванием по-дефолту

Gmail не поддерживает черный, #00 и #000000 и заменяет их дефолтным цветом ссылки (#1155CC). Таким образом, чтобы пресечь то, чтобы ссылки показывались с синим подчеркиванием, вам нужно добавить следующие теги стилизации.

1. <a href=“http://www.site.com” style=”text-decoration:none;
2.  
3. color:#00001b”>Site
4.  
5. </a>

text-decoration: none удаляет подчеркивание, а color: #00001b выставляет цвет.

Внешние CSS стили отбрасываются

Gmail убирает любой CSS, который не инлайновый. Есть такие сервисы, которые могут вам помочь в этом, сделав нужные стили инлайновыми. Например, https://templates.mailchimp.com/resources/inline-css/

Кастомные веб-шрифты

По иронии, Google хостит библиотеку шрифтов, но Gmail не поддерживает использование внешних шрифтов. Лучше всего использовать подходящий fallback шрифт, во время экспериментов с кастомными шрифтами.

Белое место под изображениями

Эта проблема полностью исчезнет, если вы добавите display: block в код для вашего изображения.

1. <td style="padding: 0px; margin: 0px; font-size:16px; font-weight:bold;">
2. <img src="xyz.jpg" width="600" height="217" border="0" style="display:block;
3. padding: 0px; margin: 0px;" />
4. </td>

Gmail не поддерживает <style> <link> в <head>

Это пожалуй одно из самых разочаровывающих в этом списке. Gmail игнорирует любой style или link тег указанный в головной секции и следовательно вам нужно переписывать стандартный цвет шрифта, добавляя стиль цвета для каждой ссылки <a> в теле письма.

1. <a href="http://www.site.com " target="_blank"  style="color:#ffffff; 
2. line-height:32px; text-decoration:none; display:block; 
3. background-color:#e25b46;">
4. View Infographic
5. </a>

Float, margin, paragraph и padding не поддерживаются

Лучше всего придерживаться простой табличной системе вложенности, в которой каждый TD тег имеет соответствующие padding и margin.

1. <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
2.                                           <tr>
3.                                             <td align="right" width="3" valign="bottom" 
4. style="line-height:0px; font-size:0px;">
5. <img src="images/cuv3.jpg" width="3" height="3" alt=" " border="0" style="display:block;" 
6. />
7.                            </td>
8. </tr>
9.                                         </table>

Gmail соединяет письма с одинаковой темой

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

Заключение

В добавление к сказанным выше проблемам, у которых есть обходные пути, есть множество других, которые до сих пор не могут быть решены. Например такие как.

Частичная поддержка или её отсутствие:

1. Background-position

2. Селекторы наследования

3. Внешние отступы

4. Внутренние отступы

Эстетичные:

1. Background-position a:hover

2. Border

3. Наследование шрифтов

4. List-style-image