Html рассылка писем – Отправка html-письма при помощи web-интерфейса Gmail — Блог веб-студии «Десять букв» — Вебджем.рф

Содержание

Исчерпывающее руководство по составлению почтовых рассылок / Habr

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

Говоря о маркетинговых рассылках, первое, что приходит на ум, это не простые сообщения, а HTML-письма.

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

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

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

Мобильные решения или провал

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

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

Есть два решения для мобильных устройств. В первом случае вы можете создать письмо, изменяющее свои размеры и размеры элементов внутри в соответствии с размерами экрана пользователя. Этого будет вполне достаточно для простых дизайнов. Либо вы можете создать «отзывчивый дизайн» (responsive design), адаптирующийся к различным размерам экранов.

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

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

Отзывчивый дизайн

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

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

Ваш макет должен быть достаточно узким, примерно в диапазоне от 500 до 600 пикселей. Это обеспечит правильное отображение письма и на настольных, и на мобильных устройствах и уменьшит вероятность того, что оно разъедется при изменении размеров.

Убедитесь, что выбран достаточно крупный шрифт. Обращайте внимание на минимальные размеры шрифтов для различных платформ, иначе ваш текст может оказаться больше задуманного размера и испортить макет. Например, минимальный размер шрифта для iOS-устройств – 13 пикселей.
Элементы по которым можно «тапнуть» должны быть пригодны для этого. Это значит, что вы должны сделать их достаточно большими и изолированными от других ссылок, чтобы пользователь мог легко активировать их с первой попытки (потому что, возможно, у вас не будет второй).
Не стесняйтесь использовать display:none чтобы скрыть ненужные элементы. То, что удобно на экранах настольных компьютеров или даже планшетов становиться раздражающим мусором на экране смартфона. «Меньше – лучше» – девиз для маленьких экранов.

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

Типографика

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

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

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

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

Для различных целей различные письма

Существует разнообразное множество видов писем которые вы можете отправлять вашим подписчикам (или разрабатывать для ваших клиентов в случае веб студии например). Каждое из них имеет собственное предназначение и каждое должно быть сделано так чтобы наилучшим образом удовлетворять ему.

Новостные рассылки

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

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

Например, рассылка от Plastyk с отличным притягательным дизайном.

Уведомления

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

Как пример письмо от Proper Labs. Объявление о запуске новой версии сайта.

Письма с транзакциями

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

Хороший пример письма с транзакцией – One Eyed Cat. Также оно отлично показывает, как оффлайновая компания может использовать email маркетинг.

Маркетинговые письма

Маркетинговые письма отправляются тогда, когда компания хочет наладить сотрудничество с вами. Они могут содержать в себе «специальное предложение», новый продукт или что-то подобное. Зачастую эти письма значительно отличаются от тех которые компания отправляет в других случаях.

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

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

Лучшие практики

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

Содержание важнее всего

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

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

Четкий призыв к действию

Призыв к действию, пожалуй, самая важная часть в дизайне любого письма. Очевидно, что ваша рассылка имеет какую-то цель. Например подписка читателей на что-либо, чтение или покупка чего-либо. Именно поэтому ваш призыв к действию должен одновременно однозначно объяснять и побуждать пользователя к тому что он должен сделать.

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

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

Тестируйте заблаговременно, тестируйте часто [прим. по аналогии с release early, release often]

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

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

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

Используйте текст «предварительного заголовка»

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

Указывайте ссылку на веб-версию

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

Не усложняйте

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

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

Шаблоны и фреймворки

Написание кода для HTML писем «с нуля» конечно возможно (посмотрите нашу предыдущую статью “How to design a responsive HTML email” чтобы узнать технические подробности), но использование фреймворка или заготовки может значительно ускорить процесс и сделать его более доступным для начинающего разработчика.

Cerberus

Cerberus это набор отзывчивых шаблонов для писем которые нормально отображаются как в мобильном Gmail так и в настольном Outlook. Вы можете использовать блоки кода по отдельности или объединяя их. Есть две версии: одна использует CSS3 Media Queries, а другая нет.

Ink

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

Набор шаблонов сделанных при помощи Ink

Страница Responsive email templates built on Ink – отличное место чтобы начать знакомство с данным продуктом. Там вы найдете четыре шаблона: простой одноколоночный, с большим баннером картинкой (hero-image), макет с боковой панелью (sidebar) и гибрид из последних двух (sidebar-hero).

Шаблоны отзывчивых писем

В дополнение на сайте Zurb есть раздел Responsive Email Templates, где можно найти шаблон новостной рассылки с большим баннером картинкой и полезную информацию по использованию шаблонов.

Образцы элементов для отзывчивых писем

Responsive Email Patterns – это набор образцов и модулей для создания отзывчивых писем. Он включает в себя шаблоны для макетов, навигации, списков и другого.

Действительно простой шаблон HTML письма

Really simple HTML email template является именно тем о чем говорит его название. Это супер простой шаблон HTML письма с очень простым дизайном. Это один столбец со встроенным призывом к действию и четкой целью.

Мастер Шаблонов

Template Builder от CampaignMonitor позволяет бесплатно создавать HTML шаблоны писем буквально за минуты. Результат будет полностью протестирован и подготовлен для мобильных. Вы сразу можете начать использовать его на сайте CampaignMonitor или просто скачать для любых дальнейших действий.

Бесплатные шаблоны

Free Email Templates от той же самой компании – это огромный набор бесплатных шаблонов которые можно скачать и использовать на свое усмотрение.

HTML Email Boilerplate v 0.5

HTML E-mail Boilerplate является хорошей отправной точкой для создания писем. Он не содержит дизайна или макета, что позволяет избежать многих проблем рендеринга в почтовых клиентах.

E-mail Boilerplate

E-mail Boilerplate от Emailology включает в себя все основы, необходимые для создания HTML писем. Исходный код содержащий CSS и HTML очень подробно документирован и даёт все нужные инструкции по использованию.

Antwort

Antwort предлагает вам идеально отзывчивые макеты для писем, которые адаптируются к самым различным экранам. Он поддерживает все основные почтовые клиенты, включая Outlook, и Gmail.

