Html рассылка: бесплатные инструменты для маркетолога — Журнал Mindbox о разумном бизнесе

Раскрывшееся окошко «Новое сообщение» развернём по максимуму, нам далее очень пригодится это пространство

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

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

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами <div id…> и <div>. Именно это содержимое определяет отображение html-страницы в теле письма.

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

Правый клик по выделенному блоку <div id…>…<div> вызовет контекстное меню, в нём выбираем команду «Edit as HTML» — редактировать, как HTML.

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор <br>, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.

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

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

33 шаблона писем с подтверждением 📭

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

Типы писем-подтверждений

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

Здесь письма с подтверждением приходят на помощь.

электронная коммерция

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

• электронная почта для активации учетной записи

  ;

• электронная почта для подтверждения учетной записи

  ;

• письмо с подтверждением заказа;

• письмо с подтверждением оплаты;

• письмо с подтверждением доставки заказа.

SaaS-предприятия

• электронная почта для регистрации

  ;

• письмо с подтверждением подписки;

• электронная почта для подтверждения учетной записи

  ;

• письмо с подтверждением обновления информации.

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

Общие требования к электронным письмам с подтверждением

Хотя каждый тип должен иметь свое содержание, есть несколько общих советов о том, как создать эффективное электронное письмо с подтверждением : :

а) Придумайте правильное сообщение и строку темы

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

Письма-подтверждения дают клиентам чувство уверенности после покупки.

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

• Персонализируйте свои электронные письма клиентам

• Рекомендовать сопутствующие товары для допродажи и перекрестных продаж

• Продвижение рекомендаций клиентов

• Предложить скидку на следующую покупку

Используйте простые строки темы, например:

• Спасибо за заказ! — Хаома;

• Пожалуйста, подтвердите свою электронную почту в Zencastr. — Зенкастр;

• Вы в списке для участия в закрытом бета-тестировании Stark для Mac! — Старк;

• Добро пожаловать в закусочную, фрэши. Ваш заказ подтвержден. — Ипси;

• Заказ GIRCO650000 доставлен! — ГИР.

b) Не добавлять рекламу

Прямая реклама в подобных электронных письмах неприемлема, поскольку ее можно рассматривать как агрессивную форму продаж. Вы знаете, когда компания кричит: «Купите это, купите это у меня сейчас!» со всех возможных углов. Позвольте своим клиентам сначала познакомиться и тепло поприветствовать. Вы можете добавить совет (например, раздел «Что обычно покупают с этим товаром»), но не пихайте его в лицо клиентам.

c) Используйте только одну кнопку в электронной почте 

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

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

d) Будьте лаконичны

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

e) Добавьте контактную информацию и ссылки на свои профили в социальных сетях

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

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

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

Теперь мы подошли к практической части этой статьи. Давайте внимательно рассмотрим, какое сообщение вы должны писать в каждом электронном письме и как вы можете его оформить.

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

И следи за манерами! Используйте такие сообщения, как «Спасибо за подписку», «Что делать дальше (если что)…», «Если вам нужна помощь…» и т. д.

Используйте этот шаблон

Используйте этот шаблон

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

Воспользуйтесь этим шаблоном

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

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

Используйте этот шаблон

Здесь добавьте адрес прибытия и способ доставки, дату и ссылку для отслеживания в электронное письмо с подтверждением, и все! Посмотрите на этот пример ниже; это может вдохновить вас на создание нового электронного письма с нуля, или вы можете настроить это, и оно готово к полету.

Используйте этот шаблон

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

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

(Источник: ReallyGoodEmails)

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

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

Используйте этот шаблон

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

Дизайн электронных писем-подтверждений

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

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

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

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

Используйте этот шаблон

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

Любое электронное письмо с подтверждением должно содержать только одну кнопку CTA, чтобы не отвлекать получателей.

Используйте этот шаблон

Stripo позволяет создавать кнопки любой формы для письма с подтверждением. Используйте возможности!

Узнайте больше в нашей статье Рекомендации по электронной почте с призывом к действию.

• Сделать его доступным

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

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

(Источник: исходное электронное письмо от Uber)

(так видят люди с красной слепотой)

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

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

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

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

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

Автоматизация создания электронных писем

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

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

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

Ускорьте создание электронных писем с помощью модульного дизайна электронной почты

Присоединяйтесь к Stripo

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

Заключительные мысли

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

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

Лучше один раз попробовать, чем потом думать!

Разрабатывайте и создавайте информационный бюллетень в формате HTML, не сходя с ума — журнал Smashing Magazine

• Чтение за 15 мин.
• Направляющие, Информационные бюллетени, Стратегия контента
• Поделиться в Twitter, LinkedIn

Об авторе

Мэтью Паттерсон заботится обо всех клиентах в Campaign Monitor, популярном веб-приложении для рассылки новостей по электронной почте для веб-дизайнеров, и в настоящее время пишет … Больше о Мэтью Паттерсон ↬ ​​

«Нам очень нравится этот новый веб-сайт, который вы создали! Теперь мы хотели бы разослать электронное письмо всем нашим клиентам, друзьям и всем, и оно должно выглядеть точно так же, как веб-сайт, за исключением вращающегося почтового ящика внизу, а также моей фотографии и фотографии моего кота…». У вас когда-нибудь был такой разговор с клиентом?

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

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

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

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

