Меню

Html рассылка как сделать самому

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

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

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

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

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

  • Его следует сделать достаточно узким, т. е. по размерам оно должно не превышать диапазон 500-600 пикселей, что обеспечит корректное отображение текста и другого контента на устройствах любого типа.
  • Нужно использовать достаточно крупный шрифт для всей текстовой информации, так как на iOS-устройствах HTML-письмо будет неудобно читать, если размер шрифта менее 13 пикселей.
  • Элементы, по которым можно сделать клик, должны быть достаточно крупными и изолированными от ближайших ссылок. В таком случае адресат сможет легко их активировать с первой же попытки.

Прежде чем разработать HTML-письмо, следует создать на одном из дисков новую папку и назвать ее, например, «Рассылки». Кроме того, необходимо скачать и установить программу Dreamweaver CS3. Этот продукт от Adobe является одним из достаточно простых инструментов конструирования веб-сайтов и хорошо подходит для разработки рассылочного письма в формате HTML.

Перед тем как написать текстовую часть письма, нужно:

  • открыть довольно популярную программу-конструктор HTML-писем Dreamweaver CS3 (DW);
  • создать документ, выбрав в качестве типа «Переходный HTML 4.01»;
  • сохранить файл с расширением «.html»;
  • в верхнем меню найти команду редактирования;
  • убирать галочку из чек-бокса «Использовать CSS вместо тегов HTML».

Теперь, рассмотрим, как создать HTML-письмо. Для этого:

  • Последовательно открывают в меню вкладки «Вставить» и «Таблица» и выставляют нужные параметры таблицы. Например, строки — 2, столбцы — 1, ширина — 700, заголовок — сверху. Границы можно выставлять, а можно обойтись без них, указав 0.
  • Формируют заголовок письма. Так как HTML-письмо предназначено для большего числа получателей, поэтому используют оператор [first_name], подставляющий нужное имя получателя.
  • В нижнем окне «Свойства» выставляют нужные параметры для шрифта, размера и цвета текста заголовка и цвет фона.
  • «Выходят» из области заголовка. В нижней части экрана выставляют параметры для курсора «По центру» и «По середине».
  • Вставляем готовый текст письма или «пишем» его прямо в программе DW, выбрав нужный тип и размер шрифта, а также расположение текста на странице.

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

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

Для того чтобы оформить такой симпатичный финал:

  • вставляют в нижней части письма, внутрь основной таблицы еще одну с 3 столбцами и параметром для границы 0 пикселей;
  • выставляют курсор в том месте таблицы, где хотят видеть картинку;
  • отмечают в нижнем окне «Посередине» и «По верхнему краю» для каждой секции;
  • выбирают в верхнем меню вкладку «Вставка»;
  • делаем клик по надписи «Изображение» и в выпавшем меню вставляем скопированный нами адрес;
  • нажимаем «Ok» 2 раза.

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

Из раздела «Проект» и переходят в кодовую часть — «Код». В открывшемся окне выделяют и копируют все, что заключено между тегами и

источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как самому сделать недорого ремонт в ванной комнате

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 цены начинаются от $20 за месяц для простых email кампаний. В эту цену входят возможности управления контактами и социального обмена. Более дорогие тарифные планы включают в себя дополнительные функции такие как отслеживание.

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

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

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

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

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

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

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

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

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

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

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

источник

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

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

Как избежать ошибок и не наделать глупостей

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

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

Поэтому создание html-письма для рассылки проводится по устаревшим уже таблицам с cellpadding и colspan.

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

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

Читай, как оформить рассылку в инструкции от LEADS.

  • Создайте HTML-шаблон с помощью обычного блокнота (нужно сменить формат файла на html) или через специальное ПО, например, Dreamweaver от Adobe;
  • Используйте стандартные теги html для создания структуры письма, как уже было сказано, создаем таблицу и для каждой ячейки прописываем свои атрибуты.
  • Не забываем про общие правила: ширина письма не должна превышать 600 px, изображения должны быть сжаты (например, используй TinyPNG), чтобы письмо быстро загрузилось, а шрифт сделай больше 13, так как на «яблочной технике» могут быть проблемы с отображением.
  • Заполняем ячейки текстом, одновременно форматируя каждый блок.
  • Не забываем про верстку адаптивных писем.

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

При тестировании рассылки с Яндекс Почты сделайте следующее:

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

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

источник

Инструкция по созданию шаблона и отправке HTML-кода в письмах

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

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

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

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

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

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

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

В открывшемся коде, перед нами сразу предстанет строчка body .

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

Осталось только указать адресата и нажать на «Отправить»

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

источник

Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Такие конструкции не будут работать в head и body:

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

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

border=«0» — толщина рамки в пикселах;
cellpadding=«0» — отступ от рамки до содержимого ячейки;
cellspacing=«0» — расстояние между ячейками;
style=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
-webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
display: block — делает строчный элемент блочным:

