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


iconЗдравствуйте, дорогие читатели блога «Мама в Интернете»! Из предыдущей статьи мы узнали, чем удобны html-письма, а сегодня поговорим о том, как их создавать. Это совсем не сложно, от полного незнания того, что такое html-письма, до отправки готового html-письма у меня ушло всего два часа! Обязательно ли знать html или можно обойтись без него?

Оформить письмо можно следующими способами:
1) самому, пользуясь табличной вёрсткой html,
2) также можно воспользоваться конструктором html-писем,
3) а можно подключить хороший плагин и сделать рассылку автоматической.

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

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

interfeys-programmyi-html-pisma

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

bloki

Каждый блок можно настроить: вставить ссылку, задать выравнивание, тексту задать нужные параметры, такие как размер, цвет, написание, изображению – тэги alt и title, адаптивность.

nastroit

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

Итак, письмо готово. Вот фрагмент моего htlm-письма.

moy-shablon-html

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

eksport-koda-1

На тарифе free сервис предоставляет только четыре бесплатных экспорта кода в месяц, поэтому будьте внимательны и убедитесь, что в макете вас всё устраивает, прежде чем экспортировать код.

Готово, у вас порядка двухсот строк html-кода, и возникает резонный вопрос, что делать с ним дальше? О том, как отправить html-письмо, читайте в следующей статье.

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

Сказка про вашего ребенка,
отличный подарок для него!

skazki-210

С вами была Яна, мама в Интернете.

блог Мама в Интернете
Подпишитесь на обновления блога и получайте уведомления о новых статьях на почту!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

error: Контент защищён от копирования!