Как делать email-рассылки и не косячить: практические советы

Добавление «прогрессивного раскрытия» (как в «Википедии»)

Многие сайты используют для конвертации длинного веб-контента в короткий мобильный технику под названием «прогрессивное раскрытие» (progressive disclosure). Она заключается в сокрытии контента за интерактивным элементом вроде кнопки или ссылки, а затем показа этого контента по клику (или тапу). Эту технику использует «Википедия» и множество других проектов — ее можно применять и для вёрстки писем под мобильные устройства (для скрытия и показа контента используется CSS).

К примеру, возможна такая ситуация, при котором в новостной рассылке перечисляютсяя различные статьи. В веб-версии для каждой статьи должно отображаться название и текст:

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

Для того, чтобы добиться такого эффекта сначала нужно создать «рыбу» статьи с ее заголовком и описанием с помощью HTML. Также следует добавить пару классов для отображения кнопок разворачивания/скрытия только на мобильных устройств. Ниже представлена упрощенная версия такого кода:

<td>   <h4><a href="http://yourdomain.com" class="link">First heading</a></h4>   <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>   <div class="article">      <p class="bodytext">         <img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...      </p>      <a href="http://yourdomain.com">Read more...</a>    </div></td>

Основные действия будут осуществляться с помощью классов mobilehide, mobileshow и article. С помощью display:none; кнопка для разворачивания/скрытия контента будет скрываться на десктопе:

a, a {    display: none !important;}

Чтобы убедиться в том, что эта кнопка отображается только на мобильных устройствах, придется прибегнуть к media query. Ниже представлен код для этого (включая ранее использовавшиеся сниппеты mobileshow и mobilehide, а также некоторые стили для webkit):