Новостные шаблоны от GraphicMail

GraphicMail предлагает около 100 бесплатных шаблонов. Для использования необходимо зарегистрировать бесплатный аккаунт.

Шаблоны от ThemeForest

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

Stamplia

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

Инструменты

Плагин e-Newsletter для WordPress

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

«Пуленепробиваемые» фоновые изображения

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

«Пуленепробиваемые» кнопки

Еще один «пуленепробиваемый» сервис от той же самой компании. Bulletproof email buttons позволяет создавать красивые кнопки для ваших писем. Они идеально подходят в качестве элемента призыва к действию.

Litmus

Litmus представляет из себя набор инструментов для отслеживания и тестирования ваших рассылок. Он включает инструменты для предпросмотра писем, аналитики и тестирования на спам. Стоимость начинается от $79 за месяц, есть скидки при оплате за год.

Litmus Scope

Litmus Scope позволяет легко создать веб-версию любого электронного письма, которой, в последствии, вы можете поделиться с другими. Сервис доступен в виде приложения для Mac или букмарклета который может работать с любым почтовым веб-интерфейсом.

Примеры для вдохновения

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

Whalers

St. Theresa Auction

Online Store Guys

Inspirations Point

Everywhere

Sphere

Form Function & Class

Boden

Bon Appetit

Sevenly

Path

Zombie Survival Guide for Email Marketers

Fooda

Designer News

Charity: Water

EwerkNews

Interworld Plastics

Zehno

PSD Freebies

WalkieTalkie

Еще больше галерей для вдохновения

Really Good Emails сборник дизайнов по темам, многие из которых снабжены комментариями о том почему они хороши.

Email-Gallery дает вам возможность просматривать дизайны фильтруя их по цвету, типу и другим параметрам.

CampaignMonitor’s Email Inspiration позволяет делать выборку по количеству колонок, типу письма (объявление, рассылка, или приглашение).

Look What You Can Do – сайт от MailChimp. Содержит множество писем для вашего вдохновения отправленных при помощи этого сервиса когда либо.

HTML Email Gallery – галерея дизайнов в хронологическом порядке.

The Email Design Gallery – блог на Tumblr который собирает примеры отличных дизайнов из различных источников.

Beautiful Email Newsletters – разбитая по категориям галерея с функцией поиска.

Сервисы рассылок

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

ConstantContact

В ConstantContact цены начинаются от $20 за месяц для простых email кампаний. В эту цену входят возможности управления контактами и социального обмена. Более дорогие тарифные планы включают в себя дополнительные функции такие как отслеживание.

MailChimp

MailChimp предлагает бесплатный план “Entrepreneur” (предприниматель) который поддерживает отправку до 12 000 писем для 2 000 подписчиков. На платных тарифах вы сможете работать с куда более большими объёмами.

ActiveCampaign

В ActiveCampaign тарифы начинаются от $9 за месяц для 500 контактов. Есть специальные планы для предприятий с бухгалтерской отчётностью и другими сервисами.

GetResponse

Тарифы GetResponse стартуют от $15 в месяц для 1000 подписчиков. Есть скидки при оплате за год.

AWeber

Сервис AWeber позволяет начать работу всего с $1 за первый месяц. Далее $19 в месяц с неограниченным количеством сообщений для 500 подписчиков.

Amazon SES

Amazon SES (Simple Email Service) это почтовая служба только для отправки сообщений. Если вы уже являетесь пользователем Amazon EC2, то вы можете отправлять до 2000 писем в день бесплатно. В противном случае, сообщения тарифицируются по $0,10 за тысячу, с дополнительными сборами за передачу данных и вложений. Такие цены делают этот сервис одним из наиболее доступных.

Emma

Цены в Emma начинаются с $45 за неограниченный объем писем для 2500 абонентов. Также есть скидка в 20% для некоммерческих организаций и при годовой предоплате.

HubSpot Email

HubSpot Email предлагает множество инструментов для отслеживания и для получения еще большего количества подписчиков. Компания является частью большого сервиса HubSpot цены в котором начинаются от $200 в месяц за первые 100 контактов (плюс $100 в месяц за каждую 1000 контактов сверху), и выше.

GraphicMail

Тарифы в GraphicMail основываются либо на том сколько писем вы отправляете либо на том сколько у вас подписчиков. В первом случае цены начинаются менее чем с $10 за месяц, во втором с 25$.

Заключение

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

Изображение iPhone взято со страницы Kārlis Dambrāns.

7 шагов для создания шаблона для электронного письма HTML: просто и быстро

От автора: лучший способ понять любой процесс — это выполнить его с нуля. Сегодня мы собираемся сделать это для дизайна электронного письма, создав HTML шаблон письма с нуля.

Что мы создаем

Вот HTML-письмо, которое мы будем создавать, вы можете поэкспериментировать с ним самостоятельно. Имейте в виду, что при просмотре этого шаблона через веб-браузер у нас гораздо меньше шансов столкнуться с проблемами, чем в случае почтового клиента.

Начинаем с HTML-документа

Для начала стоит упомянуть, откуда я взял некоторые ресурсы.

Создание с нуля HTML-шаблона электронного письма

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Теперь, как мы уже писали в предыдущем руководстве, вам нужно начать HTML-документ электронного письма с XHTML-документа:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Demystifying Email Design</title> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″/> </head> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<head>

<title>Demystifying Email Design</title>

</head>

</html>

После этого мы можем приступить к созданию остальной части конструкции.

Создайте раздел body и основную таблицу

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

Мы также добавим таблицу шириной 100%. Он выполняет роль тега body для нашего электронного письма, поскольку стилизация тега body не поддерживается полностью. Если вы хотите добавить цвет фона к «телу» электронного письма, вам нужно вместо этого применить его к этой большой таблице.

Установите для cellpadding и cellspacing ноль, чтобы избежать неожиданных пустых пространств в таблице.

Примечание: мы собираемся оставить border=»1″ для всей таблицы, чтобы мы могли видеть скелет макета. Мы удалим его в конце с помощью простого поиска и замены.

<body> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Hello! </td> </tr> </table> </body>

<body>

<tr>

