Создание рамок для электронного письма

Содержание

Забудьте о письме без картинок с функцией «Встроенные изображения»

Создание рамок для электронного письма

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

Есть ли способ красиво сделать рассылку и избежать ситуации, когда картинки не отображаются? Есть. Тут в дело вступает Mailigen с функцией «Встроенное изображение»!

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

Подписчики хотят за пару секунд понимать, о чём идет речь в рассылке. Тут-то и спасают изображения. Согласно исследованиям, мы — чистой воды визуалы, так как от 80 до 90% всей информации наш мозг получает через глаза. При этом скорость обработки информации может достигать 36 000 картинок в минуту. Впечатляет, правда?

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

Итак, визуальные материалы — это важнейший этап создания email-рассылки. По данным Trapit, почти 4/5 (82%) всех email-маркетологов считают красивые письма для рассылки с фото- и видеоконтентом важными для принятия решения о покупке. Значит, картинки играют значительную роль в успехе вашей рассылки. Но, увы, 60% почтовых клиентов по умолчанию блокируют изображения. Почему?

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

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

Всего один клик для отображения картинок — это много или мало?

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

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

Как сделать красивое письмо для рассылки? Встроенные изображения спешат на помощь!

Функция «Встроенные изображения» гарантирует, что все картинки в письме загрузятся автоматически, без дополнительных кликов. Для любителей делать красивые письма рассылки от Mailigen – просто находка!

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

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

Преимущества использования функции «Встроенных изображений»

В чём ваша выгода от «Встроенных изображений»? Давайте выясним!

Больше внимания аудитории

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

Больше кликов по ссылкам

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

Ваш бренд более узнаваем

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

Больше разнообразия в дизайне письма

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

Экономия времени

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

Больше шансов «достучаться» до подписчика

Лучше один раз увидеть, чем сто раз услышать. Используйте картинки, чтобы сделать идею письма более доступной и понятной для подписчиков. Избегайте долгих объяснений — вместо этого добавьте картинку, которая объяснит всё сама!

Больше шрифтов

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

Больше картинок

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

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

Рассылка «весит» больше

Если вы встраиваете графику в HTML-код, то письмо становится более «тяжёлым», так как на каждую картинку требуется много кода. Чтобы не превысить рекомендованный размер email’а, обращайте внимание на информацию о «весе» рассылки, которая доступна на последнем этапе создания писем в Mailigen.

Вас может смутить снижение показателей открываемости рассылок

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

Выше спам-рейтинг

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

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

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

Некоторые почтовые сервисы не отображают даже «Встроенные изображения»

Будьте осторожны с теми подписчиками, которые пользуются Outlook 2007+, Hotmail и Yahoo! Эти почтовые сервисы до сих пор не используют распознавание встроенных изображений, и картинки не будут отображаться.

И все же мы говорим вам: «дерзайте!»

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

  • Размер картинки: используйте изображения большого размера для сайтов и лендингов, а в письмах отправляйте небольшие картинки. Это ускорит загрузку письма и позволит обойти спам-фильтры.
  • Используйте соотношение текста и картинок 50/50 или даже 60/40, чтобы письмо не улетело в папку Спам, и чтобы его содержимое не было однообразным.
  • Добавляйте альтернативный текст к картинкам — он будет отображаться при блокировке. Так вы будете уверены, что идея письма дойдет до аудитории.

Чтобы начать использовать «Встроенные изображения» от Mailigen, вам нужно сделать всего один клик. На первом этапе создания рассылки в Mailigen поставьте галочку «Отправлять рассылку со встроенными изображениями». Готово! Ничего сложного, правда?

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

Источник: https://www.mailigen.ru/blog/zabudte-o-pisme-bez-kartinok-s-funkciej-vstroennye-izobrazheniya/

Как создать макет письма без дизайнера

Создание рамок для электронного письма

Советы Все, что вам надо знать о дизайне писем

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

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

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

  1. чтобы письмо хорошо выглядело на всех устройствах и все функции работали;
  2. чтобы верстальщик не отказался его верстать;
  3. чтобы составить ТЗ дизайнеру (если он есть) и проконтролировать результат.

Для удобства мы разделили статью на 2 части: базовые понятия и сборка письма. Начнем с базы.

Размер письма

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

Если делаете макет в Photoshop, то можно сразу создать документ с шириной 600 px.

Задаем размеры документа в Photoshop

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

Структура классического письма

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

Модули

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

Покажем на примере.

Модульная структура письма

Модули располагают в одну или несколько колонок. В теле письма количество колонок может меняться: одна колонка может смениться двумя-тремя. Чтобы письмо было проще адаптировать под мобильные устройства, обычно используют 1–2 колонки.

Шрифты

В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.

Безопасные шрифты

Если текст слишком мелкий, пользователи будут увеличивать письмо. Например, в устройствах под iOS 6–7 минимальный размер шрифта 13 px. Если в рассылке есть текст меньше, то система его автоматически увеличит до этого размера.

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

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

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

