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


Содержание материала:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Конструкторы HTML-писем

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

Конструкторы HTML-писем

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

Mosaico

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

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

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

Tilda

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

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

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

CogaSystem

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

GetResponse

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

ePochta

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

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

Outlook

Outlook наверняка знаком большинству пользователей ОС Windows, так как входит в стандартный пакет офисных приложений от Microsoft. Это почтовый клиент, в котором имеется свой редактор HTML-сообщений, которые после создания можно будет отправить потенциальным адресатам.

Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.

Заключение

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

Отблагодарите автора, поделитесь статьей в социальных сетях.

Как создать 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. Для этого нужно нажать на иконку с земным шаром в среднем верхнем меню. Если вместо букв на экране появилась абракадабра, то следует выставить в настройках вашего браузера автокодировку.

Кодировка

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

Как создать шаблон новостной рассылки – 7 простых шагов

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

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

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

Конечный продукт

Вот пример того, как может выглядеть ваше информационное письмо, когда мы закончим этап проектирования:

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

1. С чего начать?

Как правило, лучше всего создать свой шаблон с фиксированной шириной вместо подвижной («жидкой»). Это поможет избежать использования горизонтальных полос прокрутки в результате неиспользования полной ширины экрана. Создайте шаблон шириной в 550–600 пикселей и убедитесь, что важная информация находится на высоте 300–500 пикселей, так как это размер средней области предварительного просмотра большинства обычных почтовых клиентов.

2. Настройка документа в Photoshop

Откройте Photoshop и создайте новый документ шириной 800 пикселей и высотой 1 000 пикселей с разрешением 72 dpi. Убедитесь, что установлен цветовой режим RGB.

Рис. 2. Начало создания новостной рассылки в Photoshop

Для примера выберем в качестве фона светло серый цвет. Создадим контейнер шириной 600 пикселей для размещения основного контента. Заполним его белым и расположим по центру документа.

Рис. 3. Настройка цветовой палитры в Photoshop

3. Разрешите пользователю просматривать почту в любом браузере

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

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

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

Рис. 5. Заголовок блога The Pet Anthology

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

Рис. 6. Пример заголовка новостного письма The Pet Digest для блога The Pet Anthology

Здесь использованы следующие шрифты: Slab Tall X для слов Pet Digest, Champagne & Limousines для слов Our Weekly Bundle и Learning Curve для the.

5. Создание основной части новостного письма

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

Рис. 7. Создание основной части новостного письма

Затем я собираю контент, который будет представлен в новостном письме на ближайшую неделю. Опять же, заимствуя атрибуты дизайна, уже представленные в моем блоге The Pet Anthology, я создаю заголовок с помощью Museo Sans, перетаскивая главное изображение, а также копирую и вставляю текст статьи. Пунктирная граница, расположенная ниже, будет разделять каждое поле статьи.

Рис. 8. Добавление контента в основную часть новостного письма

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

Рис. 9. Дублирование контента в новостном письме для последующего макетирования

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

Рис. 10. Окончательный вид основной части новостного письма

6. Добавьте ссылки на социальные сети

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

Рис. 11. Вставленные ссылки на социальные сети и «Поделиться этим текстом с друзьями»

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

7. Добавьте нижний колонтитул

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

Рис. 12. Добавление нижнего колонтитула к новостной рассылке

Вывод

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

Простой способ создания шаблона письма?

Есть задание создать шаблона для писем, которые будут получать пользователи. Я никогда это полностью не делал и слышал, что с 0 создать очень трудно.
Есть ли какие то готовые примеры или генераторы?
В письме будет только текст


  • Вопрос задан более трёх лет назад
  • 285 просмотров

А ты пытался искать? Вот такое есть.

P.S: Я прежде чем создать свой шаблон (простенький) уйму статей перерыла и собрала из 10 свой 1.

например *промежуточный вариант (требует доработок, но как для основы просто посмотреть)

30 html шаблонов для email рассылок

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

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

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

Бесплатный 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

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

Каркас для адаптивного шаблона email рассылок. Работает практически со всеми email клиентами.

900+ бесплатных адаптивных шаблонов писем для email-рассылки

Многие считают, что электронная почта устарела, а спам дискредитировал ее как маркетинговый инструмент. В продвижении продуктов и услуг некоторые компании делают ставку на SEO и SMM. Но на практике рассылки по-прежнему остаются самым простым и эффективным способом взаимодействия с клиентами.

Топ-пост этого месяца:  Адаптивные темы для wordpress для бизнеса

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

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