<td>

Hello!

</td>

</tr>

</table>

</body>

«Если в HTML существует атрибут, используйте его вместо CSS»

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

Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML электронных писем: если в HTML существует атрибут, используйте его вместо CSS. Мы заменим наше маленькое приветствие «Hello!» этой таблицей:

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Hello! </td> </tr> </table>

<tr>

<td>

Hello!

</td>

</tr>

</table>

Мы также добавили свойство встроенного стиля, которое устанавливает для свойства border-collapse значение collapse. Если мы этого не сделаем, более новые версии Outlook добавят небольшое пространство между нашей таблицей и обводкой.

Создайте структуру и заголовок

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

<tr>

<td>

Row 1

</td>

</tr>

<tr>

<td>

Row 2

</td>

</tr>

<tr>

<td>

Row 3

</td>

</tr>

</table>

Теперь мы раскрасим их в соответствии с дизайном. Так как bgcolor — это действительный атрибут HTML, мы будем использовать его для установки цвета фона вместо CSS. Не забывайте использовать полные шесть символов шестнадцатеричного кода, так как сокращение из трех символов не всегда будет работать.

<tr>

Row 1

</td>

</tr>

<tr>

Row 2

</td>

</tr>

<tr>

Row 3

</td>

</tr>

</table>

Хорошо, далее мы собираемся сосредоточиться на строке 1. Мы хотим настроить заполнение ячейки, а затем вставить изображение.

Использование отступов

При использовании отступов в электронном письме вы всегда должны указывать каждое отдельное значение (верхнее, правое, нижнее и левое), в противном случае вы можете получить непредсказуемые результаты. Я считаю, что вы можете использовать сокращенную запись, то есть padding: 10px 10px 8px 5px;, но если у вас возникли проблемы вы можете использовать полную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Если у вас возникают еще большие проблемы с отступами (например, если платформа отправки удаляет ваш CSS), не используйте их вообще. Просто создайте пустые ячейки, чтобы задать пространство. Нет необходимости использовать пустые GIF, просто убедитесь, что вы добавляете style=»line-height: 0; font-size: 0;» для ячейки, размещаете внутри нее   и задаете ей явную высоту или ширину. Вот пример:

Также обратите внимание, что использование тегов TD безопасно, а тегов P или DIV — нет. Они ведут себя намного более непредсказуемо.

Итак, мы будем использовать некоторые встроенные CSS для добавления отступов ячейки. Затем мы вставим изображение, добавив альтернативный текст и указав style=»display:block;», что является обычным исправлением, которое не дает некоторым почтовым клиентам, добавлять пробелы под изображениями. Мы разместим изображение по центру, добавив align=»center» к тегу td. Мы также добавим тег alt, который важен для начальной загрузки электронного письма, которая в большинстве случаев будет отключена.

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

</td>

Создайте область контента

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

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

<tr>

<td>

Row 1

</td>

</tr>

<tr>

<td>

Row 2

</td>

</tr>

<tr>

<td>

Row 3

</td>

</tr>

</table>

</td>

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

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> <tr> <td> Row 3 </td> </tr> </table>

<tr>

<td>

Lorem ipsum dolor sit amet!

</td>

</tr>

<tr>

<td>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

</td>

</tr>

<tr>

<td>

Row 3

</td>

</tr>

</table>

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

Как бы мне ни хотелось придерживаться процентов, когда у вас есть контент, который имеет определенный размер, может быть сложно преобразовать его в проценты (в этом примере столбцы могут составлять 48,1%, что может привести к путанице). По этой причине, поскольку наши два изображения имеют ширину 260px, мы создадим столбцы, которые также имеют ширину 260px, с ячейкой отступа 20px в середине. (Это составит 540px, что дает ширину 600px нашей таблицы минус отступ 30px с обеих сторон.) Обязательно обнулите размер шрифта и высоту строки и добавьте неразрывный пробел   в ячейку поля.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Мы также установили top для valign обоих элементов, так что они будут вертикально выравниваться по верху, даже если один столбец имеет больше текста, чем другой. Вертикальное выравнивание по умолчанию middle.

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td valign=»top»> Column 1 </td> <td>   </td> <td valign=»top»> Column 2 </td> </tr> </table>

<tr>

Column 1

</td>

<td>

</td>

Column 2

</td>

</tr>

</table>

Теперь давайте добавим изображения и контент в эти столбцы. Поскольку нам нужно несколько строк, мы вложим еще одну таблицу, потому что мы не можем использовать ни тег colspan, ни rowspan. Мы также добавим несколько отступов между изображением и текстом в каждом столбце.

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td valign=»top»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> <img src=»images/left.gif» alt=»» /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> <td>   </td> <td valign=»top»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> <img src=»images/right.gif» alt=»» /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> </tr> </table>

<tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</td>

<td>

</td>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

Здесь мы с использованием HTML установили ширину изображений 100% ширины столбца. Опять же, если мы сделаем электронное письмо адаптивным, нам нужно будет использовать только медиа-запросы для изменения ширины родительского элемента. Нам придется переопределить высоту в пикселях, потому что использование style=»height: auto» сейчас не будет работать везде (кхе-кхе, Outlook). Итак, мы установим его, используя пиксели. Это означает, что нам с помощью медиа-запросов нужно установить height: auto!important для этих изображений, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Поскольку мы устанавливаем ширину в процентах, нам не нужно это переопределять. Чем меньше вещей нужно переопределить, тем лучше.

Стили футера

Теперь мы добавим отступ в строку футера.

Row 3

</td>

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

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Column 1 </td> <td> Column 2 </td> </tr> </table>

<tr>

<td>

Column 1

</td>

<td>

Column 2

</td>

</tr>

</table>

Мы создадим еще одну таблицу для иконок социальных сетей. Мы установим для родительской ячейки align=»right». Убедитесь, что вы установили border=»0″ для этих ссылкок в изображениях (чтобы избежать синей границы ссылки) и не забудьте о display: block.

<tr>

<td>

</a>

</td>

<td>

</a>

</td>

</tr>

</table>

</td>