Расстояние между объектами

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

Междустрочные интервалы заголовка и текста практически совпадают. Они слипаются. Пропадает ощущение контраста

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

Теперь заголовок и текст контрастируют

Расстояние между буквами определяет шрифт, расстояние между строками — интерлиньяж, а расстояние между блоками — отступы.

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

Чтобы создать контрастность и повысить выразительность отдельных объектов, внешнее всегда должно быть больше внутреннего.

Совет Артема Горбунова о внутреннем и внешнем

Артемий Лебедев. Теория близости

Фирменный дизайн

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

Пример LinguaLeo. Вот рассылка:

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

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

Запрещенные элементы

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

  • JavaScript;
  • flash-анимацию;
  • CSS-анимацию;
  • видео;
  • формы;
  • эффекты наведения — изменение свойств объекта при наведении мыши (псевдокласс :hover);
  • эффекты параллакса.

Вставлять эти функции и объекты в макет письма не надо — они не отобразятся у пользователей.

Мы познакомились с основными понятиями в дизайне email. Пришло время собрать макет.

Часть 2. Собираем письмо

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

Решаем, что будет внутри письма

Это дайджест, полноценная статья или каталог? Каждый формат предполагает свой дизайн.

Дайджест Нетологии. Цель — рассказать, что произошло на сайте и в блоге за неделю:

Письмо-статья от Мегаплана. Основной упор на текст и авторские иллюстрации.

Письмо-каталог от PitchShop. Упор на визуальную составляющую — покупатель видит товар, кликает на него и покупает.

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

Рисуем прототип

Прототип нужен, чтобы продумать количество колонок, взаимоотношения между блоками и получить общее представление о макете. Такие «черновики» часто используют, чтобы показать клиенту концепцию страницы. Сделать прототип можно в Photoshop, Balsamiq или Axure. А можно нарисовать от руки.

Прототип письма для GuitarPlay.com на бумаге и в Photoshop

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

Прехедер и шапка письма

В названии использован декоративный шрифт. Его можно объединить вместе с логотипом в единое изображение.

Перехожу к телу письма. Для текста я выбрал безопасный шрифт Sans Serif. Модуль под абзацем «Как взять баррэ?» — это картинка с наложенным сверху значком . Сюда нужно вшить ссылку на видео.

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

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

Расстояние до изображения и текста практически одинаковое

Подвинем название ближе к тексту.

Теперь понятно, к чему относится название

Проделал тоже самое с остальными интервалами:

Заголовки теперь дружат с текстом

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

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

Запомнить

  1. Максимальная ширина письма — 600 px. На длину ограничений нет.
  2. Письмо состоит из прехедера, шапки, тела и подвала. В них находятся модули, которые не пересекаются и не накладываются друг на друга.
  3. Для основного текста рассылки нужно выбирать «безопасный» шрифт.

    Декоративные шрифты переводим в изображения и потом добавляем в письмо.

  4. Буквы, строки и отдельные модули не должны слипаться между собой. Чтобы такого не случалось, пользуемся правилом внутреннего и внешнего.
  5. У большинства рассылок есть фирменный дизайн.

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

  6. Почтовые приложения не отобразят Flash-объекты и видео. Прежде чем вставить что-то новое, убедитесь, что почта это поддерживает.

  7. При создании макета можно опираться на алгоритм: определить цель письма → нарисовать прототип → создать окончательный макет → проверить по чек-листу.

“>

Источник: https://www.unisender.com/ru/blog/sovety/kak-sozdat-maket-pisma-bez-dizaynera

Как сделать письмо для E-mail рассылки на онлайн-конструкторе Wilda

Создание рамок для электронного письма

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

  1. Создав html версию письма
  2. Отправив цельное изображение в теле письма.

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

Что такое Html письмо?

Html письмо – это письмо, созданное на языке Html (также, как и сайты в интернете). Если у вас нет достаточных навыков, то самостоятельно создать такое письмо у вас не получится.

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

После создания html письма вам понадобится специальное программное обеспечение для рассылки его адресатам.

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

Минусом этого подхода может стать некорректное отображение вашего письма у некоторых получателей, так как при создании письма может генериться лишний код, либо шаблоны недостаточно хорошо адаптированы под различные почтовые клиенты – программы, собирающие и отправляющие почту, такие как Mail, Yandex, Gmail, Rambler, Outlook,Thunderbird или The Bat.

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

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

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

Чем Wilda может вам помочь?

На конструкторе Wilda вы можете:

Создать рассылку в виде изображения и вставить в тело письма

Для этого при создании нового документа выберите тип «E-mail рассылка» или воспользуйтесь подходящим шаблоном. Ширина документа будет 700 px – рекомендуемое значение для успешного отображения письма на мобильных устройствах, а высоту вы можете регулировать в зависимости от контента. После окончания редактирования просто сохраните ваше письмо в виде Jpeg файла.

Изображение, созданное на онлайн-конструкторе Wilda.

Процесс создания E-mail письма со вставкой изображения.

