9 хитростей для создания идеального HTML-бюллетеня

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

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

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

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

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

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

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

1. Используйте таблицы в ваших макетах

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

Вы также можете спросить, почему ДИВ и другие блочные элементы не очень хорошая идея. Большинство почтовых клиентов построен, чтобы убрать любой посторонний CSS содержание. Это означает, что вы не сможете использовать много всего, кроме встроенный CSS (и даже полная поддержка дрянная). Такие клиенты, как Microsoft Outlook 2007 и Google Gmail, очень плохо поддерживают плавающие элементы и прямое позиционирование..

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

2. Позиционирование с фиксированной шириной

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

Тем не менее, для многих этот метод слишком слаб. Конструктивные бюллетени в большинстве случаев потребуется фиксированная ширина, особенно если вы будете использовать баннеры и изображения определенного размера. Я рекомендую работать с Максимальная ширина документа от 500 до 600 пикселей. Горизонтальный размер экрана iPhone и некоторых моделей BlackBerry ограничен 320px, поэтому даже при 500px ваш шаблон электронной почты будет уменьшено, чтобы соответствовать должным образом.

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

3. Пиксельные единицы

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

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

4. Возможности с CSS

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

Будьте осторожны с вашими стилями шрифтов, чтобы не раздвинуть границы слишком далеко. Если вам неудобно работать со встроенными стилями, всегда можно использовать тег шрифта HTML, даже если он устарел. Если вы дизайнер CSS, вам не нужно выходить из системы, но любое сокращенное кодирование CSS может привести к ошибочным проектам. В качестве примера шрифт: 12px / 14px Arial, без засечек; Сокращения могут помочь сэкономить много места, но они не полностью приняты для дизайна электронной почты, даже если они используются со встроенными стилями.

Даже ваш выбор цвета должен быть выписан от руки. Шестнадцатеричные цвета, такие как #ccc или же # E3F должен быть написан полностью как #cccccc или же # ee33ff, соответственно. Если вы можете создать то, что вам нужно, без CSS, я бы порекомендовал этот путь, но не полностью избегайте CSS в дизайне электронной почты, потому что вопреки распространенному мнению, он поддерживается в большинстве случаев.

5. Якорь Ссылки Лучшие практики

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

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

некоторый текст ссылки

Эффекты при наведении не поддерживается в Outlook 2007/2010, Gmail, iOS или Android. Вы все еще можете включить а: зависать стиль для всех поддерживающих клиентов: Outlook 2000/2003, Hotmail, Apple Mail и Yahoo! почты, но лично я не вижу особой пользы в частичном взаимодействии с пользователем, так как селекторы якорей не сильно поддерживаются, я рекомендую просто предлагая 2-3 цвета ссылок использовать на протяжении всего вашего дизайна.

Предполагается, что пользователи также будут ожидать, что ваши ссылки откроются в новой вкладке или окне. В идеале TARGET = «_blank» Атрибут должен быть достаточным для всех браузеров, чтобы распознать эту функциональность, и включение этого атрибута в ваши якорные ссылки не должно негативно влиять на почтовое программное обеспечение, такое как Lotus Notes или Outlook, либо.

6. Тест на всех основных клиентов

Недавнее исследование самых популярных почтовых клиентов (проведенное Campaign Monitor) показывает десять самых популярных почтовых клиентов за последний год. Это может показаться немного утомительным, но дизайнеры должен привыкнуть проверять свои новостные рассылки на всех основных почтовых клиентах, по крайней мере, на некоторых из наиболее распространенных клиентов, таких как Gmail, Hotmail или Yahoo! почта.

Это относится не только к веб-почте, но и к программному обеспечению на Mac OS X и Windows. Также согласно их диаграмме iOS Mail а также Android оба попали в топ-10 за последние несколько лет. На самом деле iPhone, iPod Touch и iPad Mail занимают второе место по популярности среди Outlook! К сожалению, нет способа проверить это без владения одним из устройств - поэтому вам придется согласиться с другими вариантами.

Одна ошибка с поддержкой мобильных устройств присутствует во многих моделях iPhone и Android. Рендеринг мобильной электронной почты будет часто изменить размер текста внутри вашего шаблона. Это может не сильно повлиять на ваш дизайн, но это может раздражать некоторых читателей. Использование CSS -webkit-text-size-Adjust: нет;, будут обеспечить равномерный размер текста по умолчанию во всех механизмах синтаксического анализа без необходимости проверять это.

Если вы знаете каких-либо друзей или коллег, которые используют альтернативное программное обеспечение, вы можете попросить их помощи в тестировании рассылки. Вы также можете отправить им копию электронного письма проверить на своем устройстве или одолжить устройство активно убирать ошибки кодирования. К счастью, Outlook предлагает версию для установки на Mac, поэтому вам не нужно отслеживать пользователя Windows для этих оптимизаций, но когда дело доходит до Lotus Notes или Windows Mail, вам может не повезти.

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

7. Всегда предлагайте веб-представления

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

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

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

8. Добавление графического содержимого

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

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

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

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

9. Избегайте спам-папок!

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

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

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

Галерея дизайна рассылки

Насколько интересной будет статья в новостной рассылке без фантастических примеров? В Google можно найти множество дизайнов и шаблонов рассылок по электронной почте. HTML E-mail Gallery - очень популярный источник вдохновения.

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

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

Оповещение для бизнеса