Теперь мы добавим текст и установим ширину ячеек, просто чтобы все было в порядке, даже если между ними будет много пробелов. Мы установим для этой ячейки 75%, а для другой — 25%.

<td> ® Someone, somewhere 2013<br/> Unsubscribe to this newsletter instantly </td>

<td>

® Someone, somewhere 2013<br/>

Unsubscribe to this newsletter instantly

</td>

И все готово! Наш макет завершен.

Запустите тесты электронного письма в формате HTML.

Как мы уже упоминали много раз, HTML в электронном письме — это минное поле. Давайте проверим его через W3C Validator, чтобы убедиться, что ничего сломано. Если вы точно следовали руководству, он покажет, что все в порядке.

Далее мы проведем тест через Litmus, чтобы убедиться, что структура электронного письма работает отлично. Вот краткое изложение моего теста:

Смотреть онлайн

Стиль текста

Наш первый ряд — заголовок. Мы будем использовать тег <b> для создания полужирного текста, потому что, как мы уже знаем, если что-то существует в HTML, мы используем это вместо CSS.

<td> <b>Lorem ipsum dolor sit amet!</b> </td>

<td>

<b>Lorem ipsum dolor sit amet!</b>

</td>

Мы также добавим этот встроенный стиль ко всем другим ячейкам текста:

style=»color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;»

Далее нам нужно оформить текст футера, и мы также приведем в порядок ссылку для отмены подписки. Мы будем стилизовать текстовую ссылку для отказа от подписки, используя CSS и HTML — тег font. Это дублирование — лучший способ гарантировать, что ваши ссылки никогда не будут отображаться синим по умолчанию.

<td> ® Someone, somewhere 2013<br/> <a href=»#»><font color=»#ffffff»>Unsubscribe</font></a> to this newsletter instantly </td>

<td>

® Someone, somewhere 2013<br/>

<a href=»#»><font color=»#ffffff»>Unsubscribe</font></a> to this newsletter instantly

</td>

Все в порядке. Время отключить границы и увидеть, как это выглядит красиво. Замените каждое вхождение border=»1″ на border=»0″.

На данный момент, это выглядит немного грустно, контент плавает в пустом пространстве, поэтому давайте в нашей первой таблице шириной 600px добавим:

style=»border: 1px solid #cccccc;»

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

<td>

И это все! Все готово к финальному тесту.

Смотреть онлайн

Заключение!

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

Автор: Nicole Merlin

Источник: https://webdesign.tutsplus.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как создать html письмо для рассылки

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

Но желание — есть, поэтому стал копаться дальше. Может быть и на блоге, скоро заменю подписку по email от feedburner (под статьями) на какую-нибудь другую, где можно сделать ее более симпатичной. Главное учесть все нюансы верстки под почтовые клиенты, а их поверьте не мало.

Актуальность создания html писем для почтовой рассылки

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

Можно разослать материал о дополнительных услугах, которые, возможно, стали интересны вашим клиентам после первой покупки.

Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!

Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка. Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.

И существует масса проблем для верстальщиков, которые занимаются созданием html писем.

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

Проблемы при верстке html писем

Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи <style></style>, а именно inline, для каждого элемента отдельно.

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

Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.

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

Как написали на одном из сайтов:

Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan

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

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

Еще, для меня стало проблемой то, что приходится постоянно обнулять многие значения, например, border у картинок, если она задана как ссылка.

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

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

Как создать html письмо

Для начала, я создал каркас-таблицу для всего содержимого письма, шириной в 100% и голубым фоном. В нем разместил две дочерние таблицы. Одну для шапки (id=»header»), вторую для контента (id=»content»):



<!doctype html>
<html>
      <head>
         <meta charset="utf-8"/>
         <title>Рассылка новостей от Smartlanding.biz</title>
      </head>
<body>
      <table cellpadding="40" cellspacing="0" align="center" bgcolor="cee5f1">
         <tr>
            <td>
               <table cellpadding="20" cellspacing="0" align="center" bgcolor="ffffff">

               </table><!-- header -->
        
               <table cellpadding="0" cellspacing="15" bgcolor="ffffff" align="center">

               </table><!-- content -->
            </td>
         </tr>
      </table>
</body>
</html>

Как вы уже заметили, я задал cellpadding=»40″ для таблицы-обертки. Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше…

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



<tr>
   <td><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/mail-logo.png" alt="логотип"/>
   </td>

   <td>
      <table cellpadding="0" cellspacing="0" align="right">
         <tr>
            <td align="right"><a href="https://twitter.com/smartlanding" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/twitter1.png" alt="Я в Твиттере"/></a>
            </td>

            <td align="right"><a href="https://plus.google.com/104541820587912901962" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/googlePlus.png" alt="Я в Google+"/></a>
            </td>

            <td align="right"><a href="http://vk.com/smartlanding_biz" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/vk.png" alt="Я во Вконтакте"/></a>
            </td>
         </tr>
      </table><!-- social -->
   </td>
</tr>

Не выяснил, пока что, обязательно ли указывать размеры картинок, поэтому в этом плане пока хаос. Где-то — ставлю, где-то — нет. После тестов наведу порядок. Или уберу совсем, чтоб сократить код, или придется везде дописать, если будет некорректно отображаться в каком-то из почтовиков.

Этим кодом я добавляю строку с одним столбцом, в таблицу «content» и помещаю в него картинку, с надписью «Smartlanding»:



<tr>
   <td>
      <img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/mail-banner.png" alt="smartlanding" />
   </td>
</tr>

Сейчас письмо выглядит так:

Идем дальше. Сейчас нам нужно реализовать такую структуру:

Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:



<tr>
   <td>
      <table cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td valign="top">
               <table cellpadding="0" cellspacing="0">
                  <tr>
                     <td bgcolor="d0d0d0"><img src="https://smartlanding.biz/wp-content/uploads/2014/09/skrytie-ssylki-javascript.jpg" /></td>
                  </tr>
                </table>
            </td>  

            <td></td>  

            <td valign="top">
               <h3><a href="#">Как закрыть внешние ссылки от индексации</a></h3>
            </td>
         </tr>
      </table><!-- Slogan -->
   </td>
</tr>