1. Уважайте своего читателя. Не тратьте их время и внимание.
2. Сначала вежливо спроси.
3. Сосредоточьтесь на релевантности.
4. Разрабатывайте с учетом цели, чтобы вы знали, сработало ли это.
5. Упростите отписку.
6. Пишите как в 1999 году (буквально) и используйте встроенный CSS.
7. Всегда включать текстовую версию.
8. Не думайте, что изображения будут просматриваться.
9. Соблюдайте закон.
10. Проверяйте все перед отправкой, потому что обратно не заберешь.
    

Больше после прыжка! Продолжить чтение ниже ↓

1.

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

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

Отличным примером того, как добраться до сути, является недавнее объявление Haystack. Не нужно гадать, для чего нужен Haystack, когда вы читаете начало этого письма:

2. Спросите Nicely First

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

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

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

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

В 2006 году компания Return Path провела исследование, которое показало, что «знание отправителя и доверие к нему» является самым важным фактором, влияющим на то, откроют ли получатели электронные письма, поэтому недостаточно избегать жалоб на спам.

3. Сосредоточьтесь на релевантности

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

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

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

Сядьте со своим клиентом или начальником и прямо спросите: «Что вы хотите, чтобы люди сделали, когда получат это письмо?» Возможно, вам придется заставить их выбрать только один для начала! Проектировать для достижения 10 различных целей сложно, но вы можете разработать дизайн, поддерживающий только 1 или 2. Как мы обсудим позже, вы можете измерить, достигли ли вы своей цели множеством способов.

5. Упростите отмену подписки

Мы все склонны скрывать унылые заявления об отказе от ответственности и положения и условия в Tiny Grey Font Land внизу страницы, но помещать туда ссылку «Отписаться» — плохая идея. Нет смысла больше писать по электронной почте людям, которые не заинтересованы в вашем контенте. Если ваш контент больше не актуален для них, позвольте им легко отказаться от подписки. Усложнение, скорее всего, приведет только к жалобам на спам и оставит у людей плохое впечатление о вашей компании.

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

Это тоже не должно быть скучно. Один из моих любимых: «Вы можете отказаться от подписки мгновенно, но если вы это сделаете, мы можем кричать, плакать, а затем звонить вам в 2 часа ночи и умолять вас вернуться. Это твой выбор.» Не подходит для каждого клиента, но вы можете повеселиться с более случайными электронными письмами.

6. Код как будто 1999 (буквально) и используйте встроенный CSS

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

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

Некоторые почтовые клиенты удаляют CSS из головы, но оставляют блоки стилей в теле (как бы недействительно это ни было). Gmail идет дальше и удаляет весь CSS из заголовка и тела, но оставляет встроенные стили.

Итак, как только вы закончите свой дизайн, вам нужно будет пройти и добавить встроенные стили к вашим элементам. Некоторые почтовые сервисы помогают вам в этом; или вы можете использовать Premailer. Вы также можете использовать некоторые изящные инструменты для встроенного стиля CSS, такие как The Automatic CSS Inliner Tool или Inline Styler — последний преобразует правила CSS в атрибуты встроенного стиля.

7. Всегда включайте текстовую версию

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

Опять же, ваша служба электронной почты, вероятно, предоставляет такую ​​возможность. Обычный текст может быть трудно читать, поэтому потратьте некоторое время на то, чтобы сделать его сканируемым и полезным. Вот недавний пример от Марка Херста из Good Experience:

8. Не думайте, что изображения будут просматриваться

Если вы использовали Outlook или Gmail, вы много раз видели сообщение «Изображения в этом письме не отображаются». Во многих основных почтовых клиентах ваши изображения не будут отображаться по умолчанию . Читатели должны щелкнуть ссылку или кнопку, чтобы загрузить и отобразить их. Вот недавнее электронное письмо, которое мы видели. Слева — предполагаемый дизайн (ну, его верхняя половина), а справа — то, как он выглядит в Gmail по умолчанию. Не совсем понятно!

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

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

Как это обойти? Вот несколько идей:

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

9. Соблюдайте закон

Ознакомьтесь со всеми применимыми правилами коммерческой электронной почты в вашей стране. Самыми известными, конечно же, являются законы США о CAN-SPAM, но есть и многие другие.

Возможно, вам потребуется указать адрес физического здания в электронном письме или что-то вроде «[реклама]» в строке темы. Многие инструменты электронного маркетинга помогают создавать шаблоны с этими необходимыми элементами, чтобы ваш клиент не рассылал электронные письма без них.

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

10. Проверяйте все перед отправкой, потому что вы не можете забрать это обратно

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

Советы, приемы и ресурсы по созданию электронной почты

Хотя найти их труднее, чем общие советы по веб-дизайну, в Интернете можно найти много помощи для создания успешного информационного бюллетеня. В замечательном 24 Ways у Дейва Грейнера есть отличный список технических советов и приемов, который стоит прочитать полностью (комментарии тоже). Вот несколько лучших советов:

• Используйте таблицы для структурирования вместо CSS.
• Вложенные таблицы более надежны, чем отступы и поля.
• Избегайте сокращений CSS. (Используйте полные определения.)
• Не используйте изображения PNG, поскольку они не отображаются в Lotus Notes 6 и 7.
• Явно задайте поле для каждого абзаца, поскольку значения по умолчанию сильно различаются.

Прочтите статью «Rock Solid HTML Emails» для получения всех советов и комментариев. Ваш следующий шаг должен состоять в том, чтобы добавить в закладки следующие ссылки и сэкономить кучу времени (и, возможно, вашу линию роста волос).

