Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Верстка почтовых рассылок

CSS *Верстка писем *
Из песочницы
Tutorial
Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.
Читать дальше →
Всего голосов 150: ↑146 и ↓4 +142
Просмотры 70K
Комментарии 81

С версткой почтовых рассылок все не так уж плохо

CSS *
И снова рад приветствовать хабражителей!

На написание нижеследующего меня сподвиг этот комментарий из моего первого топика. Суть сводится к тому, что коварный парсер mail.ru вырезает инлайновые стили в верстке письма, а так же добавляет ужасные отступы к ячейкам таблицы, что превращает работу верстальщика в сплошную головную боль. Спешу опровергнуть сказанное злыми языками.
Читать дальше →
Всего голосов 38: ↑30 и ↓8 +22
Просмотры 13K
Комментарии 21

Верстка почтовых рассылок: взгляд изнутри

CSS *
Tutorial
И снова здравствуйте!

На сколько я могу судить, мой дебютный топик о верстке рассылок был полезен большому количеству хабровчан, и в этом я хотел бы не просто привести список правил и рекомендаций, а рассказать «что? зачем? и почему?». Какие либо моменты я могу опустить, но это лишь потому, что они были четко описаны в предыдущем топике.

Прежде всего хотелось бы заострить внимание на одном из персонажей, который часто употребляется в топике — это «различные веб-интерфейсы и почтовые клиенты». Немного нудно каждый раз повторять эту конструкцию слов, и мне кажется, что будет проще дать этому одно обобщающее слово. И так читая дальше воспринимайте слово «Демоны»(по другому их трудно назвать), как «различные веб-интерфейсы и почтовые клиенты». Ну что ж, начнем!
Читать дальше →
Всего голосов 102: ↑89 и ↓13 +76
Просмотры 14K
Комментарии 23

Верстка почтовых рассылок: разбор полетов

CSS *
Tutorial
В предыдущих своих топиках я давал лишь сухую теорию о верстке рассылок, и считаю, что подошло время практики. Кардинально новой информации относительно предыдущих статей читатель не почерпнет, но увидит как применяются на практике описанные ранее мною советы. В качестве примера будем использовать макет рассылки выдуманной компании(рисовал сам). С макетом, а затем и разбором верстки можете ознакомиться по катом.

Читать дальше →
Всего голосов 58: ↑51 и ↓7 +44
Просмотры 27K
Комментарии 17

Верстка e-mail рассылок — «подводные камни». Часть первая. Картинки

Блог компании Сибирикс
Верстка e-mail рассылок. Часть первая. Картинки.Добрый день, уважаемые хабравчане!
Не так давно мы вплотную столкнулись с задачей верстки e-mail рассылок. Это не самое приятное занятие, но многие компании активно используют корпоративные рассылки, и верстка становится всё более актуальной задачей.

Казалось бы, что сложного — сверстать простую страничку? Но есть «подводные камни», которые могут поставить в тупик даже опытного верстальщика. Именно таким «камням» и посвящен пост (оговоримся сразу — все эксперименты, описанные в посте, проводились под Windows с тем ПО, которое есть у многих под рукой).

Первый камень — Изображения


Практически каждая рассылка содержит картинки. Логотип, шапка, фотографии, иконки соц.сетей…
Есть 2 способа использования картинок:
Читать дальше →
Всего голосов 57: ↑44 и ↓13 +31
Просмотры 104K
Комментарии 16

Верстка e-mail рассылок — «подводные камни». Часть вторая

Блог компании Сибирикс
Верстка e-mail рассылок — «подводные камни». Часть вторая
Здравствуйте, уважаемые хабравчане!
Буквально пару дней назад мы опубликовали первую часть топика, посвященного верстке e-mail рассылок, а конкретнее — использованию изображений. Вторая часть посвящена ещё четырем «подводным камням» верстки, которые нам удалось обнаружить.

Второй камень — «Якоря»


Если рассылка большого объема на несколько страниц, появляется необходимость навигации внутри рассылки. Как известно, для такой навигации на html-странице используются «якоря».
Читать дальше →
Всего голосов 55: ↑42 и ↓13 +29
Просмотры 31K
Комментарии 15

Костыли при верстке рассылок

Блог компании UniSender CSS *Верстка писем *
Привет, %username%!

Я рад, что мои предыдушие топики о верстке рассылок оказались тебе полезны. Если я прав, то хотел бы рассказать еще и о костылях при верстке, которые были выявлены мною при сотрудничестве с коллегами из Unisender. Так же я позволю себе пару раз повториться, по той простой причине, что этот топик будет являть собой шпаргалку для костыльмейкера верстки рассылок. Велкам под кат.
Читать дальше →
Всего голосов 24: ↑22 и ↓2 +20
Просмотры 13K
Комментарии 12

Почтовые рассылки: Долой костыли!

CSS *
Tutorial
Привет, хабраверстальщикам!

После долгого затишься спешу поделиться новыми наблюдениями относительно костылей при верстке, а так же приятных изменениях в этом плане. Данная статья является ремастерингом прошлого топика о костылях при верстке рассылок. Почему ремастеринг и зачем? Все просто! Глубокоуважаемые «Демоны»(почтовые клиенты и веб-интерфейсы) изменились визуально и пофиксили свои баги. Что ж, начнем!
Читать дальше →
Всего голосов 54: ↑48 и ↓6 +42
Просмотры 4.5K
Комментарии 28

Почтовые рассылки: письменная кухня

CSS *
Tutorial


Каждый день я получаю различные рассылки от многих сервисов, и по роду деятельности с удовольствием их критикую. Но на этот раз мне пришло письмо от PayPal c рекламой магазинов-партнеров, которое меня очень приятно удивило. Это натолкнуло меня на мысль «приготовить» подобную рассылку и поделиться этим с вами.
Читать дальше →
Всего голосов 63: ↑59 и ↓4 +55
Просмотры 7.9K
Комментарии 51

Верстка HTML писем: думай как баг

CSS *
Tutorial
Всем привет!

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

Cellspacing


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

Задача: расположить четыре картинки в таблице — по две на каждой строке. Между картинками должен быть зазор в 10px.
Читать дальше →
Всего голосов 52: ↑47 и ↓5 +42
Просмотры 28K
Комментарии 42

Гид по верстке адаптивных писем

Блог компании Нетология CSS *HTML *Верстка писем *

Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.


image


В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.

Читать дальше →
Всего голосов 19: ↑15 и ↓4 +11
Просмотры 48K
Комментарии 5