Теперь необходимо реализовать анонс статьи, делается это достаточно просто. 1 строка, 1 столбец и текст в нем:


<tr>
   <td>
      <table cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td>
               <p>Привет ребята. Сегодня речь пойдет о том, как надежно закрыть внешние ссылки на своем лендинг пейдж для того, чтобы с нее не передавался вес, а оставался на вашей странице. Как вы, наверное, знаете, теперь, даже если вы закрыли ссылку атрибутом rel="nofollow", статический вес все равно передается, а следовательно убывает с вашей страницы.</p>
<a href="#" title="читать продолжение на smartlanding">Читать дальше</a>
            </td>
         </tr>
      </table><!-- TextBody -->
    </td>
</tr>

Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 — для того, чтобы задать отступ между ними (60px).


<tr>
 <td>
  <table cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td valign="top">
     <img src="https://smartlanding.biz/wp-content/uploads/2014/10/utm-metki.png" />
    </td> 

    <td></td> 

    <td valign="top">
     <img src="https://smartlanding.biz/wp-content/uploads/2014/10/smart-novosti.png" />
    </td> 

    <td></td> 

    <td valign="top">
     <img src="https://smartlanding.biz/wp-content/uploads/2014/10/script-dlya-ab-testirovaniya.png" />
    </td>
   </tr>
  </table><!-- pageImages -->
 </td>
</tr>

Точно такую же разметку делаю для текста, заголовков:


<tr>
 <td>
  <table cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td valign="top">
     <a href="#"> Как сделать UTM метки и для чего они нужны</a>
    </td>  

    <td></td>  

    <td valign="top">
     <a href="#"> Обновления на блоге и мини-отчет об оптимизации</a>
    </td>  

    <td></td>  

    <td valign="top">
     <a href="#"> Скрипт для АБ тестирования</a>
    </td>
   </tr>
  </table><!-- pageText -->
 </td>
</tr>

И теперь остается последний шаг, сделать footer. Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:


<tr bgcolor="797979">
 <td>
   <p align="center"><a href="https://smartlanding.biz" title="Smartlanding">Smartlanding</a> | 2014</p>
 </td>
</tr>

Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:

gmail
yandex
rambler
mail
mozilla thunderbird
outlook 2007
outlook 2013
the bat

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

Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки. Буду вам очень признателен. А на сегодня — все. Пока!

(Ознакомиться с предварительными тестами html письма в разных поисковых системах можно здесь)

Инструкция по HTML верстке писем email рассылки

Обновлено: 1 год назад

Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться как на телефоне, планшете, так и на компьютере.

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

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

Используйте таблицы при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте
Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

Давайте разбираться детальнее.

Где писать код шаблона? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью. Вы можете скачать бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.

Формат шаблона html-писем

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

Чаще всего одноколоночный макет включает в себя:

Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

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

Как сверстать HTML шаблон письма: Создание документа.

HTML код любого email сообщения состоит из двух частей:

Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.

Написание HTML кода электронного сообщения начинается с создания документа типа XHTML:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5. <title>Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6. </head> 7. </html>

<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.

<meta http-equiv=»Content-Type» /> указывает, как обрабатывать текст и специальные символы в вашем письме.
«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.

<meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.

Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.

Верстка тела email сообщения. Создание таблицы

Общая структура письма создается с использованием тега <body>.

Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.

Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.

Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.

Примечание. Здесь и далее мы оставим значение для границы всех таблиц как 1: border=»1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».

1. <body> 2. <table border="1" cellpadding="0" cellspacing="0"> 3. <tr> 4. <td> 5. Привет! 6. </td> 7. </tr> 8. </table> 9. </body>

Пока что наше письмо выглядит следующим образом:

(наличие рамки – результат работы тега border=»1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!»

1. <table border="1" cellspacing="0" cellpadding="0" align="center"> 2. <tbody> 3. <tr> 4. <td>Привет!</td> 5. </tr> 6. </tbody> 7. </table>

Теперь письмо выглядит вот так:

Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.

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

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

1. <tr> 2. <td> 3. Привет! 4. </td> 5. </tr>

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

Должно получиться следующее:

1. <table align="center" border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td> 4. Строка 1 5. </td> 6. </tr> 7. <tr> 8. <td> 9. Строка 2 10. </td> 11. </tr> 12. <tr> 13. <td> 14.Строка 3 15. </td> 16. </tr> 17. </table>

Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td bgcolor="#ffa500"> 4. Строка 1 5. </td> 6. </tr> 7. <tr> 8. <td bgcolor="#ffffff"> 9. Строка 2 10. </td> 11. </tr> 12. <tr> 13. <td bgcolor="#1e90ff"> 14. Строка 3 15. </td> 16. </tr> 17. </table>

Сосредоточимся на первой строке – это будет хедер письма.

Строка 1. Верстка хедера письма.

В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding>.

Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.

Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.

Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.

В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом   внутри), но с четко установленной высотой или шириной.

Например:

<tr><td> </td></tr>

Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо.

В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>.

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

Пример кода Строки 1 с вставленным изображением:

1. <td align="center" bgcolor="#ffa500"> 2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img.png"> 3. </td>

Визуально:

Строка 2. Работа с контентом в HTML шаблоне письма

Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉

Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

одна – для заголовка,
вторая – для краткого описания статьи,
третья – для строки с двумя столбцами.

Поехали!

Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.

Код Строки 2 с вложенной таблицей:

1. <td bgcolor="#ffffff"> 2. <table border="1" cellpadding="0" cellspacing="0"> 3. <tr> 4. <td> 5. Строка 1 6. </td> 7. </tr> 8. <tr> 9. <td> 10. Строка 2 11. </td> 12. </tr> 13. <tr> 14. <td> 15. Строка 3 16. </td> 17. </tr> 18. </table> 19. </td>

Визуально:

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

Вложенная таблица с текстом:

1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td> 5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах 6. </td> 7. </tr> 8. <tr> 9. <td> 10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг. 11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности. 12. </td> 13. </tr> 14. <tr> 15. <td> 16. Строка 3 17. </td> 18. </tr> 19. </tbody> 20. </table>

Визуально:

Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.

Давайте по порядку.

Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким.

Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.

*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.

Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.

Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.