@media only screen and (max-device-width: 480px) {     a, a {         display: block !important;         color: #fff !important;         background-color: #aaa;         border-radius: 20px;         padding: 0 8px;         text-decoration: none;         font-weight: bold;         font-family: "Helvetica Neue", Helvetica, sans-serif;         font-size: 11px;         position: absolute;         top: 25px;         right: 10px;         text-align: center;         width: 40px;    }    div {        display: none;    }    a.mobileshow:hover {         visibility: hidden;    }     .mobileshow:hover + .article, .article:hover {        display: inline !important;    }}

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

Отказ от ответственности

На сайте приведены ссылки на другие сайты. Помните, что компания не несет ответственности за политику конфиденциальности этих сайтов. Покидая сайт, убедитесь, что Вы ознакомились с политикой конфиденциальности данных сайтов. Данная политика конфиденциальности относится только к той информации, которую мы получаем с помощью этого сайта.

Мы берём на себя контроль и ответственность за конфиденциальность Вашей информации, но помните, что любая информация, передаваемая через интернет, не может быть полностью защищена.

Процесс сбора и передачи информации личного характера при посещении этих сайтов регламентируется документом «Защита информации личного характера» или другим аналогичным, расположенном на сайтах этих компаний.

Текст email-рассылки

Под текстом мы подразумеваем не только текст рассылки, но и тему и прехедер. Они выполняют как минимум две задачи:

1. Мотивировать получателя открыть письмо.

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

2. Подвести читателя к целевому действию.

Если главное действие — переход на какую-нибудь страницу, она должна соответствовать содержанию письма и теме. То есть он должен получить то, чего ждёт.

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

Чек-лист по тестированию верстки:

• Валидация. Проверяем код на валидность с помощью редактора Brackets с расширением HTMLHint
• Автоматическое тестирование. Тестируем верстку с помощью специальных сервисов, которые эмулируют работу разных почтовиков: Litmus, Emailonacid.
• Ручное тестирование. Отправляем сверстанное письмо на тестовых список адресов разных почтовых провайдеров. Проверяем веб и мобильную версии на разных устройствах и в разных почтовиках.

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

Однако если при тестировании всплыл какой-то баг, не стоит впадать в панику. Большинство проблем, с которыми ко мне неоднократно обращались клиенты ExpertSender, легко чинятся.

Картинки

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

Дизайн шаблона email рассылки — общие рекомендации

Основа электронного письма — это шаблон. Он оформляется в стилистике сайта, чтобы подписчик мог связать письмо с компанией, на рассылку которой подписался. К разработке шаблона стоит отнестись очень внимательно — в будущем он будет определять структуру и внешний вид ваших рассылок.

Как не надо

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

2. Не используйте корпоративный цвет как основной, если он слишком яркий. Кажется логичным оформить шапку и плашки в цветах компании. Но если такого цвета слишком много, письмо тяжело читать:

Слишком много красного цвета в шаблоне письма

3. Не оформляйте текст картинкой, потому что:

• картинка может не отобразиться;
• сложно менять макет — придется просить дизайнера переделывать картинку;
• если на картинке промокод, читатель не сможет его скопировать и вставить, нужно перенабирать;
• кроме того, если оформить картинкой все письмо, почтовые сервисы могут отправить его в спам.

4. Не делайте фон пестрым, иначе сложно читать основной текст:

Пестрый фон отвлекает от текста письма

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

Форматирование письма выглядит слишком пестрым

Как надо

1. Разработайте корпоративный шаблон в стилистике сайта или на основе брендбука. Это не только работает на узнаваемость компании, но и повышает доверие.

3. Создайте несколько шаблонов для разных типов писем. Благодаря этому вы сэкономите время при запуске рассылок. Например, издательство «МИФ» использует два типа шаблона. Первый — для дайджестов:

Шаблон для дайджеста статей

Второй шаблон — для промо-рассылок:

Шаблон для промо-рассылки

4

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

Цветовые акценты в корпоративном шаблоне

5. Разработайте логичную структуру письма. Основное рекламное или информационное послание должно размещаться на первом экране:

Шаблон с основной информацией в первом экране прокрутки

7. Чередуйте текстовые блоки и картинки. Это нужно для лучшей доставляемости писем, когда вы только начинаете делать рассылки и у вашего домена еще не сформирована положительная репутация отправителя. Есть советы придерживаться соотношения 80:20 или 60:40. То есть чтобы в письме было 80% текста и 20% картинок.

Гармоничная верстка рассылки издательства «МИФ»

Что нужно знать в конце?

• Соотношение изображений и текста в письмах должно быть 30/70 %
• Не выделяйте текст в слишком яркие цвета (#ff0000, #4CFF00 и т.п.). О том, что задавать цвет шрифта, близкий к фону не стоит и упоминать – это избитый и давно не работающий трюк.
• Слишком большое количество текста, написанного в верхнем регистре (с учетом text-transform: uppercase;) или повторение нескольких восклицательных знаков подряд, так же увеличивают вероятность попадания в спам.
• Не пишите много текста большим шрифтом. Рекомендуемый размер font-size не более 12pt=16px и не менее 7pt=11px
• Ну и конечно валидный HTML/CSS ещё никто не отменял.

Обязательные свойства для HTML-тегов

Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем. Их нужно использовать всегда во всех html тегах письма.

• — толщина рамки в пикселях;
• — отступ от рамки до содержимого ячейки;
• — расстояние между ячейками;
• — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

• — всегда используем эти свойства для всех ссылок и , иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
• — тоже используем для всех ссылок и span, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
• — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
• — делает строчный элемент блочным:

• — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
• — толщина рамки в пикселях (px);
• — ширина картинки. Если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту . Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства и она будет пропорционально менять и высоту и ширину;
• — хак для Outlook, если не ставить display:block то Outlook добавит к картинке отступы.

Самые частые проблемы

1. Отступы пропали/некорректно отображаются

Если валидатор не нашёл ошибок, то скорее всего, у вас в коде для отступов используется свойство padding/margin. Они ещё не обрели полную поддержку: padding корректно работает только для тега <td>, а margin неполноценно поддерживается Outlook. Поэтому для горизонтальных отступов мы используем таблицу с выравниванием по центру внутри более крупной таблицы.

Вертикальные отступы создаются при помощи блока с неразрывным пробелом внутри, высота строки которого должна быть равна его высоте, из-за чего он корректно отображается и в Outlook.

<div style="height: 10px ; line-height:10px; font-size:8px;"> </div>

Вот как в итоге всё это выглядит.

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

4. В Оutlook картинка в разы больше своих размеров, и всё письмо поломано.

Тут всё просто: скорее всего, исходник картинки у вас, к примеру, 1500 пикселей в ширину, а в коде указана ширина 100% (width=”100%”). Outlook понимает это по своему, он растянет вашу картинку на 100% от ширины исходного файла (то есть на 1500 пикселей), а не на 100% от ширины родительского элемента, как это делают остальные почтовики. Из-за этого таблица, в которой была картинка, растягивается на ширину картинки, и в итоге всё ломается. 

Решений тут может быть несколько.

Если это баннер на всю ширину письма, то тут нужно изменить ширину исходного файла на ширину картинки в вашем макете. 
Это фотокарточка вашего товара в адаптивном блоке, ширина которого не более 300 пикселей, и вам важно, чтобы качество картинки было двукратным, то можно указать фиксированную ширину. Это и не помешает вашей адаптации, и позволит использовать ретина изображения. 
Прописать условие if else для Оutlook

<!-->
	Версия для Оutlook
 <!-->
 <!--> <!---->
	Версия для остальных почтовиков и Outlook 2003 и OSX версии
 <!-- <!-->

Естественно, в версии для Outlook мы указываем, что его ширина будет фиксирована, а для всех остальных —  процентная

<!-->
	<img src="img/logo.png" width="600"  alt="" border="0" style="display: block;" />
 <!-->
 <!--> <!---->
	<img src="img/logo.png" width="100%"  alt="" border="0" style="display: block;" />
 <!-- <!-->

5. Вместо текста отображаются странные символы

Это проблемы с кодировкой. Проверьте её в теге <head>, которая прописана в html файле. Там должен быть вот такой meta-тег, с кодировкой UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

6. В Gmail обрезается часть письма

Проверьте размер html-файла, если он больше 102кб, то Gmail его будет обрезать. Решением тут станет только оптимизация вашего кода: удаление лишних отступов и таблиц.

Как делается адаптивная вёрстка

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

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

Чтобы не вызывать нареканий у клиентов, кому такие письма будут отправлены.

Второе что подлежит проработке это графические элементы. Это самый проблемный участок в вёрстке. Большинство графических элементов, это изображения и специальные анимации. При открытии такого письма на устройствах с разным разрешением и на разных программах, может произойти сбой выполнения кода операции графического элемента. Это может быть вызвано с тем, что на данной программе для просмотра почтовых сообщений нет поддержки этого типа информации.

В результате ошибки в коде, данный элемент не будет загружен. Письмо при открытии может быть неполным, что негативно скажется при общении с потенциальным покупателем. Поэтому, при адаптивной вёрстке, все, даже самые маленькие графические изображения и анимации тщательно прорабатываются. Это позволяет избежать ошибки кода выполнения операции по элементу, а письмо будет открыто в том виде, в котором его разработали.

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

Для оптимизации следует подбирать именно те шрифты, которые поддерживаются большинством программ и приложений. Самой распространённой ошибкой считается разработка и внедрение собственного шрифта при написании коммерческого предложения. При открытии такого шрифта в браузере без специальных плагинов, имеющих поддержку расширений, текст может просто пропасть или перевестись кодовое значение. Из-за подобной ситуации прочитать письмо будет невозможно.

Как отреагировала команда

Что говорит дизайнер

Андрей Ведерников, дизайнер Creative Soldiers:

Фигма — простой графический редактор без излишеств, у неё нет, как в Фотошопе, множества функций. Но, несмотря на простоту Фигмы, в неё удалось добавить сложный плагин, от которого наши дизайнеры, верстальщики и разработчики до сих пор под впечатлением. Он генерирует html-код для писем прямо из дизайн-макета.

Подойдёт не любой дизайн-макет, а только тот, который сделан по правилам разработчика плагина. В гайде к Marka описаны основные функции плагина для Фигмы и даны подробные разъяснения про его работу. Но главное, что нужно для успешной работы с Marka, — практика. Мы до сих пор открываем для себя особенности этого инструмента.

Работая с Marka, нужно мыслить блочно, создавать блочную модель исходного макета. И в этом плагине всё идёт в работу, каждая кнопочка несёт свою функцию и каждая функция плагина привязана к какому-то элементу интерфейса.

Можно загружать любые изображения, любой текст — всё автоматически переходит в код.

Раньше при сборке мастер-шаблона, чтобы что-то там изменить, необходимо было идти в код. То есть клиент вносит правки текстом или другим образом, а верстальщик идёт в код и правит. Сейчас клиент самостоятельно заходит в макет и меняет его.

Подводные камни нового плагина для Фигмы

Особенности плагина обнаруживаются, в большинстве своём, методом проб и ошибок.

Можно изучить гайд для разработчиков, но что-то придётся открывать напрямую в работе. Например, в письмах задан кёрнинг (расстояние между буквами) в 3%, а плагин для Фигмы не считал эту информацию. Приходится поправлять руками.

Ещё пример: мобильная версия рассылок работает не так, как на сайтах, и в Marka есть возможность перенести картинку на следующую строку мобильной версии, тогда как в веб-версии картинки расположены на одной строке. Обнаружили это тоже только на практике.

Плюсы Marka

Здесь я вижу один весомый плюс, который перевешивает все недостатки: с новым плагином всё делается быстрее — и дизайн, и вёрстка электронных писем, при этом дизайнер может выступать в роли верстальщика, не затрагивая вёрстку.

Что говорит менеджер

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

Marka отлично подойдёт клиентам, у которых нет верстальщика в штате.

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

Оформление текста

1. Изначально, для верстки писем давалась рекомендация оборачивать весь текст в строковый элемент span или font и уже в них задавать стилизацию шрифта. В настоящее время этим можно пренебречь. Описывать свойства для текста можно в любом HTML-элементе внутри тега body, но желательно только inline.
2. Для задания размера шрифта лучше используйте абсолютные единицы измерения (px или pt), потому что мы не везде имеем доступ к стилизации базового шрифта. Это даст гарантию одинакового font-size для всех почтовых клиентов. Устройства работающие на WebKit по умолчанию применяют масштабирование текста. Для отключения этого поведения существует вендорное свойство -webkit-text-size-adjust. Советую просто вынести следующий селектор в head:

3. Чтобы кроссмейлерно оформить ссылку необходима следующая конструкция:

   Повторное оборачивание ссылки в span и задания цвета нужно для Outlook, т.к. он не понимает приоритет !important, а без него Яндекс.Почта будет перекрашивать вашу ссылку в красный цвет при событии hover.
   Атрибут target=»_blank» необходим только в том случае, если в вашем письме имеется ссылка на web-версию письма, чтобы ссылки в этой версии открывались в новых вкладках. А так, все почтовые клиенты делают это уже самостоятельно.

4. Если хотите, чтобы межстрочный интерлиньяж (line-height) работал везде, задавайте его только для блочных элементов (td, div, p, li).

Типы вёрсток

рассылке триггерных писем

Далее, после того как список будет сформирован происходит отработка его  по тем устройствам и программам, которые используются для просмотра сообщений. Определив для себя самые массовые элементы просмотра, начинается процесс адаптивной верстки по определённой категории.

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

Верстка HTML-писем

Шаблоны HTML-писем

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

1. Универсальный, простой отзывчивый шаблон электронной почты.
2. Litmus.com — можно найти отличные бесплатные адаптивные шаблоны под разные нужды.
3. Отзывчивые транзакционные HTML шаблоны электронной почты.
4. Cerberus — хорошая подборка адаптивных шаблонов.
5. Responsiveemailpatterns.com — коллекция шаблонов и модулей для адаптивных писем.

Советую не начинать с чистого листа, а присмотреться к какому-нибудь шаблону и постепенно делать из него что-то уникально и красивое.

Базовые правила верстки HTML-писем

1.  вместо . Используя табличную верстку, вы избежите множества проблем с некорректным отображением вашего письма в разных почтовых клиента и браузерах. Табличная верстка правила в интернете долгое время благодаря корректному отображению в разных браузерах и большому числу параметров управляющих видом таблиц.
2. Используйте универсальные атрибуты HTML-тегов и универсальные CSS-свойства.
   • вместо ,
   • вместо ,
   • CSS2 вместо CSS3,
   • HTML4 вместо HTML5,
   • вместо ,
   • HTML-атрибуты вместо CSS.
3. Встроенные (Inline) CSS вместо внешних .css файлов. Конечно, верстать такое не очень удобно, возникают сложности с проверкой и корректировкой кода. Но, на наше счастье, существуют сервисы по автоматическому переводу всех стилей во встроенные.
   • Premailer.io
   • inlinestyler.torchbox.com

   Пример встроенного стиля

4. Ширину всего документа в 600px. Это обезопасит ваших читателей от горизонтальной прокрутки. Вместо этого можно сделать письмо адаптивным.
5. Задавайте таблицам атрибуты .
6. Лучше всего использовать стандартные шрифты (Helvetica, Arial) имеющиеся на любом устройстве.

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

Странные отступы 

Для организации отступов можно использовать пустые конструкции и 

Для вертикального отступа:

<div style="height: 10px; font-size: 10px; line-height: 11px;">&nbsp;</div>

Для горизонтального отступа:

<td width="23" style="width: 23px; max-width: 23px; min-width: 23px;">&nbsp;</td>

Но также можно применить padding к ячейке таблицы:

<td style="padding: 23px;"></td>

Верстка кнопок для HTML-писем

И тут тоже есть свои подводные камни. Обычным способом, к сожалению, кнопку не сделать, почтовый клиент может не принять такой код и вырежет его. Я нашёл два решения этой проблемы.

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

Показать / Скрыть пример

See the Pen Кнопки 1 by Ivanov Klim on CodePen.

Второе решение завязано на использовании Vector Markup Language (VML)— языка векторной разметки. На сайте buttons.cm можно самостоятельно сделать кнопку на этом языке.

Показать / Скрыть пример

See the Pen Кнопка 2 by Ivanov Klim on CodePen.

HTML-письма, фоновое изображение

Фоновое изображение лучше всего также накладывать с помощью VML. Существует схожий с кнопками онлайн-сервис создания фонового изображения. Ниже можно посмотреть пример реализации функционала сервиса с некоторыми изменениями для придания вида письма.

Показать / Скрыть пример

See the Pen Письмо странным людям by Ivanov Klim (@DreamerKlim) on CodePen.

Размеры

Теперь мы не может однозначно сказать, какая будет ширина у нашего письма, поэтому все параметры width следует указывать в процентах. Бывают случаи, когда нам необходимо разместить, например, таблицу товаров, где ширина каждого блока фиксирована. Тогда на маленьких экранах они должны перестраиваться друг под друга (примерно как при адаптации обычных веб-страниц).

Это реализуется следующим образом:

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">    <tr><td align="left"><!--                 Item1 --><div style="float: left; display: inline-block; vertical-align:top; width: 300px;">    <table width="300" border="0" cellspacing="0" cellpadding="0"  align="left" style="border-collapse:collapse;">    <tr><td align="left" valign="top">       <table width="100%" border="0" cellspacing="0" cellpadding="0" >            <tr><td align="center" valign="middle">                Товар 1            </td></tr>        </table>     </td></tr></table></div><!--         Item1 END --><!-->    </td><td>    <!--><!--                 Item2 --><div style="float: left; display: inline-block; vertical-align:top; width: 300px;">    <table width="300" border="0" cellspacing="0" cellpadding="0"  align="left" style="border-collapse:collapse;">    <tr><td align="left" valign="top">       <table width="100%" border="0" cellspacing="0" cellpadding="0" >            <tr><td align="center" valign="middle">                Товар 2            </td></tr>        </table>     </td></tr></table></div><!--         Item2 END --></td></tr></table>

Рассмотрим каждый фрагмент кода подробнее.

Сначала мы создаем таблицу шириной 100%, в которой и размещаем блоки. Это сделано для того, чтобы все прочие объекты не пытались обтекать наши блоки с товарами.

Следует обратить внимание еще на пару моментов: параметр display у нашего блока следует указывать как inline-block, также следует указывать параметр float. Сами блоки следует писать без пробелов и переносов строк (они могут быть внутри комментариев, для бОльшего удобства восприятия)

Это решит проблему в веб интерфейсе Outlook.com (hotmail.com), где блоки отображаются как «инлайновые». Если в outlook 2010/2013 возникает проблема с лишними отступами, ее можно решить, заключив контент блока в

<div style="mso-table-lspace:-5px;mso-table-rspace:-5px;"> ... </div>

Но это может вызвать проблемы в outlook 2007.

Между блоков следует код в <!—> — этот код предназначен исключительно для Outlook 2007/2010/2013. Он не поддерживает блочные теги, поэтому специально для него мы формируем вспомогательные ячейки таблицы.

При объявлении блоков можно комбинировать значения ширины указанной в процентах и ограничением минимальной ширины (чтобы блоки перескакивали, достигнув какой-то минимальной ширины)

Ограничение ответственности Администрации сайта

4.1. Администрация сайта не несет никакой ответственности за любые ошибки, опечатки и неточности, которые могут быть обнаружены в материалах, содержащихся на данном Сайте. Администрация сайта прикладывает все необходимые усилия, чтобы обеспечить точность и достоверность представляемой на Сайте информации. Вся информация и материалы предоставляются на условиях «как есть», без каких-либо гарантий, как явных, так и подразумеваемых.

4.2. Информация на Сайте постоянно обновляется и в любой момент может стать устаревшей. Администрация сайта не несет ответственности за получение устаревшей информации с Сайта, а также за неспособность Пользователя получить обновления хранящейся на Сайте информации.

4.3. Администрация сайта не несет никакой ответственности за высказывания и мнения посетителей сайта, оставленные в качестве комментариев или обзоров. Мнение Администрация сайта может не совпадать с мнением и позицией авторов обзоров и комментариев. В то же время Администрация сайта принимает все возможные меры, чтобы не допускать публикацию сообщений, нарушающих действующее законодательство или нормы морали.

4.4. Администрация сайта не несет ответственности за возможные противоправные действия Пользователя относительно третьих лиц, либо третьих лиц относительно Пользователя.

4.5. Администрация сайта не несет ответственности за высказывания Пользователя, произведенные или опубликованные на Сайте.

4.6. Администрация сайта не несет ответственности за ущерб, убытки или расходы (реальные либо возможные), возникшие в связи с настоящим Сайтом, его использованием или невозможностью использования.

4.7. Администрация сайта не несет ответственности за утерю Пользователем возможности доступа к своему аккаунту — учетной записи на Сайте.

4.8. Администрация сайта не несет ответственности за неполное, неточное, некорректное указание Пользователем своих данных при создании учетной записи Пользователя.

4.9. При возникновении проблем в использовании Сайта, несогласия с конкретными разделами Пользовательского соглашения, либо получении Пользователем недостоверной информации от третьих лиц, либо информации оскорбительного характера, любой иной неприемлемой информации, пожалуйста, обратитесь к администрации Сайта для того, чтобы Администрация сайта могла проанализировать и устранить соответствующие дефекты, ограничить и предотвратить поступление на Сайт нежелательной информации, а также, при необходимости, ограничить либо прекратить обязательства по предоставлению своих услуг любому Пользователю и клиенту, умышленно нарушающему предписания Соглашения и функционирование работы Сайта.

4.10. В целях вышеизложенного Администрация сайта оставляет за собой право удалять размещенную на Сайте информацию и предпринимать технические и юридические меры для прекращения доступа к Сайту Пользователей, создающих согласно заключению Администрация сайта, проблемы в использовании Сайта другими Пользователями, или Пользователей, нарушающих требования Соглашения.

Дизайн email-рассылки

Отличается от дизайна сайтов и лендингов. В нём много ограничений, поэтому некоторые дизайнерские решения неприменимы к дизайну писем. Чтобы сделать приятный и правильный дизайн письма, надо знать продукт и целевую аудиторию. Если это стриптиз-бар, вы явно не станете рассылать письма в мультяшном стиле, если это письма для детей — в богемном.

Это минимум. Важны также:

• цель письма — нет смысла в замороченном дизайне для письма-уведомления о том, что заказ отправлен клиенту,
• устройства, с которых просматривают ваши рассылки;
• фирменный стиль.

Внешний вид письма должен соответствовать не только брендбуку продукта — у почтовых клиентов свои ограничения. Так, нестандартный шрифт придётся вставлять картинкой. Но если картинка не подгрузится — макет поедет, особенно, если картинками вставили много заголовков.

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

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