HTML-шаблоны электронной почты и галереи дизайна:

• Бесплатные шаблоны электронной почты от SendPulse
• Шаблоны Themeforest
• Бесплатные шаблоны от MailChimp
• Галерея великолепных дизайнов Campaign Monitor
• Галерея красивых электронных рассылок
• Вдохновляющие информационные бюллетени Коллекция красивых и креативных макетов Damian Мадрей.

Исследование Campaign Monitor по рендерингу HTML в почтовых клиентах:

• Руководство по рендерингу CSS в почтовых клиентах
• Работает ли видео в электронной почте?
• Могу ли я использовать форму в своем электронном письме?

Инструмент для тестирования:

• Проверка электронной почты Litmus

Когда надоело решать проблемы…

• Кампания Fix Outlook

Планирование новостных рассылок по электронной почте

Мы рассмотрели некоторые важные конструктивные и технические факторы, которые делают электронную почту в формате HTML уникальной задачей, и это может быть все, что вам нужно. Однако проектирование — это не объединение HTML, CSS и нескольких изображений. Речь идет о решении проблем, а рассылки по электронной почте требуют планирования, как и веб-сайты. Создание электронной почты технически сложно, но не невозможно.

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

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

• Кому вы отправляете эти письма?
• Какова основная причина отправки этих писем? (Чтобы стимулировать продажи? Наладить отношения с подписчиками? Начать общение?)
• Какие типы электронных писем вы планируете отправлять?
• Какой тип содержимого вы хотите отправить?
• Как часто вы хотите отправлять электронные письма?
• Хотите, чтобы электронные письма соответствовали существующему визуальному дизайну?
• У вас есть примеры других писем, которые вам нравятся?

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

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

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

Измерение успеха вашего информационного бюллетеня

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

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

Некоторые общие показатели:

• Open rate = сколько из тех, кто получил ваше письмо, действительно прочитали его.
• Рейтинг кликов = Сколько из тех, кто открыл электронное письмо, нажали на ссылку.
• Переадресация = Если в вашей программе есть функция «Отправить другу», вы можете увидеть, сколько людей ею воспользовалось.
• Отписки = количество людей, отписавшихся от вашей рассылки.
• Коэффициент конверсии = Сколько из тех, кто перешел на ваш веб-сайт, купили ваш продукт, загрузили пробную версию или выполнили какое-либо другое отслеживаемое действие. Программное обеспечение, такое как Google Analytics, может использоваться для записи таких действий и связывания их с их источником, в том числе, если это была ваша кампания по электронной почте.

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

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

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

Узнайте больше об электронном маркетинге

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

Вот некоторые из моих любимых веб-сайтов по электронной почте, которые помогут вам начать работу:

• BeRelevant! Блог
• Маркетинг по электронной почте Voodoo
• Блог электронной почты для розничной торговли

Вот лишь несколько первоклассных дизайнов электронных писем в формате HTML, выбранных из клиентской галереи Campaign Monitor и других источников. Используйте их, чтобы зажечь свои собственные идеи; но помните, что они принадлежат первоначальным дизайнерам и клиентам и поэтому не предназначены для копирования. Щелкните каждое изображение, чтобы просмотреть запись в галерее и полный адрес электронной почты. Обратите внимание, что некоторые из дизайнов, представленных ниже, были выбраны не авторами этой статьи, а коллективом редакции Smashing.

Выйдите и сделайте это

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

Либо мы примем меры и сделаем это, либо команда маркетологов, вооруженная компакт-диском с 10 000 клип-артов, сделает всю работу за нас… и все мы знаем, чем это заканчивается. Если у вас есть какие-либо вопросы или комментарии, оставьте комментарий ниже; Я обращусь ко всем, к кому смогу.

Дополнительная литература на SmashingMag:

• Дизайн рассылки по электронной почте: рекомендации и примеры
• Типографские шаблоны в дизайне рассылки по электронной почте в формате HTML
• Что 22 миллиарда рассылок говорят нам о дизайне для мобильной электронной почты

  Как создать информационный бюллетень в формате HTML с помощью Photoshop, InDesign, Illustrator и Adobe XD

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

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

  Содержание

  Что такое информационный бюллетень или кампания в формате HTML?

  В мире электронного маркетинга существует два типа электронной почты. Электронные письма с обычным текстом и электронные письма в формате HTML.

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

  Сочетание выдающихся изображений, яркого призыва к действию (CTA) и хорошо написанного текста — все это в совокупности привлекает внимание ваших подписчиков в папке «Входящие». Как в этом примере из Rooted NYC:

  Источник: Reallygoodemails

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

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

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

  Как разработать, закодировать и отправить информационный бюллетень в формате HTML

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

  1. Создайте свой электронный адрес . Решите, как это должно выглядеть в почтовых ящиках ваших подписчиков.
  2. Закодируйте свой дизайн в HTML . Поместите дизайн на язык программирования, который могут отображать почтовые клиенты.
  3. Отправить письмо . Убедитесь, что оно придет в почтовые ящики вашей аудитории.

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

  Или вы можете использовать один инструмент для всех трех шагов — программное обеспечение для электронного маркетинга. Мы рекомендуем вам выбрать один инструмент вместо трех отдельных для этого процесса (предпочтительно Sendinblue). 😉

  Вы сэкономите время и энергию.

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

  Приступая к разработке информационного бюллетеня в формате HTML

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

  Вы не можете просто экспортировать свой дизайн в виде электронного письма в формате HTML или автоматически кодировать файл .ai.

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

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

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

  1. Адаптивный дизайн электронной почты :
     Ваша электронная почта или информационный бюллетень должны быть удобочитаемыми на любом устройстве, которое используют ваши подписчики. Сообщается, что 66% всей электронной почты в США открываются на смартфонах. Это означает, что вам понадобится план дизайна для настольного и мобильного просмотра.
  2. Фиксированная ширина:
     Все бюллетени должны иметь фиксированную ширину, чтобы подписчикам не приходилось прокручивать страницу по горизонтали. Вы хотите, чтобы у них не было сложного опыта чтения любой ценой! 600 пикселей — это отраслевой стандарт ширины HTML-письма, потому что он подходит для большинства устройств. Вы можете дойти до 650 и при этом ваша электронная почта будет правильно отображаться.
  3. В верхней части страницы:
     Тема письма — это первый шанс привлечь внимание подписчика. Если вы пройдете этот тест и они откроют ваше письмо, у вас будет еще один шанс привлечь их внимание действительно хорошим заголовком. Это область, которую ваши контакты видят до того, как им придется прокручивать. Это называется пространством над складками. Включите самую важную информацию в самом начале.

  Как создавать информационные бюллетени в формате HTML с помощью Photoshop

  Открыть новый документ в Photoshop

  Начните с создания нового документа.

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

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

  С точки зрения разрешения, 72 DPI будет достаточно для информационного бюллетеня. Как и все изображения для Интернета, вы должны выбрать цвет RGB, а не CMYK, который лучше подходит для печати.

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

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

  Настройте информационный бюллетень с полем шириной 600 пикселей

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

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

  Однако все больше и больше брендов опускают ссылку на веб-версию или незаметно размещают ее внизу электронного письма.

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

  Непосредственно под ненавязчивой ссылкой на веб-версию (или, если вы пропустите ссылку, то первым элементом в рассылке), добавьте тизерную картинку. Вы можете настроить размер изображения в Photoshop, а также текст.

  Часто тизер включает ваш логотип и узнаваемое фирменное изображение. Вы также можете включить кнопку призыва к действию (CTA) в тизерное изображение. Эта область представляет собой то драгоценное пространство над сгибом. Как правило, длина должна составлять 200–250 пикселей, но лучший способ убедиться, что область над сгибом покрыта, — это проверить ее в программном обеспечении для электронного маркетинга.

  Завершенный информационный бюллетень, созданный в Photoshop

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

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

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

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

  Как создавать информационные бюллетени HTML с помощью InDesign

  Создайте документ шириной 600 пикселей в InDesign

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

  Макет вашей электронной почты будет иметь ту же структуру, что и при использовании Photoshop:

  1. Необязательная ссылка для просмотра в браузере
  2. Изображение заголовка в верхней части страницы
  3. Основная часть (основное содержимое)
  4. Нижний колонтитул

  Окончательный дизайн информационного бюллетеня в InDesign

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

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

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

  Нижний колонтитул — лучшее место для размещения ссылки для отписки и другой информации о компании.

  Как создавать информационные бюллетени в формате HTML с помощью Illustrators

  Illustrator — отличный инструмент для создания изображений.

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

  Создание фонов в Illustrator

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

  Как создать информационный бюллетень в формате HTML с помощью Adobe XD

  Одной из новейших дизайнерских программ, которая хорошо подходит для разработки шаблонов электронной почты, является Adobe XD.

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

  Adobe XD — это упрощенный инструмент для графического дизайна, простой в освоении, бесплатный и интуитивно понятный. Чтобы создать информационный бюллетень в Adobe XD, просто создайте файл и следуйте тем же инструкциям, что и в Photoshop.

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

  Функция повторяющейся сетки

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

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

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

  Завершенная кампания по электронной почте, разработанная в Adobe XD

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

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

  Хотите пропустить всю эту шумиху и просто использовать один инструмент для проектирования, (автоматического) кодирования и отправки информационных бюллетеней HTML и кампаний по электронной почте??
  Создайте бесплатную учетную запись в Sendinblue уже сегодня!
  Я хочу создать свой следующий информационный бюллетень с помощью Sendinblue!

  Советы по кодированию информационных бюллетеней HTML

  У вас есть дизайн? У вас есть все необходимые подписи? Большой! Теперь мы подошли к самой сложной части: как закодировать свой информационный бюллетень.

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

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

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

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

  1. Наймите программиста  с опытом написания HTML-кода электронной почты
  2. Выберите поставщика услуг электронной почты , например Sendinblue (о, эй, это мы!), и воссоздайте дизайн 1:1 в программном обеспечении для рассылки новостей. редактор кампаний с перетаскиванием.
  3. Роскошный вариант : выберите поставщика услуг электронной почты, который предлагает дополнительную услугу по программированию шаблона для вашего информационного бюллетеня или кампании по электронной почте. Вы отправляете им файлы дизайна, показывающие, как именно вы хотите, чтобы шаблон выглядел, и они выполняют кодирование в серверной части программного обеспечения. Затем все, что вам нужно сделать, это войти в программное обеспечение, вставить текст и изображения, которые вы хотите, в новый шаблон и нажать «Отправить».

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

  Почему программирование электронной почты в формате HTML невероятно отличается

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

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

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

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

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

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

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

  HTML-код для информационных бюллетеней и другой электронной почты: на что обращать внимание!

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

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

  • Начните со структуры . Ваш HTML-шаблон будет начинаться с типа документа, сообщающего почтовому клиенту, чего ожидать. Следуйте за этим с вашим заголовком. Здесь будут размещаться ваши медиа-запросы, стили и любые анимации. Все, что следует за заголовком, считается телом письма. Заключите это содержимое в теги body.
  • Забудьте об отдельных файлах CSS . Большинство почтовых клиентов их не поддерживают. Это означает, что вам нужно заставить HTML и CSS хорошо сочетаться друг с другом: использовать встроенные стили CSS. Они узнаваемы большинством почтовых клиентов, и их можно использовать для ключевых элементов дизайна новостной рассылки, таких как цвета фона и шрифты.
  • Обнять стол . Для макета бюллетеня используйте вложенные HTML-таблицы. Я знаю. Я знаю. Это похоже на 1999 год, но это то, с чем нам нужно работать. Теги таблицы позволяют обойти тот факт, что почтовые клиенты не поддерживают ни атрибут rowspan, ни атрибут colspan. Вы захотите использовать таблицы повсюду. Используйте заполнение ячеек для улучшения читаемости.
  • Помните альтернативный текст . Сохраняйте изображения отдельно и добавляйте теги альтернативного текста. Это улучшает доступность и упрощает работу для тех, кто читает ваш информационный бюллетень в тех почтовых клиентах, которые блокируют изображения.
  • Укажите конкретный шрифт! Обычные теги HTML, такие как h2 и h3, не будут правильно отображаться в почтовых клиентах. Вам необходимо указать размер и стиль шрифта непосредственно в HTML. Обратите внимание, однако, что не все шрифты будут отображаться правильно. Узнайте больше о лучшем шрифте для электронной почты.

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

  Отправка вашего информационного бюллетеня

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

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

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

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

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

  Самая быстрая альтернатива кодированию информационных бюллетеней

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

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

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

  Хотите попробовать это на нашей платформе? Все, что вам нужно сделать, это открыть бесплатную учетную запись Sendinblue:

  Я хочу создавать бесплатные информационные бюллетени с помощью Sendinblue >>

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

  Бесплатные шаблоны электронных писем в формате HTML

  Поделиться

  • Доля
  • Твитнуть
  • Поделиться
  • Приколи

  Дизайн электронной почты • Шаблоны Натали Берч • 04 января 2021 г. • 19 минут ПРОЧИТАТЬ

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

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

  Примечание : ознакомьтесь с лучшим конструктором шаблонов рассылок по электронной почте – Postcards. Попробуйте бесплатно!

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

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

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

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

  Информационная рассылка по электронной почте — сердце электронного маркетинга

  Открытки: конструктор рассылок по электронной почте от Designmodo

  Принципы отличного HTML-дизайна электронных рассылок

  Типы рассылок по электронной почте

  Структура

  Дизайн

  И последнее, но не менее важное: проводите A/B-тесты.

  Общие правила проведения успешных рассылок по электронной почте

  Где взять шаблон рассылки по электронной почте

  Примеры шаблонов электронных рассылок с высокой конверсией

  Скачать бесплатные шаблоны электронных рассылок

  Службы электронной почты как надежный источник шаблонов информационных бюллетеней

  Последний, но тем не менее важный

  Вывод

  Информационный бюллетень по электронной почте – сердце электронного маркетинга

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

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

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

  • отправки квитанции;
  • уведомить об организации доставки;
  • напомнить о брошенных товарах в корзине;
  • приветственное письмо новым пользователям;
  • отправить новый пароль и многое другое (транзакционные электронные письма).

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

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

  Открытки: Конструктор электронных рассылок от Designmodo

  Открытки

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

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

  Принципы дизайна отличного электронного бюллетеня в формате HTML

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

  Типы информационных бюллетеней по электронной почте

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

  Существуют различные типы информационных бюллетеней по электронной почте:

  • транзакционные электронные письма,
  • рекламных писем,
  Электронные письма электронной коммерции
  • ,
  • информационные письма и т. д.

  Однако это еще не все. Шаблоны email-рассылок можно разделить на другие группы, которые также диктуют правила оформления.

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

  Во-вторых, праздничные письма. Хэллоуин, День Благодарения, Рождество, Новый год, Черная пятница и Киберпонедельник, а также другие небольшие и местные праздники — это прекрасные возможности для продаж, которые должны нести атмосферу праздника.

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

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

  Структура

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

  • Верхняя планка. Как правило, рассылка начинается со сверхтонкой верхней панели со ссылкой на веб-версию. Это очень важно, поскольку, что бы ни случилось, пользователи должны иметь возможность просматривать вашу электронную рассылку в веб-браузере. Эта альтернативная версия может спасти день, когда почтовый клиент не сможет показать вашу электронную рассылку во всей красе.
  • Заголовок. Это еще одна важная часть электронной рассылки. Во-первых, на нем есть ваш логотип или любой другой элемент фирменного стиля, который мгновенно отличает вашу компанию от других. Во-вторых, он включает в себя шлюзы, которые помогают клиентам быстро добраться до места назначения.
  • Зона героя. Как и в сфере веб-дизайна, в шаблонах рассылок по электронной почте есть главная область, где выделена вся важная информация. Именно здесь вы показываете скидки, используете маркетинговые трюки и привлекаете внимание броскими лозунгами.
  • Основной корпус. Это самая важная часть конструкции. В зависимости от цели вашей рассылки в ней могут быть разные модули: отзывы, галерея, видео и т. д.
  • Он может быть большим и маленьким. Опять же, все зависит от миссии электронной рассылки. Однако есть одно правило. Нижний колонтитул должен содержать полную контактную информацию, включая физический адрес, ссылку для отказа от подписки и ссылки на Политику конфиденциальности и Условия использования.

  Бизнес-мышление для дизайнеров от inVision

  Дизайн

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

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

  • Используйте структуру с одним столбцом. По статистике мобильные пользователи составляют преобладающую аудиторию. Поэтому ваш шаблон электронной почты должен отлично смотреться на маленьких экранах. А мобильные дизайны не подразумевают многоколоночные макеты. Играйте осторожно — используйте каркас из одной колонны.
  • Ширина информационного бюллетеня должна быть в пределах 550-600 пикселей. Однако, если вы хотите создать полностью адаптивный дизайн электронной почты для всех типов устройств — огромных мониторов, планшетов и мобильных телефонов — тогда ваш макет должен быть гибким. Установите диапазон точек останова — используйте медиа-запросы — чтобы изменить ширину в соответствии с размером экрана.
  • Поместите всю важную информацию в верхнюю часть шаблона информационного бюллетеня. Причина проста. Панель предварительного просмотра имеет высоту примерно 300 пикселей; поэтому верхняя часть шаблона электронной почты является наиболее просматриваемой.
  • Используйте цвета и типографику, создающие четкий контраст и оптимальную читабельность. Используйте большой размер шрифта и семейства шрифтов с отличительными формами букв, чтобы символы были читаемы на маленьких экранах. Играйте с пробелами, чтобы создать комфортную среду.
  • Формат должен быть простым и легко читаемым. Используйте заголовки, чтобы установить фокус в потоке чтения.
  • Не ставьте все на картинки. Некоторые программы чтения электронной почты не отображают их. Кроме того, пользователи могут отключать визуальные эффекты. Поэтому ваше сообщение должно быть очевидным без графики.
  • Будьте осторожны с адаптивным дизайном. Реагировать — правильный шаг. Однако есть одна загвоздка. Вы должны иметь в виду, что не все программы для чтения электронной почты поддерживают медиа-запросы. Например, Outlook может удалить их. Поэтому играйте осторожно.
  • Использовать таблицы. Как ни крути, но в 2020 вы по-прежнему обязаны пользоваться таблицами, так как даже последние версии почтовых ридеров не поддерживают флексбоксы, сетки и другие среды для безболезненного создания макетов.
  • Не используйте элементы DIV, позиционирование, макеты CSS, элементы JavaScript, видео и аудио, поскольку программы чтения электронной почты их не поддерживают.
  • Использовать встроенные стили.

  И последнее, но не менее важное: проводите A/B-тестирование

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

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

  Еще одно. Наряду с A/B-тестами проанализируйте рейтинг кликов, поскольку он дает вам представление о том, какие предложения, кнопки и стилистические решения работают лучше всего.

  Электронная почта от Остина Истсидерса

  Общие правила проведения успешных кампаний по электронной рассылке новостей

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

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

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

  И последнее, но не менее важное: сегментация. Разделение людей на группы — обычное дело. Тем не менее, он становится все более эффективным, когда дело доходит до создания дизайна шаблона новостной рассылки с высокой конверсией. Дело в том, что вы можете объединять контакты в группы в соответствии с такими критериями, как программы для чтения электронной почты или устройства, которые они используют. Это поможет создать дизайн, который не подведет.

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

  Оставайтесь в своей пижаме от Just Eat

  Где получить шаблон информационного бюллетеня по электронной почте

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

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

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

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

  С помощью Postcards очень легко создать шаблон электронного бюллетеня с высокой конверсией. Это не отнимет у вас много времени и сил. Дело в том, что есть удобный интерфейс, где вы можете быстро создавать дизайн, редактировать текст и добавлять мультимедийные и интерактивные функции. Вы можете экспортировать результат в виде zip-пакета, чтобы использовать сгенерированный код в Gmail, Outlook или других популярных клиентах, или напрямую импортировать его в MailChimp, HubSpot или любую альтернативу HubSpot

  Открытки

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

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

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

  Шаблоны от SendwithUs

  Примеры шаблонов рассылок по электронной почте с высокой конверсией

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

  Рассылка по электронной почте на Хэллоуин от Litmus

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

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

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

  Флэш-распродажа

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

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

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

  Распродажа в Черную пятницу от Postable

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

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

  Это симбиоз принципов хорошей электронной рассылки.

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

  Скачать бесплатные шаблоны электронных рассылок

  Скачать HTML-шаблон бесплатного информационного бюллетеня электронной коммерции

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

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

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

  Загрузить бесплатный HTML-шаблон электронного бюллетеня «Черная пятница»

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

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

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

  Красивый и отзывчивый HTML-шаблон электронной почты

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

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

  Адаптивный шаблон электронной почты для мобильных устройств

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

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

  Шаблон электронного письма ко Дню святого Валентина

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

  Он имеет относительно большую структуру: классическая область героев, где фоновое изображение создает всем веселое настроение, раздел блога, раздел товаров, блок призыва к действию и, конечно же, футер. Вы можете использовать его как информативное электронное письмо, чтобы уведомлять о новых продуктах, или как рекламное, чтобы привлечь внимание к предложениям. Он полностью совместим с такими маркетинговыми платформами, как MailChimp, Campaign Monitor и Stamp Ready.

  Доступная электронная почта Джейсона Родригеса

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

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

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

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

  Ответное электронное письмо

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

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

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

  Бесплатный HTML-шаблон электронной почты от Пола Годдарда

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

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

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

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

  Отзывчивые, бесплатные HTML-шаблоны электронной почты от EmailOctopus

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

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

  Взгляните на шаблон электронной рассылки Виктора, электронное письмо ко Дню святого Валентина и шаблоны от Mjml в качестве примеров.

  Victor’s

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

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

  День святого Валентина

  Так же, как бесплатные шаблоны от PSD2HTML, шаблоны от Mjml основаны на HTML. Они адаптивны, поэтому вы можете быстро настроить их, вставив содержимое, изменив цвета или, при необходимости, изменив дизайн.

  Еще одна вещь, которая объединяет эти шаблоны, это то, что они не похожи на обычные электронные рассылки; они выглядят как микро-веб-сайты или цифровые листовки с кнопками для нажатия. Давайте сравним их с действительно простыми адаптивными шаблонами электронной почты, доступными электронными письмами и простыми адаптивными электронными письмами. Бесплатные предложения от Lee Munroe, Jason Rodriguez и Derek Punsalan — идеальное решение для любителей простоты. Они доносят необходимую информацию ненавязчиво и приятно смотрятся на настольных мониторах и мобильных устройствах. Но что касается дизайна, то они безвкусны и примитивны. Предыдущее трио, безусловно, выглядит привлекательнее.

  Очень просто

  Доступные электронные письма

  Шаблоны электронных рассылок бывают разных форм, включая PSD/Sketch/AI и HTML/CSS. В зависимости от ситуации вы можете найти каждый из них полезным.

  PSD-шаблоны, такие как Шаблон электронной почты от inox studio или PSD-шаблон электронной почты для бизнес-маркетинга, отлично подходят для тех, кто имеет базовые знания электронной почты в формате HTML и CSS и хочет, чтобы все выглядело так, как им нравится. Более того, его гораздо проще адаптировать к вашим потребностям на этом раннем этапе. Рассмотрите, PSD шаблон электронных информационных бюллетеней о еде и ресторанах. Изначально он был создан для удовлетворения потребностей владельцев ресторанов; однако с помощью некоторых умных настроек его можно превратить в информационный бюллетень по электронной почте для свадебных агентств или блогов.

  inox studio

  Бизнес-маркетинг

  Еда и рестораны Электронные информационные бюллетени PSD-шаблон

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

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

  • Классические шаблоны на основе HTML, такие как HTML-шаблон электронной почты Пола Годдарда, шаблон, соответствующий спецификациям Google Material Design.
  Платформы электронной почты
  • , такие как Bojler или Cerberus, которые предлагают все необходимые инструменты (служебные классы, компоненты и объекты) для создания полностью адаптивных информационных бюллетеней.
  • Онлайн-сервисы, такие как BeeFree, с множеством профессиональных шаблонов.

  Пол Годдард

  Бойлер

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

  Платформы электронной почты и генераторы, такие как Contactually, являются идеальными партнерами для тех, кто предпочитает смешанный дизайн. С готовыми решениями может быть сложно настроить макет, но с шаблоном это легко. Обратите внимание на открытки от Designmodo, Foundation 2, Topol.io и Frame.

  Контактно

  Среди этих четырех особенно выделяются Foundation и Postcards.

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

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

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

  Postcards Email Builder

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

  Службы электронной почты как действительный источник шаблонов информационных бюллетеней

  Популярные инструменты для управления и проведения кампаний по электронной почте, такие как SendwithUs или eMail Monster, также служат действительным источником бесплатных шаблонов информационных бюллетеней по электронной почте. В SendWithUs есть дюжина чистых и стильных шаблонов, а в eMail Monster есть еще более впечатляющий выбор бесплатных материалов.

  SendwithUs

  eMail Monster

  И последнее, но не менее важное

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

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

  Заключение

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

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

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

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

  8 фрагментов кода HTML для создания адаптивных шаблонов информационных бюллетеней

  Эрик Карковак
  on 8 июня 2022 г. CSS

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

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

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

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

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

  Информационный бюллетень Designer’s Toolbox

  Неограниченное количество загрузок: более 1 000 000 шаблонов информационных бюллетеней, веб-шаблонов, тем и многого другого!

  Шаблоны информационных бюллетеней HTML

  Более 300 шаблонов

  Графические шаблоны электронной почты

  2300+ Графика

  Веб-шаблоны HTML

  Более 3800 шаблонов

  Просмотреть все шаблоны информационных бюллетеней

  Шаблон электронной почты Practice

  от Regina Catipon

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

  См. Практикум по использованию шаблонов электронной почты Pen от Regina Catipon

  Простой шаблон электронного письма о брошенной корзине

  от Maizzle

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

  См. Шаблон электронной почты Pen Simple Abandoned Cart от Maizzle

  UI Guild / Шаблон электронной почты

  от Edmundo Santos

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

  См. Pen UI Guild / Шаблон электронной почты от Эдмундо Сантоса

  Шаблон электронной почты для счета

  от chetan

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

  См. шаблон электронной почты Pen Invoice от chetan

  VOH Facebook Live

  от Alisa Longoria

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

  See the Pen VOH Facebook Live by Алиса Лонгория

  HTML-шаблон электронной почты – Блог

  Джош Берд

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

  См. Шаблон электронной почты Pen HTML — блог Джоша Берда

  Шаблон информационного бюллетеня BMIC

  Тома Маркарта

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

  См. Шаблон информационного бюллетеня Pen BMIC от Тома Маркарта

  Шаблон приветственного письма

  от Джуда Фрэнсиса

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

  См. шаблон приветственного электронного письма Pen от Джуда Фрэнсиса

  Шаблоны электронных писем на любой вкус

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

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

  Как закодировать информационный бюллетень по электронной почте за 6 простых шагов

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

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

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

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

   Начнем!

  1. Соберите изображения вместе

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

  2. Создайте новый файл HTML

  ПРИМЕЧАНИЕ. Если вы просто хотите использовать полный код конечного результата в качестве начального шаблона, прокрутите этот пост до конца, скопируйте и вставьте его.

  Если вы новичок в этом (и даже если вы не новичок), вы можете использовать программу веб-дизайна, такую ​​​​как Adobe Dreamweaver, для создания вашего HTML-файла. Скопируйте и вставьте следующий код в документ после тега open body.

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

   
  
  <голова>
  
  
  
  
  <тело>
  
   

  Теперь вставьте следующий код после тега.

  Совет . В этом руководстве вы заметите, что CSS не используется (никаких DIV или CSS-позиционирования). CSS не работает в большинстве браузерных почтовых сервисов, таких как Gmail или Yahoo!Mail. Встроенный CSS в качестве тегов шрифта — ваш самый безопасный вариант.

  3. Создайте заголовок

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

  Просмотрите его в браузере.

  1. Сначала мы воспользуемся элементами TR и TD, чтобы создать новую ячейку и придать ей стиль, добавив высоту 50 пикселей и фон #fffff (белый). Эта первая ячейка будет содержать ссылку, чтобы пользователи могли просматривать электронную почту в своем веб-браузере.
  2. Не забудьте заключить ссылки в теги span. Установите семейство шрифтов на arial, sans-serif; и цвет к черному.
  3. Вы всегда должны присваивать своим изображениям атрибуты alt ; это абсолютно необходимо в электронных письмах в формате HTML. По умолчанию многие почтовые клиенты не отображают изображения при первом открытии электронной почты. Вместо этого они просят пользователей активно выбирать отображение изображений.

  4. Создать основное содержимое

  Создайте новую таблицу, используя ту же структуру таблицы, что и предыдущая. На этот раз мы добавим два дополнительных TR, чтобы учесть изображения и описание для каждой записи. Если возможно, вставьте ваши изображения в вашу электронную почту. Электронное письмо не должно будет обращаться к внешнему веб-серверу для их загрузки, и они не будут отображаться в виде вложений в электронное письмо. Я также добавляю отступ ячейки «25», чтобы дать содержимому некоторую передышку.

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

  30 вдохновляющих фотографов домашних животных:

  jpg" border="0" alt="Фотографы домашних животных" align= "center" />

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

  Подсказка : я здесь не ради этого урока, но использую абсолютные URL-адреса для вашей графики (например, http://www. crazyegg.com/images/image.gif)

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

  Вот как выглядит одна из записей:

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

    link 

  5. Включите значки социальных сетей и обмена

  Далее мы добавим эти две графики, создав два столбца (td) в одной таблице.

   
   6.
   Добавление контактной информации и возможность отказа от подписки
   Наконец, мы позволим подписчикам легко входить в контакт, предоставляя контактную информацию. Вы всегда захотите дать своим подписчикам возможность отказаться от подписки на ваши электронные письма. Для этого просто используйте структуру таблицы, аналогичную той, что мы использовали в письме. Вот как выглядит код:
    
   
  .
  
  <тд выравнивание = "центр">
  Если вы больше не хотите получать наши электронные письма, отмените подписку здесь.
   Вот как выглядит нижняя часть письма:
   Вот оно! Ваша электронная рассылка завершена.
   Хотите сразу весь код? 
   Если вам нужна полная версия HTML от начала до конца, вы можете начать с приведенного ниже кода.
    <голова>  <тело>  <тело>
   <тело> <таблица ячеекспейсинг="0" ячейкападдинг="0"> <тело>  <таблица ячеекспейсинг="0" ячейкападдинг="25">
   
   
  
   
   
   
  
  <диапазон>
  
  Связаться с нами?
  
  Посетите нас в Интернете по адресу petanthology.com
    
    
  Не удается просмотреть это письмо? Просмотрите в браузере.
  30 вдохновляющих фотографов домашних животных:
    jpg" border="0" alt="Фотографы домашних животных" align="center" />
  В наши дни домашние животные все чаще считаются членами семьи. Поскольку люди рожают детей в более позднем возрасте, акцент на карьере выводит на сцену домашних животных. Этих питомцев часто лелеют так же, как детей, и их качество жизни является главным приоритетом в умах их владельцев. Это внимание к благополучию животных, наряду с культурой дизайна, в которой мы живем, повлияло на фотографию домашних животных, а также на индустрию домашних животных в целом. Эта витрина показывает, как хороший дизайн и эстетика могут изменить наше восприятие фотографии домашних животных. Наслаждайтесь!
  Просмотреть сообщение в блоге ->
   
  Добавить комментарий Отменить ответ
  Ваш адрес email не будет опубликован. Обязательные поля помечены *
  Комментарий *
  Имя * 
  Email * 
  Сайт 
    
   Поиск:    
  Рубрики
  Seo
  Wordpress
  Дизайн
  Заработок
  Плагин
  Разное
  Рекомендац
  Сайт
  Совет
  Советы
  Тем
  Темы
  Урок
  Уроки