В этой подборке собраны бесплатные адаптивные шаблоны для любых целей и различных сфер бизнеса.

27 шаблонов Litmus

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

70 шаблонов Free Email Templates

На сайте шаблоны представлены по категориям:

  • темные шаблоны;
  • шаблоны с левой боковой панелью;
  • светлые шаблоны;
  • шаблоны с одной колонкой;
  • шаблоны с правой боковой панелью.

http://freemailtemplates.com

45+ шаблонов Template

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

200+ шаблонов Chamaileon

На сайте представлено более двухсот адаптивных шаблонов для регулярной и транзакционной рассылки

39 шаблонов Cakemail

Cakemail — платформа email-рассылки для малого бизнеса. бесплатные шаблоны писем представлены несколькими категориями:

  • бизнес;
  • ресторан;
  • сезонные;
  • специальные события;
  • транзакционные;
  • образование.

cakemail.com

42 шаблона PixsHub

PixsHub — отличный сайт для дизайнеров. Тут вы найдете бесплатные PSD шаблоны для создания веб-сайта, мобильного приложения, иконок, наборов пользовательских интерфейсов, веб-приложений, шаблонов HTML, макетов, тем WordPress и 42 шаблона писем для рассылки

20 шаблонов MJML

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

  • транзакционные;
  • маркетинговые;
  • приветственные;
  • новостные;
  • квитанции;
  • электронная коммерция;
  • мероприятие;
  • путешествие.

mjml.io

16 шаблонов ZUBR

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

20 шаблонов Themezy

Еще один отличный и бесплатный ресурс — Themezy. На сайте представлено 20 бесплатных адаптивных шаблонов писем для рассылки.

14 шаблонов Sendwithus

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

3 шаблона FreshMail

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

92 шаблона Bee Free

Bee Free — это простой и бесплатный редактор писем для email-рассылки. Для редактирования представлено 92 шаблона в девяти различных категориях

209 шаблонов Stripo

Это бесплатный онлайн email редактор для создания адаптивных шаблонов. После регистрации на сайте пользователям доступны 209 шаблонов

7 шаблонов Topol

Topol — это тоже бесплатный редактор для создания адаптивных писем для email-рассылки. На сайте представлено семь базовых шаблонов

90+ шаблонов MailChimp

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

Шаблоны и редакторы шаблонов для e-mail рассылок

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

Сайты шаблонов

  • TemplateMonsterЭто, в первую очередь, каталог шаблонов для веба, но также есть и достаточно большая категория шаблонов для e-mail рассылок (160 на момент написания этой статьи). Цены умеренные.
  • GoodEmailCopyЕщё один сайт с примерами транзакционных писем от крупных Интернет-компаний. Удобный поиск по тегам. Удобно, что всё на одной странице и работает очень быстро. Неудобно, что они сохранили только текст и удалили весь дизайн и разметку, а это очень важно.
  • EmailDripsПримерно полсотни вручную отобранных примеров писем известных компаний. Удобный фильтр категорий. Сайт отличается от многих других подобных тем, что содержит советы и комментарии по сериям писем.
  • GetMailtoНа этом сайте вам предлагается за $89 купить набор шаблонов для всех случаев жизни. Утверждение, конечно же, спорное, так как при принципе «One fits all» работает не всегда и не везде. Впрочем, для начинающих компаний и стартапов очень даже может подойти.
  • GoodSalesEmailsПримеры писем известных компаний для сейлз-менеджеров. Удобно, что в шаблоны сразу же вставлены макросы подстановки. Этот сайт интересен тем, что собирает письма узкой направленности, с чёткой целью что-то кому-то продать.
  • EmailsFresh Коллекция примеров писем с категориями по индустриям. Не шаблоны, реальные примеры. В сумме несколько сотен шаблонов. Преимущественно транзакционные письма

На выше приведённых сайт (кроме TemplateMonster и GetMailTo) представлены примеры реальных писем реальных компаний. Просто так брать и использовать их нельзя, так как это защищено авторским правом. Легально использовать можно шаблоны, которые продаются или раздаются бесплатно. Например, на СендПульсе вы сможете найти более 150 шаблонов для разных случаев жизни.