1. <table border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td valign="top"> 4. Колонка 1 5. </td> 6. <td> 7.   8. </td> 9. <td valign="top"> 10. Колонка 3 11. </td> 12. </tr> 13. </table>

Визуально:

Добавляем изображения и контент.

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

1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td valign="top"> 5. <table border="1" cellspacing="0" cellpadding="0"> 6. <tbody> 7. <tr><td>  8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td> 9. </tr> 10. <tr> 11. <td> 12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 13. </td> 14. </tr> 15. </tbody> </table> 16. </td> 17. <td> 18.   19. </td> 20. <td valign="top"> 21. <table border="1" cellspacing="0" cellpadding="0"> 22. <tbody> <tr> 23. <td> 24.   25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg"> </td> 26. </tr> 27. <tr> 28. <td> 29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 30. </td> 31. </tr> 32. </tbody> </table> 33. </td> 34. </tr> 35. </tbody> </table>

Визуально:

Строка 3. Создание HMTL кода футера email рассылки

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.

Чтобы не забыть, сначала добавим отступы, а после – таблицы.

Отступы:

<td bgcolor="#1e90ff "> Строка 3 </td>

Визуально:

Разделяем строку на две колонки с помощью дополнительной таблицы.

1. <table border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td> 4. Колонка 1 5. </td> 6. <td> 7. Колонка 2 8. </td> 9. </tr> 10.</table>

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

Дополнительная таблица с информацией футера:

1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody><tr> 3. <td> 4. <p>Компания ePochta<br> 5. [email protected]</p> 6. </td> 7. <td align="right"> 8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже. 9. </td> 10. </tr> 11. </tbody></table>

Визуально:

Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=»right» для тега <td>.

Шаблон готов!

Верстка дизайна шаблона email рассылки

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

Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.

Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:

1. <td><p align="center"> 2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах 3. </p></td>

Посмотрите, как изменился текст:

Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.

При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:

<table align="center" cellspacing="0" cellpadding="0">

Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0"> 2. <tbody>><tr> 3. <td>

А теперь – проба пера: отправляем письмо на тестовый email адрес.

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

Вот так созданный шаблон выглядит в Gmail

Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте.

И пусть ваши клиенты с удовольствием читают ваши рассылки!

Загрузка…

Адаптивные email-письма без боли и страданий / Онлайн школа EnglishDom corporate blog / Habr

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

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

Верстка адаптивных писем с Foundation for Emails

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

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

Gulp: автоматизации процесса разработки
Inky шаблонизатор: конвертирует собственную разметку в HTML код
Sass: CSS препроцессор
Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
Inliner: переводит из таблиц стилей в инлайн стили
BrowserSync: перезагрузка страницы после изменения исходных файлов
Image Compression: сжатие изображений в процессе компиляции

Установка достаточно проста и состоит всего из нескольких шагов:

1. Устанавливаем foundation-cli, возможно понадобится использовать sudo

npm install --global foundation-cli

2. Переходим в директорию проекта и выполняем команду

foundation new --framework emails

CLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду npm start, после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения.

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

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

Пример кода с использованием Inky:

<container>
  <row>
    <columns>Put content in me!</columns>
  </row>
</container>

HTML на выходе:

<table align="center">
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <th>
                <table>
                  <tr>
                    <th>Put content in me!</th>
                    <th></th>
                  </tr>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Но не стоит увлекаться слишком большой вложенностью, т.к. вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)

Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».

Более подробно с документацией Foundation for Email можно ознакомиться тут.

Тонкости и трудности

Процесс верстки первых адаптивных писем у нас занял довольно продолжительное время, поэтому хотим поделиться с вами трудностями и тонкостями, с которыми нам пришлось столкнуться:

1. Реализация адаптивности в письмах — довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.

Foundation for Emails в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x», но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})

2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials.

Ваш шаблон будет выглядеть примерно так:

<html>
  <head>
    <title>Definitely STILL an Email!</title>
  </head>
  <body>
    {{> header}}
    {{> body}}
    {{> footer}}
  </body>
</html>

В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.

3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head,
дублируются, помимо этого дублировались теги head и body, как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data. Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

---
title: Page Title
description: Lorem ipsum.
---

<h2>{{ title }}</h2>

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

<p>Stuff on top</p>
<spacer size="100"></spacer>
<p>Stuff on bottom</p>

HTML на выходе:

<p>Stuff on top</p>
<table>
  <tbody>
    <tr>
      <tdstyle="font-size:100px;line-height:100px;"> </td>
    </tr>
  </tbody>
</table>
<p>Stuff on bottom</p>

6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс .show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс .hide-for-large. Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

<button href="#">Button</button>

HTML на выходе:

<table>
  <tr>
    <td>
     <table>
        <tr>
          <td><a href="#">Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

8. Не все почтовые клиенты поддерживают background-image, но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.

9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation.

В нашем примере уголок сделан с помощью псевдоэлемента :before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

Еще подобный пример

10. В процессе разработки нам необходимо проверять получившийся результат нашей верстки. Мы используем Putsmail от Litmus. Достаточно удобно, когда у вас есть возможность быстро протестировать часть письма или письмо целиком, просто вставляете HTML код и указываете свои реальные почтовые ящики. Обратите внимание, что при первом использовании вам придет письмо с подтверждением на каждый ящик, и только потом само письмо. Также вы можете использовать плагин для Grunt. Он по сути делает то же самое.

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

→ Демо письма
→ Исходники письма

Бонусы для читателей

Онлайн-курсы

Мы дарим бесплатный доступ на три месяца изучения английского с помощью наших онлайн-курсов. Для этого просто перейдите по ссылке до 31 декабря 2017 года.

Индивидуально по Skype

Будем рады видеть вас на индивидуальных занятиях курса «Английский для IT-специалистов».
Пройдите, бесплатный вводный урок и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!

вёрстка рассылки тогда и сейчас / 2ГИС corporate blog / Habr

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.

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

Электронное письмо в email-клиенте WorldCast, 2000 год

Электронное письмо в email-клиенте Gmail, 2018 год

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

История: тогда и сейчас, или почему всё так плохо