alt=»» — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
border=«0» — толщина рамки в пикселях (px);
w > display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

Свойства background=»» bgcolor=»» можно применять только для тега

так как gmail не воспринимает эти свойства в других тегах, если заходить на почту с помощью браузера Safari.

Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами:

Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода. Отступы можно делать с помощью CSS свойства padding. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу span, то десктопный Outlook 2007/10/13 + не будет применять отступы.

Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook.com.

Советую применять padding к ячейке таблицы:

Или использовать для отступов пустые ячейки таблицы.

Для любого HTML документа необходимо использовать DOCTYPE. Он показывает браузеру, каким образом интерпретировать HTML-разметку. Есть разные версии языка HTML и XHTML, которые имеют разный синтаксис.

Для писем наиболее подходящим доктайпом является:

Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: bold; font-style: italic; или теги:

Жирный текст, аналог стиля font-weight: bold;

Наклонный текст курсив, аналог font-style: italic;

Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр (HEX) #dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, #ffffff можно сократить #fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи. Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, #D4D4D4 нужно записать в таком виде: #d4d4d4.

RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb (240,248,250) не будет работать.

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

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:

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

2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить w >

Не нужно задавать таблице height=«100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.

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

display: block;» — решает проблему отображение свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

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

Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail).

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

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

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

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

Общая структура разметки будет выглядеть следующим образом:

Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.

Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы:

Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.

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

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

источник

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

Самая большая проблема при разработке HTML шаблона письма – это обеспечение его совместимости с разными платформами. Существует множество различных почтовых клиентов, например, Google Mail , Apple Mail , Outlook , AOL , Thunderbird , Yahoo! , Hotmail , Lotus Notes . Некоторые из них уже давно не у дел. Особенно это касается поддержки CSS , поэтому нам нужно использовать HTML таблицы , чтобы обеспечить корректное отображение писем. Фактически, использование HTML таблиц является единственным способом создать макет, который будет одинаково отображаться в разных почтовых клиентах.

Также нужно использовать встроенный CSS для управления элементами внутри шаблона. Например, цветом фона и шрифтами. Объявление стилей CSS должно быть простым, без использования каких-либо CSS файлов .

Чтобы убедиться в этом, рассмотрите пример ниже, в котором я применил атрибут border , чтобы вывести границу каждой таблицы. Обратите внимание, что символы %s являются местом, где будет размещен динамический текст и картинки:

Начнем программировать! Прежде чем приступить к созданию красивого шаблона HTML письма , нужно начать HTML файл с XHTML документа :

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

Установите cellpadding и cellspacing в ноль , чтобы избежать непредусмотренного пространства в таблице. Также установите ширину в 100%, поскольку эта таблица является телом письма ( стилизация тега body полностью не поддерживается ).

Теперь мы добавим вместо текста « My first email template! » (« Мой первый шаблон электронного письма! ») другую таблицу:

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

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

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

Несколько замечаний перед тем, как сделать шаблон HTML письма :

  1. Добавьте атрибут alt там, где нужно показать текст вместо изображений на случай, если почтовый клиент не сможет правильно загрузить их;
  2. Добавьте маркер %s там, где нужно, чтобы данные появлялись динамически в зависимости от варианта письма;
  3. Процентные значения обозначаются дополнительным знаком %. Это сделано так, чтобы PHP библиотека, которая используется для динамической обработки, знала, как правильно анализировать текст.

Мы успешно разработали статический шаблон электронного письма. Теперь давайте сделаем его динамическим!

Сохраните приведенный выше код в виде файла template.html . Теперь создадим новый PHP файл .

На серверной стороне зададим метод отправки HTML шаблона письма , описанный ниже:

Если внимательно посмотреть на HTML шаблон письма , то можно увидеть, что я добавил маркеры %s для заполнения в определенных местах. Конкретнее, в элемент изображения баннера и основной текст. Сейчас все, что нам нужно сделать, это импортировать описанный выше HTML шаблон , разобрать его как обычный текст, добавить соответствующий текст вместо %s и воспользоваться упомянутым выше методом send_mail_template :

Теперь, когда все готово, можно использовать оба метода и отправить наше первое динамическое письмо! Давайте воспользуемся созданным шаблоном письма для рассылки HTML . Допустим, что новый пользователь только что подтвердил свой электронный адрес. Хотелось бы отправить пользователю письмо с текстом Your email has been successfully verified (« Ваша электронная почта успешно подтверждена »).

Предположим, что у нас есть подтвержденная почта пользователя user@user.com и почта компании company@company.com . Теперь можно отправить автоматическое письмо:

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

Данная публикация представляет собой перевод статьи « How to create a dynamic HTML Email Template » , подготовленной дружной командой проекта Интернет-технологии.ру

источник