Всем привет!
Продолжая работать над версткой почтовых рассылок, порой натыкаюсь на новые баги, о которых, собственно и хочу рассказать в этом топике. Если не приводить список из прошлых статей, то получится не много, но тем не менее они заслуживают внимания. Так же есть чуточку приятных моментов.
Cellspacing
Как я уже писал более года назад, стОит обнулять все отступы для таблиц, и там где нужны отступы — добавлять новые ячейки с прозрачной .gif распоркой. Я решил упростить себе задачу и поиграться с базовыми отступами для таблицы.
Задача: расположить четыре картинки в таблице — по две на каждой строке. Между картинками должен быть зазор в 10px.
Экспериментальное решение:
Картинка
Картинка
Картинка
Картинка
Итог: провал! В gmail и Яндекс.почте (другие даже не стал проверять) отступы ведут себя как психопаты. Везде и по разному.
Рабочее решение:
неразрывный пробел | неразрывный пробел | неразрывный пробел | неразрывный пробел | |
неразрывный пробел | Картинка | неразрывный пробел | Картинка | неразрывный пробел |
неразрывный пробел | Картинка | неразрывный пробел | Картинка | неразрывный пробел |
неразрывный пробел | неразрывный пробел | неразрывный пробел | неразрывный пробел |
Примечание: указал в коде «неразрывный пробел», т.к. парсер жрет его код. Так же ширину и высоту необязательно задавать для пустых ячеек — они сами подстроятся благодаря .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. Это творение рунета по прежнему требует авторизацию для отписки. Но ничего он у меня уже год в спам попадает.
Я смотрю те, кто публиковал тут этот топик даже и не думали позаботиться о том, что на месте таблиц должен быть их исходный код, а не то, что мы имеем.
В таком виде статья не имеет никакой ценности(говорю как автор топика), кроме накручивания посещаемости.