Прежде всего, давайте вспомним, как всё начиналось.
В конце 90-х появляются первые html-письма. Простые, с минимальным использованием возможностей HTML 4.01 и CSS2 (первый драфт CSS3 появится еще через несколько лет). В 1996-1997 начали появляться первые браузерные почтовые клиенты. Началась эра бесплатных веб-клиентов, поддерживающих html-разметку.

Интерфейс Hotmail, 1997

Самым популярным из них стал сервис HotMail и уже через год после запуска его купила Microsoft. К слову, Microsoft сыграет в нашей истории далеко не последнюю роль. Вслед за покупкой Hotmail Microsoft выпускает собственный десктопный почтовый клиент — Outlook. Довольно быстро он плотно занял свою нишу.

С момента своего появления html-письма не раз подвергались критике. Основные претензии: они небезопасны для пользователей, долго рендерятся, «съедают» пропускную способность интернет-канала пользователя и выглядят как жуткие поделки начинающих веб-дизайнеров. Отчасти это было правдой, но все эти проблем со временем были решены: скорость интернет-соединения выросла, взгляд на дизайн писем был в корне пересмотрен, проблемы на стороне разработчиков email-клиентов и в частности, проблемы с безопасностью, были решены. Прогресс и здравый смысл победили.

В июне 1999 года Microsoft выпускает Outlook 2000, в котором начинает использовать для рендера писем движок собственного браузера Internet Explorer — Trident.

Невероятно, но факт

Держите в голове, что использовалась та версия IE, которая стояла на системе пользователя на момент установки Outlook — даже если бы пользователь обновил браузер c 6 до 7 версии, email-клиент всё равно бы использовал движок от изначально установленного 6-го IE.

Новый движок зарекомендовал себя не с лучшей стороны у разработчиков сайтов и принес с собой большое число багов, самые известные из которых оставались «в строю» еще несколько версии email-клиента подряд. Автоматическая блокировка всех изображений и отсутствие у них alt-текста, нерабочий функционал html-форм, поломанное превью письма перед отправкой — это лишь вершина айсберга проблем Outlook 2000/2002/XP/2003.

Автоматическая блокировка изображений в Outlook 2003

В январе 2007 вышла новая версии email-клиента от Microsoft. Эта версия принесла самые серьезные изменения за всю историю Outlook. В новой версии почтовика Microsoft перешли с движка Internet Explorer на движок своего другого продукта — MS Word. Необходимость эту объяснили в первую очередь «заботой о пользователях» и «повышением безопасности email-клиента». По факту это повлекло за собой серьёзные потери в поддержке CSS-свойств и создало множество новых багов, тем самым усложнив жизнь как верстальщиков рассылки, так и простых пользователей.

Хьюстон, у нас проблемы

Баги Outlook, появившиеся после перехода на движок MS Word:

отсутствие поддержки background-image в div и table-cell,
отсутствие поддержки в CSS float и position,
отсутствие поддержки text-shadow,
слабая поддержка padding и margin,
слабая поддержка в CSS width и height,
проблемы с background-color вложенных элементов.

Великие и ужасные html-таблицы

Из-за отсутствия возможности позиционировать блоки и использовать float, а также из-за забагованных margin и padding перед разработчиками рассылки встала непростая задача: нужно было заставить письма одинаково хорошо отображаться как в предыдущем поколении email-клиентов от Microsoft, так и в текущем, ничего при этом не сломав и не забыв о других популярных почтовиках того времени.

И решение было найдено: html-таблицы. Звучит просто, но по факту это эквивалентно отказу от использования современных возможностей и особенностей HTML 4 и CSS2 и возвращению к устаревшим (даже на тот момент) подходам создания вёрстки.

Типичное html-письмо внутри

Необходимость использования html-таблиц была не единственным ограничением: нужно было не забывать и о препроцессорах, которые использовались в почтовиках. В веб-клиентах html-письмо, прежде чем отрендериться, проходит этап, на котором код анализируется с точки зрения безопасности и стабильности — препроцессинг — в результате чего из него удаляются потенциально опасные части, такие как код на javascript, embedded-контент, а также всё, что находится внутри тегов head и style и некоторые другие вещи.

Время шло, технологии не стояли на месте, спецификации HTML и CSS обрастали новыми фичами, но Outlook, а вместе с ним и 15% пользователей email-клиентов мира (на тот момент), всё также оставались на месте. Лишь с выходом Outlook 2016 (оставшегося на том же допотопном движке MS Word) отношение MS к своим пользователям, а также к разработчикам рассылки начало меняться. Компания Litmus, известная своим сервисом для тестирования рассылки в различных email-клиентах, заключила с MS партнерство.

Litmus начал помогать разработчикам Outlook с приоритезацией проблем и ускорением их решения, а пользователям сервиса — с возможностью бесплатно проверить свои письма на работоспособность в этом email-клиенте. Это дало свои плоды, но кардинально ситуацию не изменило: на момент написания статьи самым новым клиентом от MS являлся недавно анонсированный Outlook 2019. Из интересного: в нём добавилась поддержка svg, а шрифт Times New Roman больше не является фоллбеком для веб-шрифтов. Но в нём по прежнему «течёт кровь» MS Word со всеми вытекающими проблемами.

Отличия вёрстки рассылки от вёрстки сайтов

В наше время Outlook замыкает тройку лидеров с ~10% пользователей (на первом месте — Apple Mail для десктопа / мобилок, на втором — Gmail для веба / мобилок), но это всё ещё очень много. Поэтому от таблиц нам, к сожалению, пока никуда не деться.

К счастью, особенности движков Outlook нам сейчас хорошо известны. Это дало нам несколько инструментов для облегчения жизни с письмами: Conditional Comments и Vector Markup Language.

Conditional Comments

Многие олдфаги, заставшие времена IE6-8, помнят, что это такое.
«Условные комментарии» — это механизм расширения движка IE, позволяющий выбирать конкретные версии IE и применять для них необходимые нам правила. Если нам нужно добавить какие-то стили только для Outlook 2000 и выше, мы можем написать:

<!-- [if gte mso 9]>
    <style type="text/css">
        /* Стили для определенных версии Outlook */
    </style>
