Каскадные Таблицы Стилей / Верстка HTML писем: думай как баг

в 17:52, , рубрики: css, gmail, html, mail.ru, верстка html писем, почта, почтовые рассылки, метки: , , , , , ,

Каскадные Таблицы Стилей / Верстка HTML писем: думай как баг
Всем привет!
Продолжая работать над версткой почтовых рассылок, порой натыкаюсь на новые баги, о которых, собственно и хочу рассказать в этом топике. Если не приводить список из прошлых статей, то получится не много, но тем не менее они заслуживают внимания. Так же есть чуточку приятных моментов.
Cellspacing

Как я уже писал более года назад, стОит обнулять все отступы для таблиц, и там где нужны отступы — добавлять новые ячейки с прозрачной .gif распоркой. Я решил упростить себе задачу и поиграться с базовыми отступами для таблицы.
Задача: расположить четыре картинки в таблице — по две на каждой строке. Между картинками должен быть зазор в 10px.
Экспериментальное решение:

Картинка Картинка
Картинка Картинка

Итог: провал! В gmail и Яндекс.почте (другие даже не стал проверять) отступы ведут себя как психопаты. Везде и по разному.
Рабочее решение:

Каскадные Таблицы Стилей / Верстка HTML писем: думай как баг неразрывный пробел неразрывный пробел неразрывный пробел неразрывный пробел
неразрывный пробел Картинка неразрывный пробел Картинка неразрывный пробел
неразрывный пробел Картинка неразрывный пробел Картинка неразрывный пробел
неразрывный пробел неразрывный пробел неразрывный пробел неразрывный пробел Каскадные Таблицы Стилей / Верстка HTML писем: думай как баг

Примечание: указал в коде «неразрывный пробел», т.к. парсер жрет его код. Так же ширину и высоту необязательно задавать для пустых ячеек — они сами подстроятся благодаря .gif распоркам и ячейкам с шириной и высотой. Для картинок разумеется надо много чего задавать, но это я опустил в данном примере, т.к. это не по существу. Все необходимое есть в предыдущих топиках.
Примечание №2: Для картинок установлено свойство display:block для того, чтобы не появлялся лишний отступ под картинкой. Так же это лечится оберткой картинки в

картинка

Но этот вариант не всегда подходит. Почему? В этом виноват mail.ru. Но об этом будет дальше.
Cellpadding

А вот тут нас ожидает хорошая новость. Можно, порой, не городить лишние распорки и использовать для отступов классический Cellpadding — багов замечено не было. Рабочий пример по принципу предыдущей задачи:

Картинка Картинка
Картинка Картинка

Почему не использовал этот вариант в предыдущей задаче? Все просто. Cellpadding дает двойной отступ внутри таблицы относительно ее внешней части.
Mail.ru и банальная проблема

Ребята определенно молодцы. Не только переписали интерфейс почты, но кодировочку в UTF перегнали. И правильно, долой KOI-8! Но и тут не обошлось без происшествий. Появился маленький баг, которого раньше не было.
Задача: расположить картинку(или ссылку с картинкой) в ячейке, которая шире картинки. Отцентрировать картинку. Не допустить появления небольшого отступа между нижней границей ячейки и самой картинкой.
Раньше решалось так:

описание

Пробовал так:

описание


Не работает.
Если картинку центрировать не нужно, то еще проще:

описание

Раньше первый вариант работал везде. Теперь работает везде кроме mail.ru почты. Общался на эту тему с Андреем Суминым — руководителем разработки клиентской части в mail.ru, и он порекомендовал использовать тег center для выравнивания. Пока не успел протестировать этот способ во всех клиентах, но ничто не мешает использовать этот вариант вместе с вышеуказанными одновременно. Так же Андрей сообщил, что парсер очень сильно кушает css в верстке, но бояться нечего. Все описанные мной приемы работают.
«Gif распорки зло! Попадешь в спам!» — Это не так

Не раз был разговор о том, что использование .gif распорок плохо воспринимается gmail. Якобы он считает это спамерским ходом. Товарищ rednaxi в этом обсуждении так же об этом говорил, приводя выдержку из официальных рекомендаций гугла.
Некоторые отправители вставляют в свои сообщения пустые пиксели слежения, позволяющие им узнать, когда получатель открыл сообщение. Мы настоятельно не рекомендуем включать такие пиксели в сообщение по двум причинам. Во-первых, Gmail по умолчанию не показывает изображения, поэтому пиксели слежения не смогут достоверно сообщить вам о том, что пользователь прочел ваше сообщение. Во-вторых, пиксели слежения часто применяются спамерами, поэтому их использование может привести к отправке вашего сообщения в спам.

Но проводя почтовые кампании на более, чем 300000 получателей проблем со спамом не было при использовании этих самых прозрачных .gif'ов. Единственное замечание относительно них — старые версии the BAT! окрашивают прозрачные пиксели в черный цвет. Если вам не плевать на этот почтовый клиент, то гифы вставляются нужного цвета, чтоб сливались с фоном.
Ну раз такая пляска

Пользуясь случаем отмечу еще одно приятное явление, не касающееся верстки. Тема отписки от рассылок обсосана донельзя, и наконец работает! По крайней мере я это вижу. Если конкретнее, то я частенько регистрируюсь на различных сайтах и сервисах, и постоянно получаю кучу всевозможных рассылок в свой ящик. Так вот — если раньше для отписки половина сайтов требовала дополнительных авторизаций, то теперь это действительно редкость! Во сяком случае на сайтах, на которые я подписан, а их не мало. В качестве хромой кобылы под звуки оркестра выходит Molotok.ru. Это творение рунета по прежнему требует авторизацию для отписки. Но ничего он у меня уже год в спам попадает.


  1. dudeonthehorse:

    Я смотрю те, кто публиковал тут этот топик даже и не думали позаботиться о том, что на месте таблиц должен быть их исходный код, а не то, что мы имеем.
    В таком виде статья не имеет никакой ценности(говорю как автор топика), кроме накручивания посещаемости.

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js