Такой способ создания писем будет удобен, если:

  • вам необходимо отправлять небольшие информационные письма высотой в один экран: открытки и поздравления, информацию о смене адреса, офиса, баннер о старте продаж продукта или услуги и т.д.
  • у вас одна ссылка в письме. В любом почтовом клиенте можно прикрепить одну ссылку к вашему изображению. Однако, в случае необходимости вы всегда сможете добавить к изображению любой текст, в котором также могут быть ссылки!
  • у вас небольшое количество адресатов. Например, у Вас база из 100 клиентов, и вы хотите красиво поздравить их с праздником. Вам нет смысла заказывать дорогостоящую рассылку. Просто создайте поздравительную открытку и вложите в тело письма! При этом, вы можете пользоваться бесплатными почтовыми клиентами на Google, Яндекс или Mail, у которых лимиты на отправку составляют до 400 писем в сутки, чего вполне достаточно для большинства случаев;
  • вам нужна скорость. Создать рассылку на основании шаблонов очень быстро. Вы просто меняете изображения и тексты в шаблон на собственные, скачиваете файл в формате Jpeg и вставляете в тело письма;
  • у вас минимальный бюджет. В данном случае вы оплачиваете только услуги конструктора по скачиванию документа;
  • у вас сложный для верстки дизайн, либо вы хотите использовать креативные дизайнерские или фирменные шрифты, так как для обычных Html рассылок набор шрифтов четко регламентирован и ограничен.

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

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

Создать макет письма для последующей верстки в Html

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

Подробнее об оформлении электронных писем читайте в статье Как создать письмо для E-mail рассылки.

Создать элементы для Html рассылки

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

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

Резюмируя все вышесказанное, конструктор Wilda будет, несомненно, полезен всем, кому необходимо создать красивую и эффектную E-mail рассылку.

Источник: https://wilda.ru/kak-sdelat-pismo-dlya-e-mail-rassylki-na-onlayn-konstruktore-wilda

Как создать HTML-письмо: пошаговая инструкция

Создание рамок для электронного письма

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

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

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

Особенности создания

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

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

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

Каким должен быть шаблон письма

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

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

Подготовка

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

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

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

Пошаговая инструкция

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

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

Создание гипертекстовых ссылок

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

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

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

Как вставить картинки

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

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

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

Просмотр

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

Кодировка

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

Отправка HTML-письма

Для того чтобы сделать рассылку открывают “Смартреспондер” (SR). Затем:

  • выбирают либо создаем новое письмо, заполнив строки «Имя» и «Адрес отправителя».
  • заполняют строку «Тема письма»;
  • отмечают в верхнем левом меню HTML-код;
  • вставляют код, скопированный в программе DW-код в большое поле «Источник»;
  • проверяют корректность отображения посредством инструмента «Предпросмотр»;
  • удаляют текстовую версию письма;
  • тестируют его на спам, с помощью одноименной кнопки, расположенной рядом с кнопкой «Отправить».

Несколько популярных шаблонов

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

  • Cerberus. Этот набор так называемых отзывчивых шаблонов позволяет создавать письма, нормально отображаемые как в мобильном приложении Gmail, так и в Outlook. Он позволяет использовать блоки HTML-кода либо по отдельности, либо объединяя их.
  • Ink — это заготовка писем, рассылки которых практически универсальны и совместимы с любыми устройствами и клиентами.
  • Really simple HTML email template. Шаблон позволяет создавать рассылочные письма очень просто и быстро. Правда, у них будет крайне простой дизайн в виде одного столбца, в котором заключен призыв к действию.

Как вставить HTML в письмо

Рассмотрим теперь несколько другую задачу. Чтобы вставить код HTML в электронное письмо, например, gmail используя, как в приведенном ниже примере браузер Google Chrome, следует:

  • нажать на кнопку «F12» или выбрать соответствующую последовательность команд в меню;
  • в открывшемся окне с кодом текущей страницы клиента gmail найти то место, куда должно быть вставлено HTML-письмо, сделать правый клик и выбрать «Edit as HTML».
  • вставить скопированный HTML код;
  • нажать комбинацию двух клавиш «Ctrl» и «Enter».

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

Инструменты

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

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

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

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

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

Источник: http://fb.ru/article/279642/kak-sozdat-html-pismo-poshagovaya-instruktsiya

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

Создание рамок для электронного письма

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

         

           

                       

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

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

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

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

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

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

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

Как закрыть внешние ссылки от индексации

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

Привет ребята.

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

Как вы, наверное, знаете, теперь, даже если вы закрыли ссылку атрибутом rel=”nofollow”, статический вес все равно передается, а следовательно убывает с вашей страницы.

Читать дальше

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

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

Как сделать UTM метки и для чего они нужны Обновления на блоге и мини-отчет об оптимизации Скрипт для АБ тестирования

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

Smartlanding | 2014

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

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

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

Источник: https://smartlanding.biz/kak-sozdat-html-pismo.html

Поделиться:
Нет комментариев

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

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.