<![endif]-->

Также с помощью Conditional Comments можно заставить движок рендерить определенные блоки разметки только для заданных версий Outlook:

<!--[if (gte mso 9)|(IE)]>
    <table align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->

Версионирование

Outlook 2000 — версия 9
Outlook 2002 — версия 10
Outlook 2003 — версия 11
Outlook 2007 — версия 12
Outlook 2010 — версия 14
Outlook 2013 — версия 15
Outlook 2016 — версия 16

Часто Conditional Comments используется в связке с другой особенностей Outlook — VML.

Vector Markup Language

Vector Markup Language (VML) — язык векторной разметки, разработанный MS для описания векторной графики в 1998 году. Позднее он стал одним из языков, служивших основой для всем нам известного языка SVG. Начиная с момента выхода IE10 VML признан устаревшим и больше не поддерживается и не разрабатывается

Как связаны векторная графика, неподдерживаемый язык разметки и html-письма? Всё просто: background-image без VML невозможен в Outlook 2007/2010/2013/2016. Но изучать ради такого новый язык совсем необязательно: можно воспользоваться готовыми онлайн-инструментами, которые всё сделают за вас.

<body>
    <div>
        <!--[if gte mso 9]>
            <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
            </v:background>
        <![endif]-->
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png">
                </td>
            </tr>
        </table>
    </div>
</body>

Увы, это не отменяет того, что время от времени вам всё же придётся ковыряться в VML самому из-за того, что в какой-то версии Outlook у вас поехала вёрстка фона.

Наводим красоту

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

Формы

Авторы сайта emailmonks.com описали один из способов добавить в письмо работающую форму. Механизм следующий: данные формы собираются php-функцией как URL-атрибут; этот атрибут затем сохраняется в удалённом документе или таблице с данными; позже этот атрибут запрашивается из заданного источника и отображается на странице.

Поддержка у таких форм достаточно хорошая: в Apple Mail, iOS Mail, Outlook, Gmail для iOS / Android и в дефолтном email-клиенте Android они работают «из коробки».

Слайдеры

Все знают, что такое слайдеры и многие представляют как сделать их с помощью JS. Однако, сделать слайдер можно и на чистом CSS/HTML, да ещё и так, чтобы он корректно работал в современных email-клиентах (за исключением Outlook для Windows — тут для слайдеров понадобится фоллбек).

Магия работы этого слайдера заключается в 20 строках:

.slide1 { top: 10px; left: 321px;}
.slide1-content {left: 0px;}
.slide1:hover { background-color: #37B330;}
#slide-1:checked ~ .slide1 {background-color: #37B330 !important;}
#slide-1:checked + span + table .swoosh { left: 0px !important; }

.slide2 { top: 66px; left: 321px; }
.slide2-content { left: 600px; }
.slide2:hover { background-color: #37B330;}
#slide-2:checked ~ .slide2 {background-color: #37B330 !important;}
#slide-2:checked + span + table .swoosh { left: -600px !important; }

.slide3 { top: 122px; left: 321px; }
.slide3-content { left: 1200px; }
.slide3:hover { background-color: #37B330;}
#slide-3:checked ~ .slide3 {background-color: #37B330 !important;}
#slide-3:checked + span + table .swoosh { left: -1200px !important; }

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

Прочий интерактив

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

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

Что дальше?

Многие крупные компании пытаются догнать прогресс и привнести в письма современные технологии. Не так давно Google тоже решили помочь сообществу и исправить ситуацию. Их проект AMP HTML Email возьмёт в себя всё лучшее, что есть в Google AMP, и даст нам возможность без каких-либо хаков или сложной логики использовать в рассылке слайдеры, лайтбоксы, формы и даже некоторую внутреннюю логику. Правда, пока проект находится на ранней стадии и все эти прелести доступны лишь в Gmail Developer Preview.

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

30 html шаблонов для email рассылок / HTML шаблоны / Постовой

Blog by admin: HTML шаблоны: 30 html шаблонов для email рассылок

Привет друзья!
Сразу хочу извиниться за то, что так долго не писал в блог. Очень много работы и мало времени.
Недавно мы решили сделать email рассылку по существующим клиентам. Написать красивый, «продающий» текст и впихнуть его обычным текстом в письмо было бы не кошерно :). Красивей ведь, если такие письма оформлены дизайном.
Итак. Сначала я решил найти существующий, сверстанный email шаблон и его использовать. Результаты поиска вы сможете увидеть ниже. Большинство находок оказались платными. А вы знаете как я не люблю это, ведь Open Source — это всегда прекрасно. Не люблю платного и сам стараюсь побольше делать бесплатного. В итоге отобрал все бесплатное и получился данный пост.
При выборе email шаблона было несколько критериев:

Адаптивность;
Привлекательность.

В результате — ни один шаблон не подошел.
Пользователей с мобильными устройствами уже приравниваются к количеству людей со стационарными компьютерами. Так что шаблон в любом случае должен быть адаптивен. А если дизайн будет не привлекателен, то лучше уж вообще не использовать готовые html шаблоны. Итог эпопеи — сами нарисовали и сверстали.
Но если нам ни один из этих шаблонов не подошел, то это не значит что он никому не подойдет. У всех разные цели и требования. К вашему вниманию коллекция html шаблонов для email рассылок.
Пожалуйста, не используйте их для спама. Спам — зло.

Смотрите также:
20 новых бесплатных E-mail шаблонов для рассылок

Бесплатный Email шаблон

Шаблон для emai рассылок в серо-голубых тонах. Будет отлично работать на большинстве email клиентов, в том числе и на мобильных.

Адаптивный шаблон для email рассылок

Бесплатный, адаптивный шаблон для email рассылок. Он представляет собой скорее каркас, который вы можете подкорректировать под себя. Он протестирован и отлично работает с множеством email клиентами, включая такие как: Gmail (десктопная версия), Gmail (мобильная версия), Gmail (iOS), Gmail (Android), Email (Android), Outlook Express, Outlook 2003, Outlook 2011 для Mac, Hotmail (Desktop), Hotmail, Windows Mail, Live Mail