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


    Автор изображения 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="1450828071767932483708" 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="" width="32" height="32" alt="fb"></a>  
    			<a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="tw"></a>  
    			<a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>  
    			<a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" 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="1450828071767932483708" 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="" width="32" height="32" alt="fb"></a>  
    			<a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="tw"></a>  
    			<a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>  
    			<a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>
    		</td>
    	</tr>
    </table>
    </td>
    </tr>
    </table>
    


    Резюмирую


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

    Я изложил самые наболевшие примеры, которые встречаются в моей работе регулярно. Если у вас есть частные проблемы, описывайте их в комментариях, присылайте в личку или на dudeonthehorse собака gmail точка com. Я с удовольствием помогу решить проблему и, возможно, открою новые нюансы при верстке, о которых напишу в будущем.
    Метки:
    • +12
    • 33k
    • 6
    Поделиться публикацией
    Комментарии 6
    • 0
      Как мобильное письмо показывается в интерфейсе самого гмейла?
      Разве все эти media query там сработают?
      • –1
        В самом гмыле все будет без изменений. На то оно и мобильное письмо, чтобы вести себя иначе только на мобильных платформах.
      • +5
        А вы учитываете в своих рассылках увеличение пользователем размера шрифта на девайсе?

        На айпад-мини я выставил шрифт покрупнее, чтобы не видеть сглаживания шрифта, так вёрстка во многих рассылках поехала, особенно отличился Амазон — строки накладываются друг на друга. Я отправил скриншот письма им в саппорт, так они тупые сказали, что письмо не от них, и мне следует его удалить :)
        • –1
          Сложный момент, если задуматься. Если мы имеет текст в рамках фиксированного блока, то увеличение шрифта может его сломать. Решение: делать максимально просто дизайн.

          Насчет накладывания строк друг на друга — палка о двух концах. С одной стороны если указывать line height в EM'aх, то накладывания быть не должно. С другой стороны, если почтовый клиент своими настройками влияет на исходные стили (размер шрифта), то должен учитывать и корректировку остальных моментов.

          Другими словами пока не вставало проблемы, надо изучать.
        • +1
          Речь идет о родных приложениях от Gmail на iphone и android? Потому как почтовый клиент Mail на iphone отлично воспринимает media queries.
          • 0
            Речь идет только о Gmail. В остальных верстать одно удовольствие, никакой магии.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.