Конструкторы шаблонов

  • EmailFactory Новый сервис автоматической генерации шаблонов для e-mail рассылок. Самым важным преимуществом является генерация шаблона на основе вашего сайта. EmailFactory может распознать ключевые элементы на вашем сайте, такие как логотип, описание компании, цветовая гамма и создать шаблон для ближайших событий. Есть удобная интеграция с SendPulse и другими менее популярными в России сервисами.
  • Tilda. Конструктор шаблонов писем – это относительное новая услуга. Есть интеграция с аккаунтами в MailChimp и SendGrid, а с аккаунтами SendPulse интеграция через Zapier. Можно получить HTML-код письма и импортировать его в другой сервис рассылок. Все шаблоны адаптивные, письма корректно отображаются на разных устройствах. Конструктор состоит из четырех блоков: текст, изображения или gif-анимация, карточки товаров и статей, шапка и футер. Есть функция добавления фонового изображения. В шаблон от Тильды к карточкам товаров можно добавлять кнопки действий. А также у каждого письма своя страница с адресом.
  • MailCultЭто итальянский сервис, похож по функционалу на EmailFactory. Есть интеграциям с несколькими сервисами рассылок. Сервис бесплатный, но, похоже, именно по этой причине выглядит заброшенным и не развивается.
  • Mosaico Редактор шаблонов, работает по лицензии open-source. Можно скачать код проекта с Гитхаба и приспособить для своих целей. Заявлена корректная генерация HTML-кода для всех самых популярных почтовых приложений.
  • RocketWayЕщё один конструктор шаблонов, который на самом деле работает больше как агентство, через менеджера. Экспорт в популярные на западе сервисы рассылок.
  • InkBrushБесплатный сервис для генерации адаптивного HTML-кода для рассылок от компании MovableInk. Их уникального – позволяет загрузить просто картинку или PSD-файл, и далее сделать HTML-вёрстку в конструкторе. Есть экспорт в сервисы рассылок, но всего лишь два раза в месяц.
  • Stripo.Email Конструктор HTML-писем от украинской компании еСпутник. Есть прямой экспорт в еСпутник, MailChimp и GetResponse. Сервис бесплатный для всех, каких-то выдающихся уникальных особенностей мы не обнаружили.
  • BeeFreeПродукт от небольшого итальянского сервиса рассылки MailUp. Никаких уникальных особенностей нет, просто неплохой конструктор HTML-писем.

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

Быстро создаём страницу html — пошаговое руководство с разъяснением

Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.

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

Как создать страничку


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

Вставьте в него вот этот код.

Моя первая страница

Создать страницу проще, чем вы думаете

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

Простой код позволяет сделать текст красным

Написать жирным не намного сложнее

Мы дошли до самого низа

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

К примеру, вот ссылка на мой блог — Start-Luck — рассказывает просто о «сложном».

Написание электронных HTML писем

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

Введение

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

Проблема: Почтовые клиенты

Вы думаете IE — самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?

Решение: Программируйте как в 1997

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

Шаг 1: Дизайн

Простота

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

Минимизируйте использование изображений

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

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

Чем Уже, тем лУчше

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

Сохраняйте пропорции

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

Наш дизайн

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

Шаг 2: План

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

Во-первых, начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.

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

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

Отступы внутри и снаружи ячеек

Вместо использования CSS свойств margin и padding мы будем использовать атрибуты HTML cellpadding и cellspacing. Cellpadding — почти то же самое, что и padding в CSS — отступы от содержимого до рамки. Cellspacing — это отступы между ячейками таблицы.

Cellspacing таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти cellpadding и cellspacing относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни cellpadding, ни cellspacing, необходимо определить это для каждой таблицы.

Топ-пост этого месяца:  Численность пользователей интернета достигла 50% населения планеты

Шаг 3: Написание кода

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

Создаем скелет

HTML-код письма будет очень прост: нам нужны три главных тега html, head и body. Давайте создадим базовую таблицу и три внутренние таблицы, о которых мы ранее говорили.

Есть несколько способов описания тега DOCTYPE. Однако в данном случае, мы исключим его вообще, так как его описание нам ничего не даст.

Заметьте, что у двух таблиц cellpadding=»20″. Это отделит их от основного содержимого. Отступы главной таблицы равны 15 пикселей. Это делается для того, чтобы установить упорядоченность по вертикали. В связи с тем, что каждый раздел находится в своей отдельной ячейке, то между ними будет отступ в 15 пикселей.

Заметьте также, что у всех таблиц задан атрибут align со значением «center», а ширина таблиц задана явно (600 пикселей). В электронных HTML письмах лучше не указывать ширину основной таблицы явно. Лучше устанавливать размеры каждой ячейки, но у нас есть отступы, так что можно об этом не беспокоиться.

Таблицы с заголовками

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

Вторая таблица выглядит абсолютно так же.

Заголовок

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

