Простой html шаблон электронного письма, html e-mail + простое редактирование
Содержание:
- Введение: HTML письмо
- Шаг 1: Дизайн
- Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.
- Не поднимайте подбородок
- CLR декодер для MS SQL Server
- Шаг 2: План
- Сервис для быстрой верстки писем
- Как вставить HTML в письмо
- Бизнес модель сервиса Dropbox
- Создание области конента
- Автоматическая рассылка произвольных отчетов по электронной почте (обычные формы)
- Целевое действие в письме
- 13 приёмов в теме письма: вдохновляемся удачными примерами
- Header
- Помещаем HTML и PHP код отправки формы в один файл
- Вставить картинку в HTML письмо с помощью ePochta Mailer
- Как происходит работа над дизайном писем
- Как отправить html письмо с Яндекс почты
- Особенности создания
- Виды шаблонов
- Структура писем
- Наши Услуги
- Ошибка 651 Miniport WAN
- Адаптивный дизайн email-рассылки
- Шаг 4: Оформление письма
- Отправка печатных форм документов на почту в pdf. Без изменения конфигурации
- Пошаговая инструкция
- Внимательность вам в помощь…
- Names 4 Brands
- Как поменять местами столбцы с помощью горячих клавиш
Введение: HTML письмо
Написание HTML писем — одна из самых трудоемких задач для фрилансера. К счастью, один из моих первых клиентов, для которого я создавал такое электронное письмо, был достаточно терпеливым, и я смог сполна погрузиться в этот длительный и противоречивый процесс. Вам может повезти меньше, так что подготовьтесь с помощью данного урока.
Проблема: Почтовые клиенты
Вы думаете IE — самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?
Решение: Кодите как в 1997
Да-да. Таблицы. Cellpadding, cellspacing, colspan — все эти сложные вещи, о которых вы уже, наверное, забыли. Таблицы — единственный способ получить согласованный интерфейс письма. Так что пора забыть (временно) о ваших любимых CSS стилях и вспомнить о массивных таблицах.
Шаг 1: Дизайн
Простота
Разрабатывая дизайн электронного HTML письма, не забывайте о простоте. В таблице, используемой нами сегодня, много колонок. Это в основном, для демонстрации. Вам же следует придерживаться варианта из двух колонок, чтобы не усложнять себе работу.
Минимизируйте использование изображений
Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него. К примеру, мы добавим легкий градиент в заголовке письма, но ничего страшного, если он не отобразится у получателя.
Чем Уже, тем лУчше
Из-за того что окно просмотра письма в почтовых клиентах часто занимает лишь малую часть общего окна, ваше письмо должно быть шириной не более 600 пикселей. Ведь никому не нравятся горизонтальные полосы прокрутки.
Сохраняйте пропорции
Помните, что нам понадобится использовать такие неудобные атрибуты как cellpadding и cellspacing для установки отступов между элементами. Благоразумно пытаться сохранять пропорции отступов между элементами.
Наш дизайн
Данный дизайн похож на тот, который я когда-то использовал, но упрощенный
Он не привлекателен, но это здесь не важно. Он прост и пропорционален, включает много элементов, так что вы сможете пронаблюдать, как они отличаются в различных клиентах
Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.
Да, есть такая проблема. Если Вы подгружаете изображения со стороннего сайта (например, с сайта своей компании), то картинки у адресата отображены не будут. Данную проблему можно решить двумя способами:
Загрузить картинки, используемые в верстке письма на Yandex диск (если отправляете почту с Yandex, либо в облако Mail.ru, если отправляете почту с mail.ru). Далее указать прямые ссылки на эти изображения в сервисах
Обратите внимание, что по указанной Вами ссылке должна открываться картинка и ничего более.
Возможно загрузить картинку в само тело письма, перекодировав его в base 64. Далее вставить код картинки в формате base 64 в теги
Лучший вариант — это перекодировка изображения в код base 64 – меньше движений мышкой, больше надежности (изображение не удалят с Yandex диска, оно уже вложено в само письмо).
Не поднимайте подбородок
CLR декодер для MS SQL Server
Шаг 2: План
По моему опыту, программировать электронные HTML письма очень сложно, но быстро
Важно иметь заранее подготовленный план. И вот этот план (мы к этому вернемся, так что не переживайте, если не следите за ходом работы)
Во-первых начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.
Затем, заметьте, у нас еще три таблицы в основной: одна вверху для ссылки просмотра в браузере, одна по центру для основного содержимого письма и внизу для ссылки отмены подписки.
Наконецв главной таблице каждая горизонтальная часть текста будет расположена в ячейке таблицы. Такие ячейки, в свою очередь, будут содержать другие таблицы для каждого раздела текста.
Отступы внутри и снаружи ячеек
Вместо использования CSS свойств и мы будем использовать атрибуты HTML и . — почти то же самое, что и padding в CSS — отступы от содержимого до рамки. — это отступы между ячейками таблицы.
таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти и относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни , ни , необходимо определить это для каждой таблицы.
Сервис для быстрой верстки писем
Чтобы начать работать с сайтом нужно перейти и нажать на эту кнопку.
Следующая страница, которая откроется, это блочный редактор. Каждый элемент здесь можно выбрать, откроются инструменты, как у Ворда: изменить цвет текста, размер шрифта и так далее, когда изменения внесены, нажимаем готово.
Щелкнув “готово” появится вкладка “контент” с блоками. Используя эту панель, пользователь может добавлять картинки, кнопки, таблицы и многое другое. Интерфейс интуитивно понятный. Завершив редактирование, нажимаем на зеленую кнопочку в углу экрана “Далее”. Появится сообщение “html генерируется”, ждем отсчет времени. Потом появится сгенерированный cod рассылки и его можно скопировать и вставить в файл. Размер кода, достаточно большой несколько десятков килобайт.
На сегодняшний день можно создать письмо с помощью разных генераторов. Лично я использую для рассылку SendPulse где все также просто и понятно а владельцу надо просто редактировать текст и поменять картинки.
Далее, нажав на замок, вы сможете скачать все исходники шаблона письма, который описывался в уроке:
В этой статье вы узнали, как верстать html письма. Вы можете выбрать разработку вручную, прописывая каждый тэг или произвести генерацию автоматически, с помощью онлайн сервиса. Решайте сами, какой вариант больше подходит. Чтобы лучше разобраться в создании шаблона скачайте исходный код. Также, советую почитать пост про создание формы обратной связи в хтмл.
Не забываем поставить лайк и поделиться статьей. Всех благ.
Как вставить HTML в письмо
Рассмотрим теперь несколько другую задачу. Чтобы вставить код HTML в электронное письмо, например, gmail используя, как в приведенном ниже примере браузер Google Chrome, следует:
- нажать на кнопку «F12» или выбрать соответствующую последовательность команд в меню;
- в открывшемся окне с кодом текущей страницы клиента gmail найти то место, куда должно быть вставлено HTML-письмо, сделать правый клик и выбрать «Edit as HTML».
- вставить скопированный HTML код;
- нажать комбинацию двух клавиш «Ctrl» и «Enter».
Для той же цели можно скачать простую в использовнии программу Mozilla thunderbird. С ее помощью можно создать письмо, а потом сначала выбрать пункт «Вставить», а затем «HTML», и вставить туда код своей рассылки.
Бизнес модель сервиса Dropbox
Создание области конента
Прежде всего добавим padding для средней ячейки, так, чтобы таблица внутри имела вокруг немного пространства, в соответствии с дизайном.
Теперь добавим таблицу с тремя строками для главного контента — одна для главного заголовка, вторая для вступительного текста и третья для строки с двумя колонками. Зададим ширину таблицы 100%, используем проценты, а не пиксели, т.к. это поможет нам в дальнейшем сделать письмо адаптивным. Если всё время использовать значения в пикселях, в конечном итоге можно запутаться с огромным количеством значений, которые придётся переопределять с помощью медиа запросов. Если задать определённую ширину родительскому контейнеру, а вложенным в него таблицам размеры в процентах, все элементы будут адаптироваться пропорционально.
Теперь вставим наш контент и добавим padding для средней ячейки.
Добавим две колонки с контентом для строки 3. Нам нужен margin между двумя ячейками, но margin не поддерживается, поэтому мы создадим таблицу с тремя колонками и средняя колонка останется пустой.
Сколько бы я не придерживался процентов, но, если Вам нужен контент определённого размера, может быть непросто перевести его в проценты (например, колонки будут равны 48,1%, что может привести к путанице ). Именно поэтому, учитывая, что наши изображения равны 260px, мы создадим колонки шириной 260px, с ячейкой для margin в 20px посередине. (В общем выходит 540px: 600px ширина таблицы минус padding 30px с каждой стороны). Обязательно обнулите font-size и line-height и добавьте неразрывный пробел в ячейку с margin.
Также установим значение для каждой ячейки, чтобы выравнять их по вертикали, даже если одна из колонок имеет больше содержимого, чем остальные. Значение по умолчанию .
Теперь добавим изображение и контент в эти колонки. Т.к. нам нужно несколько строк, вставим ещё одну таблицу, потому что мы не можем использовать colspan или rowspan. Мы также добавим padding между изображениями и скопируем каждую колонку.
Здесь мы установили ширину изображений с помощью HTML на 100% ширины колонки. Это, опять же, для того, чтобы сделать письмо адаптивным. Мы можем использовать только медиа запросы, чтобы изменить ширину родительского элемента. Нам нужно переопределить высоту в пикселях, потому что используя теперь не будет работать везде (кашель, Outlook). Так что зададим в пикселях. Это значит, нам придётся установитьэтим изображениям используя медиа запросы, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Как только установим ширину в процентах, не нужно будет ничего переопределять. Чем меньше элементов для переопределения, тем лучше.
Автоматическая рассылка произвольных отчетов по электронной почте (обычные формы)
Очень часто возникает необходимость на регулярной основе получать отчеты из 1С, но не всегда есть возможность зайти в программу. Например, директору удобно каждое утро анализировать состояние основных показателей организации за чашечкой кофе, у себя дома, открывая отчеты в почте со смартфона или планшета.
В типовых конфигурациях на управляемых формах этот механизм достаточно хорошо реализован и имеет очень гибкую настройку. К сожалению, в конфигурациях на обычных формах приходится довольствоваться лишь рапортом руководителю, который предоставляет достаточно скудные возможности.
Поэтому был реализован ниже следующий функционал.
3 стартмани
Целевое действие в письме
Письмо готовят ради конкретной цели: покупка, подтверждение подписки, написание отзыва, подписка в соцсетях и так далее. Иными словами, получатель в письме должен совершить целевое действие.
Обычно к целевому действию ведёт кнопка. И, поскольку это самый важный элемент письма, она должна быть заметной. Во-первых, кнопка должна выглядеть как кнопка. Глядя на неё, получатель должен понимать, что на неё можно нажать и что после нажатия произойдёт определённое событие.
Во-вторых, кнопка должна быть заметной. Для этого лучше использовать контрастные к фону цвета. Также она должна быть достаточно крупной. Минимальная рекомендуемая высота — 35 px. Средняя ширина указательного пальца 16-20 мм, это приблизительно 45 px. Пальцы у всех разные, но производители телефонов дают свои рекомендации. В гайде Apple тач-область — 44 px, Microsoft рекомендует размер 34 px. Если размер кнопок будет меньше, попасть в них и выполнить целевое действие будет сложнее.
13 приёмов в теме письма: вдохновляемся удачными примерами
Разберём на примерах способы, которые помогут создать привлекательную тему для рассылки.
Аллюзия и метафоры. Литературные приемы — хорошие помощники для тех, кто сочиняет заголовки. Аллюзия — намёк на общеизвестные факты, исторические события, литературные произведения, фильмы и т.д.:
- Без бумажки НЕ букашка, или что делать за границей без документов (Kupibilet).
- Как меняться, когда есть лень и «завтра»? Чип и Дэн спешат на помощь (Издательство МИФ).
- Ты в ответе за то, что не доучил (Lingualeo).
Метафора — слово или выражение, которое употребляется в переносном значении. Этот приём помогает сделать тему более образной и понятной:
- Где у него кнопка? Управляем лифтом настроения (Издательство МИФ).
- Поймай летнюю распродажу курсов за хвост (Lingualeo).
Цифры. Людям нравятся цифры
Однако важно следить, чтобы они были в мире читателя и повышали ценность сообщения:
- 750 рублей за рекомендацию (Тинькофф Банк).
- 10 бюджетных рецептов обедов на 100 рублей (Лайфхакер).
Вопрос. Чтобы сформулировать полезный заголовок, придумайте вопрос, на который вашим подписчикам будет интересно получить ответ:
- Как кататься по миру за чужой счет (Т—Ж).
- Как проверить, не скручен ли пробег у машины (Аuto.ru).
Личный опыт. Люди постоянно читают отзывы. Личный опыт других вызывает больше доверия, чем абстрактные рассуждения. И чем авторитетнее человек в глазах читателя, тем больше вероятность получить высокий open rate:
- Как я поняла, что пора разводиться: личный опыт (Лайфхакер).
- Как мошенник развел меня на 10 евро (Skyeng).
Актуальность
Подумайте, как можно использовать масштабные события, чтобы привлечь внимание к рассылке. Ответьте на вопрос: какие темы обсуждают подписчики сегодня?
Запрет. Помните монолог Саши про вилки из фильма О чем говорят мужчины? Тебе сказали, что нельзя есть вилкой. И сразу захотелось именно вилкой! Попробуйте что-нибудь запретить подписчикам уже в теме письма, чтобы побудить их к действию:
- Страшное безудержное хвастовство — не читайте ?(Дарья Манелова — Instмаркетолог).
- Не покупайте ничего! Дождитесь распродажи! Распродажа 05.11.17 (Intimo).
Интрига
Хороший приём, который привлекает внимание и распаляет любопытство подписчиков. Главное не переусердствовать и не скатиться в желтизну
Мне по душе темы, в которых есть как интрига, так и намёк на содержание рассылки:
- Если бы в России было 100 жителей (Т-Ж).
- Как флиртовать при помощи книг (LiveLib).
- Кейс: какое письмо помогло заработать 13 миллионов рублей (Carrot quest).
Чувства. Ильяхов постоянно твердит, что в текстах нужно опираться на чувственный опыт читателя (всё, что можно увидеть, услышать, понюхать, попробовать и потрогать). Такой приём делает текст сильным и повышает его убедительность. Так почему бы не обратиться к ощущениям читателя уже в теме письма:
- Ми-ми-ми отпуск: где почесать панду за бочок и полюбоваться фламинго (KupiBilet).
- Посмотрите, как выглядят магазины будущего (Greenpeace).
Срочность. Этот приём позволяет сыграть на страхе человека упустить выгодное предложение. Всем знакомо: только сегодня, только в ноябре и т.д. Поднадоело, но всё ещё работает. Кроме того, всегда можно придумать что-то более оригинальное: Зомби-руки сдавили горло Лео! Скорей! (Lingualeo).
Другой вариант использовать дефицит времени — рассказать, как что-то полезное можно сделать быстро:
- Как за полчаса поднять эффективность сайта и рекламы (Агентство интернет-маркетинга ЛидМашина).
- Чек-лист: улучшаем внешний вид сайта за 15 минут (Tilda).
Шутка. Сложный приём. Надо быть уверенным, что ваш юмор поймут подписчики:
- Носки, трусы, гантеля, лещ — что подарить тебе, родной? (Издательство МИФ).
- Для тех, кто в салате (Lingualeo).
Формат. Чтобы сделать тему более полезной, сообщите о формате контента, который вы предлагаете в рассылке. Это может быть инструкция, чек-лист, руководство, видео, шаблон:
- Чек-лист для дизайнера: что проверить в макете перед сдачей (EmailSoldiers).
- Возвращаем, сокращаем и оптимизируем налоги: лайфхаки и инструкции (Inc.Russia).
Аудитория. Укажите, кому предназначено письмо, уже в теме: программистам, мамочкам в декрете, фотографам, вегетарианцам. Так у вас больше шансов, что нужные люди откроют письмо:
- О чём забывают email-маркетологи в декабре? (EmailCompetitors).
- ? Тому, кто плохо себя вёл (PichShop).
Провокация. Придумайте тему, которая выходит за рамки и вызовет у человека сильные чувства:
Header
<!—Header—>
<tr>
<td bgcolor=»#c7d8a7″ style=»padding: 40px 30px 20px 30px;»>
<!—LOGO—>
<table width=»95″ align=»left» border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td height=»70″ style=»padding: 0 20px 20px 0;»>
<!—ТУТ ССЫЛКА НА ЛОГО—>
<img src=»http:/site.com/image/logo.png» width=»100″ border=»0″ alt=»» / >
</td>
</tr>
</table><!—END-LOGO—>
<!—Заглавие—>
<!—>
<table width=»425″ align=»left» cellpadding=»0″ cellspacing=»0″ border=»0″>
<tr>
<td>
<!—>
<table class=»col425″ align=»left» border=»0″ cellpadding=»0″ style=»width: 100%; max-width: 400px;»>
<tr>
<td height=»70″>
<table width=»100%» border=»0″ cellspacing=»0″>
<tr>
<td style=»padding: 0 0 0 3px; font-size: 20px; color: #ffffff; font-family: sans-serif; letter-spacing: 5px; font-weight: bold;»>
SubHEADER
</td>
</tr>
<tr>
<td class=»h1″ style=»padding: 5px 0 0 0; font-size: 33px; line-height: 38px; font-weight: bold; color: #153643; font-family: sans-serif;»>
HEADER
</td>
</tr>
</table>
</td>
</tr>
</table>
<!—>
</td>
</tr>
</table>
<!—><!—END-ЗАГЛАВИЕ—>
</td>
</tr>
|
1 |
<!—Header—> <tr> <td bgcolor=»#c7d8a7″style=»padding: 40px 30px 20px 30px;»> <!—LOGO—> <table width=»95″align=»left»border=»0″cellpadding=»0″cellspacing=»0″> <tr> <td height=»70″style=»padding: 0 20px 20px 0;»> <!—ТУТССЫЛКАНАЛОГО—> <img src=»http:/site.com/image/logo.png»width=»100″border=»0″alt=»»> <td> <tr> <table><!—END-LOGO—> <!—Заглавие—> <!—if(gte mso9)|(IE)> <table width=»425″align=»left»cellpadding=»0″cellspacing=»0″border=»0″> <tr> <td> <!endif—> <table class=»col425″align=»left»border=»0″cellpadding=»0″style=»width: 100%; max-width: 400px;»> <tr> <td height=»70″> <table width=»100%»border=»0″cellspacing=»0″> <tr> <td style=»padding: 0 0 0 3px; font-size: 20px; color: #ffffff; font-family: sans-serif; letter-spacing: 5px; font-weight: bold;»> SubHEADER <td> <tr> <tr> <td class=»h1″style=»padding: 5px 0 0 0; font-size: 33px; line-height: 38px; font-weight: bold; color: #153643; font-family: sans-serif;»> HEADER <td> <tr> <table> <td> <tr> <table> <!—if(gte mso9)|(IE)> <td> <tr> <table> <!endif—><!—END-ЗАГЛАВИЕ—> <td> <tr> |
- В строчке: <img src=”http:/site.com/image/logo.png” width=”100″ border=”0″ alt=”” / >
поменять http:/site.com/image/logo.png на ссылку своего логотипа. - Вместо SubHEADER написать подзаголовок
- Вместо HEADER заглавие письма
Помещаем HTML и PHP код отправки формы в один файл
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.
Вставить картинку в HTML письмо с помощью ePochta Mailer
Если вы не знаете HTML и не планируете его изучать, рекомендуем воспользоваться специальным программным обеспечением,
подобно ePochta Mailer. Такая программа для рассылок позволяет
легко и быстро добавлять изображения в письмо, без «копания» в коде.
3 шага добавления картинки
В процессе создания шаблона в ePochta Mailer вы подошли к этапу, когда нужно добавить изображение.
- Выбираете на панели программы меню «Вставить».
- Внутри этого меню выбираете опцию «Рисунок».
- В диалоговом окне, которое появится, с помощью кнопки «Обзор» загружаете изображение с компьютера в программу.
Строку «Текст для замены» заполняете alt-текстом.
Работа с кодом: картинка средствами HTML
Если вы планируете загружать в письмо изображения со своего сайта, переходите на специальную вкладку “HTML код” в окне
программы и добавляйте код по примеру
<img src=»http://www.yoursite.com/images/picture.jpg»>,
где src=»http://www.yoursite.com/images/picture.jpg» – источник картинки, абсолютная ссылка на изображение на вашем сайте.
Как происходит работа над дизайном писем
Первое знакомство
При подготовке дизайна мы изучаем бизнес клиента: его отличия и преимущества перед конкурентами, фирменный стиль, сайт и предыдущие рассылки, если они были. Смотрим статистику, анализируем, какие кампании в прошлом сработали лучше, какие хуже. Иногда у клиента есть гайдлайн для писем — это совсем идеальный вариант. В большинстве случаев под рассылки нужно разработать дизайн-шаблон — это письмо со всеми элементами, которые когда-либо могут пригодиться. В будущем из этих элементов можно собирать рассылки. За основу для дизайн-шаблона берём сайт.
Обсуждение структуры письма с копирайтером
Подготовку письма начинают с текста рассылки. Без него делать макет бессмысленно.
Когда текст готов, дизайнер определяет структуру письма и выделяет основные блоки. Копирайтер и сам должен обозначить подзаголовки, разбивку на смысловые отрезки, списки. Если структура выделена не явно, нужно обсудить это с копирайтером и вместе определиться со структурой. Если есть вопросы, лучше задать их сразу: что проиллюстрировать, какой главный посыл, на что делать акценты.
Всегда задавайте вопросы. Не может быть такого, чтобы всё было понятно. Даже если кажется, что понятно, уточните у менеджера и писателя, правильно ли вы понимаете задачу.
Дотошное выяснение задачи иногда приводит к неожиданным решениям. Например, однажды нам нужно было отправить инструкцию по работе с электронным кошельком. Письмо предполагалось одно на три вида кошельков, и для каждого — инструкция.
Набросали макет, показали менеджеру. Письмо оказалось длинным и малоинформативным. Текстовые блоки разные по объёму, иллюстраций нет:
Тогда решили отправить письмо-инструкцию в виде презентации. Так задача помочь подписчикам разобраться в работе с кошельками была решена, и красота письма от этого не пострадала. Клиент остался доволен.
Подготовка шаблона
Когда все ответы получены, мы начинаем собирать шаблон по выбранной структуре. На этом этапе иногда возникают трудности: оказывается, что текста много или, наоборот, очень мало, абзацы в списке неравномерные, заголовки слишком длинные, баннер встаёт неаккуратно.
Узнайте, сколько для вас будет стоить
Обратитесь к писателям. Если текст уже согласован, есть два варианта: продолжить работу, или попробовать согласовать с клиентом изменения в тексте. Если аргументировать изменения, клиент, как правило, не возражает.
Передача верстальщику и проверка вёрстки
Макет готов. Менеджер счастлив, клиент согласовал. Время передавать работу в вёрстку. Но на этом работа дизайнера не закончена.
Всегда нужно контролировать вёрстку. Не поленитесь, посмотрите вёрстку или попросите прислать вам тест. Бывает, что свёрстанное письмо незначительно отличается от макета, как в этом примере:
Когда убедитесь, что письмо свёрстано как задумано и корректно отображается на всех устройствах, можно отправлять.
Как отправить html письмо с Яндекс почты
Технически данная возможность предоставлена Яндексом, и для отправки html письма потребуется лишь сам html шаблон и открытая в браузере почта.
Готовый шаблон необходимо вставить в исправленный код элемента страницы с формой отправки письма.
- Для этого открываем страницу «Написать»
-
В текстовом поле правым кликом открываем «Просмотреть код» либо же «Исследовать элемент» (зависит от браузера).
-
В найденном div-блоке правым кликом открываем «Edit as HTML».
- В открывшейся редактор вставляем наш шаблон и закрываем редактор.
Таким образом можно красиво оформить и новостную рассылку, и даже создать страницу с предложениями товара с кнопкой заказать или купить.
Точно так же можно изменить оформление и вставить картинку в подпись в почте Яндекс.
Особенности создания
Современный человек ежедневно получает в среднем 5-6, а порой и до 10 электронных писем
Это значит, что у вас есть всего менее секунды, чтобы успеть привлечь внимание адресата, до того как он перейдет к прочтению следующей корреспонденции. В противном случае ваша рассылка HTML-писем будет абсолютно неэффективной, и вы просто потратите время зря
Одним из нюансов, увеличивающих ваши шансы на привлечение внимания потенциальных клиентов или другой целевой аудитории, является создание корреспонденции, которая адаптирована к мобильным устройствам. Ведь большинство тех, кому она адресована для просмотра почты, наверняка используют их намного чаще, чем настольные компютеры и ноутбуки.
С этой целью можно применять, например, «отзывчивый дизайн», легко адаптирующийся к размеру экрана.
Виды шаблонов
- Готовый шаблон;
- Блочный редактор;
- Собственный HTML-шаблон.
В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».
Блочный редактор. Это инструмент, благодаря которому создают шаблон из готовых блоков. Знания HTML-кода не нужны.В Mailigen есть 10 блоков, их можно переставлять местами, добавлять и удалять:
- Текст;
- Видео;
- Кнопка;
- Заголовок;
- RSS-контент;
- Изображение;
- Группы в соцсетях;
- Шеринг в соцсетях;
- Динамический контент;
- Горизонтальный разделитель.
В блочном редакторе вы сможете добавить кнопки и видео в основную часть или удалить шеринг в соцсетях в футере. В общем, комбинируйте блоки в шаблоне, как вам нужно, и создавайте удобное письмо.
Собственный HTML-шаблон. Это отдельный HTML-файл рассылки. Если ты не верстальщик и не программист, уже на этом этапе определение «HTML-файл» может вызвать ступор.
HTML – это стандартный язык программирования, который «понимают» все веб-страницы интернета. С помощью этого языка описывают разметку документов – то есть то, как документы выглядят на сайте.
Структура писем
Структура писем практически не отличается от структуры обычной веб-страницы:
Прехедер
В прехедере чаще всего располагается тема письма и ссылка на веб-версию.
Веб-версию добавляют на случай, если вдруг не подгрузятся картинки или пользователь захочет поделиться письмом, не пересылая его.
Шапка письма (хедер)
Стандартно в шапке письма располагают логотип компании, иногда — контактную информацию и меню. Учтите, что, если вы добавляете меню в шапку, лучше всего выбрать только самые важные для конкретного письма пункты, а не впихивать всё.
Вот пример шапки письма от Амедиатеки, здесь просто логотип:
А вот письмо Ламоды: здесь и логотип, и информация по накопленным баллам, и меню:
Тело письма
Тело письма — контентная часть. Она может состоять из текста или нескольких текстовых блоков, картинок, кнопки с целевым действием.
Подвал письма (футер)
Обязательная для подвала информация — ссылка на отписку от рассылки, без неё письма будут попадать в спам. Обычно в подвале также размещают контактную информацию, сноски и ссылки на соцсети.
Наши Услуги
Ошибка 651 Miniport WAN
Адаптивный дизайн email-рассылки
За правильное отображение письма на разных экранах отвечает адаптивность. Адаптивное письмо выглядит красиво на всех устройствах, его содержимое подстраивается под размер любого экрана. При разработке макета нужно учитывать нюансы вёрстки и перестроения макета. Если возникают трудности, то лучше проконсультироваться с верстальщиками: они подскажут, как расположить элементы, чтобы при просмотре письма, например, на мобильных устройствах, важная информация корректно отображалась.
Есть несколько вариантов адаптивной вёрстки письма.
С помощью «плавающих блоков»
Для разработки макета письма используется модульная сетка в две, три или четыре колонки — в зависимости от информации, которую нужно разместить. Все элементы письма, баннер, абзац текста, сниппет, в таком случае можно представить в виде прямоугольников. Когда ширина экрана уменьшается, элементы просто перестраиваются друг под друга.
макет письмаАдаптивная вёрстка
С подстраивающимся содержимым
В таком методе при уменьшении экрана в письме уменьшаются картинки, а размер шрифта остаётся прежним
Обратите внимание, что, если вы используете нестандартный шрифт для заголовков, то он будет верстаться картинкой. Тогда длинный заголовок перестанет читаться вовсе
С помощью медиазапросов
Mediaquery — это компонент языка CSS. Этот метод позволяет менять расположение объектов при помощи медиазапросов. Не самый лучший способ адаптации для писем, так как далеко не все почтовые клиенты с ними работают.
Клиенты, поддерживающие и не поддерживающие медиазапросы:
| Десктопные | Мобильные | Браузерные |
| AOL Desktop | Android 4.2.2 Mail | AOL Mail |
| Apple Mail 10 | Android 4.4.4 Mail | G Suite |
| IBM Notes 9 | AOL Alto Android app | Gmail |
| Outlook 2000–03 | AOL Alto iOS app | Google Inbox |
| Outlook 2007–16 | BlackBerry | Outlook.com |
| Outlook Express | Gmail Android app | Yahoo! Mail |
| Outlook for Mac | Gmail Android app IMAP | |
| Postbox | Gmail iOS app | |
| Thunderbird | Gmail mobile webmail | |
| Windows 10 Mail | Google Inbox Android app | |
| Windows Live Mai | Google Inbox iOS app | |
| iOS 10 Mail | ||
| Outlook Android app | ||
| Outlook iOS app | ||
| Sparrow | ||
| Windows Phone 8 Mail | ||
| Yahoo! Mail Android app | ||
| Yahoo! Mail iOS app |
Зелёным обозначены почтовые клиенты, которые поддерживают медиазапросы, красным — те, что не поддерживают. Данные взяты отсюда: campaignmonitor.com
В большинстве случаев мы используем только два метода: блочную и масштабную адаптации. Какой способ использовать — решает верстальщик на основе готового макета. Когда есть возможность перестроить — перестраиваем, если нет — растягиваем и уменьшаем картинки в зависимости от размера экрана. Иногда мы можем сами выбрать и сказать верстальщикам, какой именно метод нужно применить.
Ещё я бы посоветовала почитать книгу Люка Вроблевски «Сначала мобильные!». В ней доступно рассказывают о проектирования сайтов с учётом отображения на мобильных и планшетах, приводятся примеры и рекомендации по вёрстке. Этот подход можно применять и в дизайне писем.
Ошибки в адаптивном дизайне писем
С адаптивностью писем легко облажаться. Поэтому о ней нужно подумать заранее, а потом тщательно проверить с верстальщиком отображение на разных устройствах.
Например, в этом письме теги задумывались в два столбца:
Теги отображаются в два столбца
Но в результате письмо выглядело вот так:
Письмо с ошибкой в вёрстке
Дело в том, что между плавающими блоками
не должно быть пробелов в коде. В этом примере в коде случайно добавили пробел или перенос строки. Получился отступ между блоками, и два столбца не поместились.
Шаг 4: Оформление письма
Сброс основных значений по умолчанию
Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.
Обратите внимание также на внешние отступы у главной таблицы, являющихся всего лишь стилем по умолчанию тега body
Оформление текста
Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа «»), так как результаты будут неоднозначными.
Смотрите, теперь письмо выглядит намного привлекательнее!
Фоновые изображения
Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через ). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.
Другие стили
Необходимо задать стиль каждой ссылке, в противном случае, она примет стиль, заданный по умолчанию почтового клиента. А также добавим рамку главной таблице. Еще добавим атрибут каждому изображению, это исключит дефект, возникающий в Outlook и Hotmail.
Мы закончили. Приступим к тестированию!
Отправка печатных форм документов на почту в pdf. Без изменения конфигурации
Пошаговая инструкция
Теперь, рассмотрим, как создать HTML-письмо. Для этого:
- Последовательно открывают в меню вкладки «Вставить» и «Таблица» и выставляют нужные параметры таблицы. Например, строки — 2, столбцы — 1, ширина — 700, заголовок — сверху. Границы можно выставлять, а можно обойтись без них, указав 0.
- Формируют заголовок письма. Так как HTML-письмо предназначено для большего числа получателей, поэтому используют оператор , подставляющий нужное имя получателя.
- В нижнем окне «Свойства» выставляют нужные параметры для шрифта, размера и цвета текста заголовка и цвет фона.
- «Выходят» из области заголовка. В нижней части экрана выставляют параметры для курсора «По центру» и «По середине».
- Вставляем готовый текст письма или «пишем» его прямо в программе DW, выбрав нужный тип и размер шрифта, а также расположение текста на странице.
Внимательность вам в помощь…
Итак, подытожим. После Html атрибута MAILTO через двоеточие указывается Емайл, на который должно быть отправлено сообщение. Далее при необходимости ставится знак вопроса (без пробелов) и указываются какие-то из дополнительных параметров (subject, body, cc, bcc). Они опять вводятся в строке без пробелов, а их значения указываются после знака равно. Параметры друг от друга отделяются амперсандами & (опять же без пробелов). Вот и все. Видите, как просто.
Главное не забыть закрыть двойные кавычки после ввода значения последнего параметра, да и вообще быть внимательнее. Давайте для примера введем что-то простое, не требующее использования спецсимволов (разве что только & вместо & все же придется использовать), которые сильно снижают визуализацию синтаксиса записи MAILTO: Текст Емайл-ссылки
<a href="mailto:admin@ktonanovenkogo.ru?subject=Тема&body=Текст">Текст Емайл-ссылки</a>
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Использую для заработка
