Написание электронных HTML писем. Документ без названия. Разработка HTML письма – один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS. Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет. Для их создания необходимы навыки в вёрстке и определенный запас терпения. ![]() Основы HTML для электронной почты. Главной проблемой при вёрстке email-писем является тот Каждая из существующих программ для работы с почтой может отобразить одно и то же письмо совершенно по-разному. Адаптивная верстка писем в email-маркетинге. Большинство электронных писем на мобильных устройствах отображаются некорректно. Этот курс адресован HTML-верстальщикам, разработчикам и email-маркетологам с базовыми знаниями HTML и CSS. Написание HTML писем - одна из самых трудоемких задач для фрилансера. К счастью, один из моих первых клиентов, для которого я. Основные правила верстки писем. Рассылки в формате HTML, должны быть сверстаны с соблюдением стандартов и особенностей обработки HTML различными почтовыми программами. Загрузка готового HTML-макета письма на сервис. О том, как сделать html письмо будет интересно узнать и тем рекламодателям, которые пользуются услугами дизайнера. Контакты. Отзывы. Партнерская программа. Дизайнерские программы для работы с HTML, такие как FrontPage. Пример кросспочтовой вёрстки html письма http:// Сергей. Здравствуйте. После покупки программы рассылки писем надо.
В этой статье приведены некоторые методы и приемы, благодаря которым можно добиться хороших результатов. Почтовые клиенты. При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб- интерфейс - Yahoo!, Hotmail, Google Mail и др. Из- за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. Дизайн. Разрабатывая дизайн электронного HTML письма, не забывайте о простоте. Не слишком фантазируйте с дизайном писем. Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него. Старайтесь уместить HTML письмо в ширину около 5. E- mail у почтовиков меньше ширины окна, причем иногда сильно меньше. Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 1. Создавайте письма вручную. Дизайнерские программы для работы с HTML, такие как Front. Page, Dream. Weaver, Home. Site и различные редакторы полны недостатков. ![]() Практически все из них вставляют лишний html код, который далее может по- разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML. ![]() Онлайн конструктор html писем. Создавайте элегантные письма с помощью нашего визуального редактора. Ваша email-рассылка будет гарантировано корректно отображаться в любом почтовом сервисе или программе.. Таблицы. Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб- страниц, но эти принципы плохо работают в почтовых клиентах. Используйте Cellpadding, cellspacing, colspan - все эти сложные вещи, о которых вы уже, наверное, забыли. Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 9. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 9. И конечно же для таблиц в середине выставляйте значение ширины равное 1. Об изображениях. Все изображения, присутствующие в письме, следует разместить на некотором хостинге и в коде добавить на них внешние ссылки. Также неплохо бы добавить ссылку на просмотр HTML письма непосредственно на вашем сайте в виде страницы, чтобы пользователь с любым почтовым ящиком при желании смог увидеть свёрстанные вами красоты. Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб- страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона. Оформление текста. Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб- страницы. Не используйте сокращений (типа «font: »), так как результаты будут неоднозначными. Cтили CSSК HTML письмам не стоит прикреплять внешний CSS файл — он просто не будет прочтен. Весь CSS код должен быть включен в сам E- mail. Хотя в идеале лучше вообще обойтись без каскадных таблиц стилей, так как, опять же, разные почтовики имеют разный уровень их поддержки. Если используете CSS: Не используется CSS- сокращения: вместо того, что бы использовать правило font: 1. Arial, Helvetica, вы должны использовать сочетание правил: font- family, font- size, и line- height. CSS- стили — базовые. Такой же прием нужно использовать и в тегах таблиц, ячеек, параграфов, ссылок и др. Прописывайте основную информацию о стилях шрифта в теге ячейки < td> ближе к контенту. Это может привести к повторению стилей в других тегах < td>. Прописывайте стили в тегах заголовков (h. В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания. Еще несколько советов: 1. Избегайте использования Java. Script. В большинстве случаев они будут отключены почтовыми клиентами. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц. Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2. Используйте атрибут target=»_blank» для ссылок, чтобы читатели, которые используют веб- интерфейс, не загружали страницу в том же окне, в которм открыта почта. Попробуйте не использовать одно- пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо — спам. Тестирование. Вы должны протестировать свою работу хотя бы на этих почтовых сервисах: Outlook 2. Hotmail. Yahoo! Mail. Gmail. Apple Mail. Thunderbird. Тестирование с помощью Mailchimp. Использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 5. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования: Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol» campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название. На странице design выберите Import - > Paste in code, а затем отметьте пункт Automatic CSS Inliner. Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль. Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку. В заключении. Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты: 1. Правильно ли отображается отправитель письма – имя или почтовый адрес? Корректна ли тема письма? Корректна ли контактная информация, и можно ли ее увидеть сразу? Есть ли текст, вверху письма, «Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.»? Есть ли у вас ссылка для добавления вашего адреса в контакты? Присутствуют ли в вашем письме ссылки на веб- версию письма? Добавьте возможность управления подпиской в письмо. Очень важно знать, что может пойти не так или какие проблемы могут возникнуть при отображении, попробовать их устранить до того, как письмо будет разослано подписчикам.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2016
Categories |