Не забудьте указать ширину каждой ячейки, равную 570 пикселей (600 — 15 пикселей отступов с обеих сторон). Мы также выравниваем дату по правому краю. Фоновое изображение добавим позже. А пока в качестве фона будет бледно-голубой цвет.

Заметьте, мы используем атрибут bgcolor вместо style=»background: «. Это все потому что html атрибуты воспринимаются в электронных письмах лучше, нежели CSS свойства.

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

Основное содержимое — 2 колонки

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

одной для изображения,

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

и одну для самих заголовков.

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

Примечание:

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

Атрибуту valign даем значение «top». Это важно, так как располагает каждую ячейку в верхней части строки. Значение по умолчанию — middle, что приводит к непредсказуемым результатам.

Используем изображения от dummyimage.com, так как все изображения, используемые в электронных письмах, должны быть выложены в сеть (подробнее бо этом позже), и намного проще использовать генерируемые изображения. Просмотрите сайт, там объясняется, как задать картинке необходимый URL.

Основное содержимое — 1 колонка

Это очень простая часть: таблица из одной колонки с одним абзацем. Не забудьте задать ширину ячейки и выровнять таблицу по центру.

Разделители

Для того чтобы добавить отступы по вертикали (помимо 15 пикселей, которые у нас уже есть), необходимо использовать изображения. Вспомним 90-ые! Можно подгрузить изображение gif, но на данный момент быстрее использовать одно из иображений от dummyimage.com. Я оставлю его серым, но в последствии можно сделать его белым.

В результате получаем что-то вроде этого:

Основное содержимое — 3 колонки


Для этой части используем таблицу из 5 ячеек: три на колонки и две в качестве разделителей между ними.

Достаточно просто. Для границ примените тот же метод, что в части из 2 колонок. Не забывайте про valign!

Повторите то же самое и для текста.

Добавьте еще один разделитель в нижней части, и на этом почти всё:

Осталось совсем немного.

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

Работа над основной частью на этом завершается.

Пару слов об изображениях

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

Шаг 4: Оформление письма

Мы не можем подключить стили CSS и не можем описать стили в теге head в письме, потому что некоторые почтовые клиенты игнорируют его или только тег style. Мы будем использовать встроенные стили, хотя это и очень громоздко. К счастью, есть некоторые сервисы, которые встраивают стиль в html код. Я пользуюсь услугой сайта Premailer, которая делает это за меня.

Мы напишем CSS стили отдельно, а затем воспользуемся premailer-ом.

Сброс основных значений по умолчанию

Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.

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

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

Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа «font: «), так как результаты будут неоднозначными.

Смотрите, теперь письмо выглядит намного привлекательнее!

Фоновые изображения

Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.

Другие стили

Необходимо задать стиль каждой ссылке, в противном случае, она примет стиль, заданный по умолчанию почтового клиента. А также добавим рамку главной таблице. Еще добавим атрибут display:block каждому изображению, это исключит дефект, возникающий в Outlook и Hotmail.

Мы закончили. Приступим к тестированию!

Шаг 5: Тестирование

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

Почтовые клиенты

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:

Как тестировать?

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

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

Тестирование с помощью Mailchimp

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

Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol» campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.

На странице design выберите Import -> Paste in code, а затем отметьте пункт Automatic CSS Inliner.

Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.

Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

Тестирование с помощью Litmus

Litmus — это веб-приложение, тестирующее HTML письма во всех почтовых клиентах любой версии. Полная версия сервиса платная, и если ваш заказчик отказывается оплачивать эту услугу, вы можете протестировать бесплатно старую версию Gmail и Outlook 2003, которые все еще используются.

Хорошие результаты

Некоторые тесты показали довольно-таки хорошие результаты:

Не очень хорошие результаты

Некоторые результаты не вызывают восхищения, но есть и неплохие:

Плохие результаты

Old Gmail (explorer)

Исправление ошибок

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения !important. Иногда я почти уверен в том, что они хотят свести меня с ума.

Чтобы это исправить, нужно добавить !important ко всем стилям заголовков:

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

Вот мы и решили проблему с Hotmail:

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

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

Устранение неполадок

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

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

Проверяйте стандартные стили: используйте что-то вроде Firebug или Webkit Inspector, чтобы проверять, не перекрывает ли почтовый клиент ваши стили. Если это происходит, добавление обозначения !important решит проблему.

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

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

Результат

Вот конечный вариант кода:

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

Ничего особенного, но это должно дать вам представление о том, как разрабатывать электронные HTML письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/
Перевел: Станислав Протасевич
Урок создан: 20 Января 2011
Просмотров: 186806
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

Добавить комментарий