Html письмо пример: Вёрстка html-писем — полная инструкция от агентства Email Soldiers

Содержание

Инструкция по HTML верстке писем email рассылки | www.epochta.ru

Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться на всех устройствах. Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют конструкторы HTML писем, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов. В этой статье мы расскажем, как создать HTML письмо, которое пользователи оценят по достоинству.

Создание HTML письма: Базовые знания

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте 🙂

Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

А теперь давайте разбираться детальнее в такой сложной, но интересной теме как верстка email писем. Один из самых распространенных вопросов среди новичков: Где писать код шаблона HTML письма? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код HTML письма и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени.

Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью. Cкачайте софт для массовых Email рассылок бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.

Формат шаблона html-писем

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

Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

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

Как сверстать HTML шаблон письма: Создание документа

HTML код любого email сообщения состоит из двух частей:

Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.

Создание HTML письма начинается с создания документа типа XHTML: 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5. <title>Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6. </head> 7. </html>

<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.
<meta http-equiv=”Content-Type” /> указывает, как обрабатывать текст и специальные символы в вашем письме.

«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html. <meta name=”viewport”/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана. Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.

Верстка тела email писем. Создание таблицы

Общая структура письма создается с использованием тега <body>. Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне. Ширина главной таблицы должна быть 100% (table width=”100%”). Она выступает фактически основным каркасом, «телом» email сообщения.

В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы. Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.

Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=”1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».

1. <body>
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>

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

(наличие рамки – результат работы тега border=”1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=”600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!» 1. <table border="1" cellspacing="0" cellpadding="0" align="center"> 2. <tbody> 3. <tr> 4. <td>Привет!</td> 5. </tr> 6. </tbody> 7. </table> Теперь письмо выглядит вот так: Вы заметили, что для вложенной таблицы использован атрибут

<border-collapse> со значением “collapse”? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы.

Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц. Мы уже говорили о том, что любой шаблон email сообщения состоит из трёх логических частей: хедер, тело письма с основным контентом, футер. Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку

 1. <tr>
2. <td>
3. Привет!
4. </td>
5. </tr>

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

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td>
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td>
14.Строка 3
15. </td>
16. </tr>
17. </table>

Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td bgcolor="#ffa500"> 4. Строка 1 5. </td> 6. </tr> 7. <tr> 8. <td bgcolor="#ffffff"> 9. Строка 2 10. </td> 11. </tr> 12. <tr> 13. <td bgcolor="#1e90ff"> 14. Строка 3 15. </td> 16. </tr> 17. </table> Сосредоточимся на первой строке – это будет хедер письма.

Строка 1. Верстка хедера HTML писем

В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег – <padding>. Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми. Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;. Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;. В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом   внутри), но с четко установленной высотой или шириной. Например: <tr><td> </td></tr> Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо. В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=”display:block;”, наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=”center” в тег <td>.

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

Пример кода Строки 1 с вставленным изображением: 1. <td align="center" bgcolor="#ffa500"> 2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img.png"> 3. </td> Визуально:

Строка 2. Работа с контентом в HTML шаблоне письма

Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉 Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

одна – для заголовка,
вторая – для краткого описания статьи,
третья – для строки с двумя столбцами.

Поехали! Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным. Код Строки 2 с вложенной таблицей: 1. <td bgcolor="#ffffff"> 2. <table border="1" cellpadding="0" cellspacing="0"> 3. <tr> 4. <td> 5. Строка 1 6. </td> 7. </tr> 8. <tr> 9. <td> 10. Строка 2 11. </td> 12. </tr> 13. <tr> 14. <td> 15. Строка 3 16. </td> 17. </tr> 18. </table> 19. </td> Визуально: Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода. Вложенная таблица с текстом: 1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td> 5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах 6. </td> 7. </tr> 8. <tr> 9. <td> 10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг. 11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности. 12. </td> 13. </tr> 14. <tr> 15. <td> 16. Строка 3 17. </td> 18. </tr> 19. </tbody> 20. </table> Визуально: Для последней строки таблицы мы подготовили две колонки с картинкой и текстом. Давайте по порядку. Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким. Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину. *Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны. Итого, два столбца по 260 пикселей + средний пустой столбец на 20px. Укажем также для обоих столбцов значение valign=”top”, что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить. 1. <table border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td valign="top"> 4. Колонка 1 5. </td> 6. <td> 7.   8. </td> 9. <td valign="top"> 10. Колонка 3 11. </td> 12. </tr> 13. </table> Визуально: Добавляем изображения и контент. Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах. 1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td valign="top"> 5. <table border="1" cellspacing="0" cellpadding="0"> 6. <tbody> 7. <tr><td>  8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td> 9. </tr> 10. <tr> 11. <td> 12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 13. </td> 14. </tr> 15. </tbody> </table> 16. </td> 17. <td> 18.   19. </td> 20. <td valign="top"> 21. <table border="1" cellspacing="0" cellpadding="0"> 22. <tbody> <tr> 23. <td> 24.   25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed. jpeg"> </td> 26. </tr> 27. <tr> 28. <td> 29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 30. </td> 31. </tr> 32. </tbody> </table> 33. </td> 34. </tr> 35. </tbody> </table> Визуально:

Строка 3. Создание кода футера HMTL письма

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц. Чтобы не забыть, сначала добавим отступы, а после – таблицы. Отступы: <td bgcolor="#1e90ff "> Строка 3 </td> Визуально: Разделяем строку на две колонки с помощью дополнительной таблицы. 1. <table border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td> 4. Колонка 1 5. </td> 6. <td> 7. Колонка 2 8. </td> 9. </tr> 10.</table> В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате. Дополнительная таблица с информацией футера: 1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody><tr> 3. <td> 4. <p>Компания ePochta<br> 5. [email protected]</p> 6. </td> 7. <td align="right"> 8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже. 9. </td> 10. </tr> 11. </tbody></table> Визуально: Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=”right” для тега <td>. Шаблон готов!

Верстка дизайна шаблона email рассылки

Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне. Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта. Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры: 1. <td><p align="center"> 2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах 3. </p></td> Посмотрите, как изменился текст: Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=”1″ заменить на тег border=”0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения. При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например: <table align="center" cellspacing="0" cellpadding="0"> Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0"> 2. <tbody>><tr> 3. <td> А теперь – проба пера: отправляем письмо на тестовый email адрес. Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения. Вот так созданный шаблон выглядит в Gmail Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте. И пусть клиенты с удовольствием читают ваши рассылки!

Создавайте красивые письма с программами ePochta!

Скачайте ePochta Mailer и тренируйтесь в создание email сообщения бесплатно на протяжении 7 дней!

Тестировать

Хочешь получать актуальные статьи?

Подпишись и стань гуру в email маркетинге!

HTML-верстка для email-рассылки — Digital Academy

Темы контента и дизайна письма мы обсудили в двух последних статьях, теперь займемся версткой. Получить готовый макет email-рассылки вы можете двумя способами: сайт-конструктор или ручная HTML&CSS-верстка. Первый вариант технически проще, но он проигрывает второму. Потому что количество шаблонов ограничено конструктором, да и приедаются такие однотипные рассылки быстро.

Чтобы контент письма получился интересным, читабельным и функциональным, предлагаем вам ручной способ: язык разметки HTML + язык стилей CSS.

Оглавление

Что такое HTML и CSS по-русски
Где писать код
Формат шаблона HTML-писем
Создание документа. Хедер
Тело письма: таблица
Футер
Кнопка и ссылки перехода
Безопасные универсальные шрифты
Адаптивная верстка, или «Отзывчивый email-дизайн»
Как проверить верстку

Что такое HTML и CSS по-русски

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

В двух словах, HTML — строительный материал для веб-страниц, язык разметки. Он состоит из специальных тегов, которые содержат команды для браузера:

<title> … </title> — название документа
<a> … </a> — чтобы вставить ссылку
<img> … </img> — чтобы вставить картинку
<head> … </head> — содержит команды, которые объясняют почтовым движкам, как отображать письмо
<body> … </body> — обозначает видимое содержание страницы

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

Обычно теги открываются <> и закрываются </> — это попарные. Если в этой статье вы увидите незакрытые теги, они относятся к одиночным. Например: <img> и <br>.

Теги диктуют команды, на основе которых строится содержимое страниц.

Язык стилей CSS добавляет на страницу эффекты, анимацию и прочую красоту. CSS мы прописываем в HTML-коде через внутренний (inline) стиль или ссылаемся на сторонние классы стилей.

1 — задаем CSS через внутренний стиль; 2 — через сторонние классы стилей

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

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

Где писать код

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

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

Вы можете написать код даже в «Блокноте», но мы все-таки советуем использовать визуальные HTML-редакторы для проверки: CodePen, HTML-online и другие. Они не подойдут для полноценной верстки письма, но помогут проверить результат.

Еще один вариант: использовать редактор, в котором можно одновременно писать код и проверять его отображение — например, Brackets.

Формат шаблона HTML-писем

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

Хедер. Шапка письма, которая обычно содержит логотип, навигационные ссылки. На языке HTML это все, что находится между тегами <head> и </head>.
Тело. Текст, картинки, ссылки, анимация. Контент ограничивается тегом <body>.
Футер. Подвал письма. Обычно здесь находятся кнопки перехода на соцсети, ссылки на обратную связь и отписку от рассылки. Иногда футер сливается с телом письма и не выделяется.

Давайте попробуем сверстать «скелет» рассылки, просто выполняя следующие правила. Мы хотим дать вам не только рекомендации по верстке, но и показать, как это работает.

Создание документа. Хедер

Начинаем писать код для email-письма. Здесь и далее пользуемся визуальным редактором HTML-Online:

XHTML-документ, с которого начинается верстка

Обращаем ваше внимание, что письмо открывает не хедер (). Перед ним надо прописать:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> — если простыми словами, то это переводчик или режим отображения контента. Он объясняет почтовому клиенту, как правильно читать письмо: какие будут теги и наборы правил HTML, CSS. Доктайпы бывают разные — для разных HTML и режимов.

В примере письма мы используем DOCTYPE HTML 4.01 Transitional, который поддерживает все актуальные элементы и атрибуты документов в HTML 4.01. Его еще называют переходным синтаксисом XHTML. Подробнее о вариантах отображения можно прочитать на Хабре, в статье, посвященной тегу.

<meta http-equiv=»Content-Type» /> — подсказывает почтовому клиенту, как отображать текст и специальные символы.

<meta content=»text/html; charset=utf-8″ > — уточняет, что текст нужно читать через HTML.

Тело письма: таблица

Оптимальные версии для верстки писем — HTML 4 и CSS 2. Почтовые клиенты и браузеры не поддерживают некоторые теги следующих версий. Поэтому после того, как мы закрываем тег <head>, открываем теги <body> и <table>

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

Чтобы предупредить появление пустого пространства в шаблоне, значения margin и padding ставим нулевыми.
Поскольку главная таблица — каркас всего письма, ее ширина должна быть 100%. Ширина письма фиксированная, 600 или 660 px.
Чтобы убрать ненужные отступы от границ ячейки таблицы, cellpadding и cellspacing также приравниваем к нулю.
Для вложенной таблицы используем атрибут <border-collapse> со значением «collapse». Так почтовый движок будет знать, как правильно отображать границы вокруг табличных ячеек.

Фоновый цвет ячейки задаем через тег <bgcolor>. Значения цветов для писем обязательно нужно прописывать форматом HEX (#6 символов кода). Например, <td bgcolor=»#808080″> — ячейка окрасится в серый цвет. Если вы используете другие обозначения — например #FFF для белого вместо #FFFFFF, — в письме цвет не отобразится.

Изображение вставляем прямо в ячейку, предварительно расставляем отступы от картинки до внутренних границ ячейки через свойство <padding>. Можем использовать расширенную (padding-top: 5px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;) или краткую (padding: 5px 0px 10px 0px;) форму записи. Обязательно прописываем alt для картинки (текст или символы, которые увидит получатель рассылки, если у него не отобразится картинка) и вставляем рабочую ссылку на источник картинки.

Вот как это выглядит на практике:

«Скелет» письма с хедером

Футер

Сделаем простой футер: контакты и ссылка отписки. Поскольку это два разных элемента, поделим строку «Or die» на две таблицы. Перед ними прописываем padding. Содержимое ячеек выравниваем на свое усмотрение атрибутом align.

Вот как изменилась строка «Or die», которую мы превратили в футер:

Чтобы сделать футер кликабельным, используем тег <a>

Кнопка и ссылки перехода

Чтобы добавить в рассылку кнопку, берем подходящую картинку, вставляем ее в ячейку (тег <img> с атрибутом src=%источник, откуда берем картинку%) и добавляем ссылку перехода (на целевую страницу, в приложение). Применим этот вариант для нашего «скелета»:

Не забываем прописывать alt и для кнопки

Безопасные универсальные шрифты

Конечно, наш скелет не подходит для отправки подписчикам. Как минимум, мы использовали скучные шрифты, которые напоминают пользователям о школьных рефератах в стиле Microsoft Office Word.

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

Поскольку не все шрифты универсально отображаются в почтовых службах и браузерах, используйте что-то из безопасных. Можете выбрать для себя 2–3 ходовых шрифта и ставить их во всех рассылках — пусть читатели привыкают к вашему стилю.

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

Подробнее тему шрифтов мы разобрали в статье о дизайне email-рассылки.

Адаптивная верстка, или «Отзывчивый email-дизайн»

По данным ТАСС, в 2019 году мобильный трафик в России вырос в 1,5 раза — до 3,3 млрд гигабайт. С мобильным трафиком растет и количество пользователей, проверяющих почту со смартфонов и планшетов. Сверстав рассылку руками, вы должны позаботиться и об адаптивной верстке. Иначе ваше письмо может выглядеть как-то так:

Текст письма подстроился под новую ширину экрана с неравномерными промежутками между словами. Это выглядит рвано и неаккуратно — такое письмо скорее оттолкнет читателя

Непроработанные интервалы между блоками письма привели к слипанию контента

При верстке не учли адаптацию под смартфон, из-за чего хедер со всем контентом уехали вниз

Понятие «отзывчивого дизайна» появилось в 2010 году. Смысл в том, что вне зависимости от формы дисплея устройства один и тот же контент смотрится по-человечески, читабельно. Хотя за последние 9 лет появилось много стратегий по адаптационной верстке, HTML-рассылок это не касается. Почтовые клиенты и сайты отображают не все способы адаптивной верстки. А из тех, что работают неплохо, выделим две: медиа-запросы и Mobile First.

Медиа-запросы. Чтобы потенциальный клиент мог прочитать письмо с любого девайса, попробуйте прописать медиа-запросы. Это команды, которые приспосабливают макет HTML-письма к экранам разного формата. Минус медиа-запросов — их поддерживают не все почтовые клиенты и сайты. Подробнее об этом способе адаптации писем рассказали на Хабре.

Mobile First. Иногда компьютерная страница содержит столько всего, что адаптировать это на мобильную версию нереально или очень сложно. Стратегия Mobile First предлагает не переводить ПК-версию на мобильную. Философия метода строится на том, что сначала мы прорабатываем мобильный интерфейс, а потом уже версию для ПК. Эта стратегия не бюджетная, обычно она вписывается в долгосрочную маркетинговую стратегию.

Как проверить верстку

Итак, письмо готово. Но прежде чем отправить его покорять интернет, проконтролируем, как отображается верстка. Нам нужно проверить, как будет выглядеть рассылка на смартфонах, ноутбуках, компьютерах в зависимости от операционной системы мобильных устройств и почтовиков. Специально для этого есть сайты litmus.com и emailonacid.com. Минусы данных сервисов в том, что они зарубежные (Mail.ru и почты Яндекса нет в базе) и платные — можно тестировать бесплатно до 7 дней.

Так письмо будет выглядеть на iPad Air с системой iOS 11:

Всего у сервиса Email on Acid проверка отображения письма для 90 устройств, почтовых сервисов и операционок

Альтернативное решение — проверить верстку на практике: отправить пробное письмо себе, коллегам, друзьям. Посмотрите на письмо глазами адресатов и доведите верстку до финальной версии.

Успешных писем!

Разметка письма — Обучение веб-разработке

Предыдущий
: Введение в HTML
Следующий

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

Предпосылки:	Прежде чем приступать к этой оценке, вы должны были уже проработать Начало работы с HTML, Что в голове? Метаданные в HTML, основы HTML-текста, Создание гиперссылок и Расширенное форматирование текста.
Цель:	Протестируйте базовое и расширенное форматирование текста HTML, использование гиперссылок и используйте HTML.

Для начала получите необработанный текст, который нужно разметить, и CSS для оформления HTML. Создайте новый файл .html с помощью текстового редактора или онлайн-инструмента, такого как CodePen, jsFiddle или Glitch, для выполнения задач.

Примечание: Если вы застряли, обратитесь к нам за помощью — см. раздел «Оценка или дополнительная помощь» внизу этой страницы.

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

Блочная/структурная семантика

Используйте соответствующую структуру документа, включая doctype и , и элементы.
Как правило, письмо должно быть размечено как организация заголовков и абзацев, за следующим исключением. Имеется один заголовок верхнего уровня (строка «Re:») и три заголовка второго уровня.
Используйте соответствующий тип списка, чтобы отметить даты начала семестра, учебные предметы и экзотические танцы.
Поместите два адреса в элементов
. Каждая строка адреса должна располагаться на новой строке, но не в новом абзаце.

Встроенная семантика

Имена отправителя и получателя (и Телефон и Электронная почта ) должны быть размечены с большой важностью.
Четыре даты в документе должны иметь соответствующие элементы, содержащие машиночитаемые даты.
Первый адрес и первая дата в письме должны иметь значение атрибута класса столбец отправителя . CSS, который вы добавите позже, выровняет их по правому краю, как это должно быть в случае с классическим расположением букв.
Разметьте следующие пять сокращений/аббревиатур в основном тексте письма — «PhD», «HTML», «CSS», «BC» и «Esq.» — обеспечить расширение каждого из них.
Шесть нижних/верхних индексов должны быть правильно размечены — в химических формулах и числах 103 и 104 (должны быть 10 в степени 3 и 4 соответственно).
Постарайтесь отметить как минимум два подходящих слова в тексте с сильным значением/выделением.
Есть два места, где в письме должна быть гиперссылка. Добавьте соответствующие ссылки с заголовками. Для местоположения, на которое указывают ссылки, вы можете использовать http://example.com в качестве URL-адреса.
Разметьте цитату и цитату из девиза университета соответствующими элементами.

Заголовок документа

Набор символов документа должен быть установлен как utf-8 с использованием соответствующего метатега.
Автор письма должен быть указан в соответствующем метатеге.
Предоставленный CSS должен быть включен в соответствующий тег.

Используйте средство проверки HTML W3C для проверки вашего HTML. Наградите себя бонусными баллами, если это подтверждается.
Вам не нужно знать CSS, чтобы выполнить это задание. Вам просто нужно поместить предоставленный CSS внутри элемента HTML.

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

Если вы хотите оценить свою работу или застряли и хотите обратиться за помощью:

Поместите свою работу в общедоступный онлайн-редактор, такой как CodePen, jsFiddle или Glitch.
Напишите сообщение с просьбой об оценке и/или помощи в разделе «Обучение» форума MDN Discourse. Ваш пост должен включать:
- Описательный заголовок, такой как «Оценка требуется для разметки письма».
- Подробная информация о том, что вы уже пробовали и что вы хотели бы, чтобы мы сделали; например, сообщите нам, если вы застряли и нуждаетесь в помощи или хотите получить оценку.
- Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в общедоступном онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика — очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
- Ссылка на фактическое задание или страницу оценивания, чтобы мы могли найти вопрос, по которому вам нужна помощь.

Предыдущий
: Введение в HTML
Следующие

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 участниками MDN.

css — Деловое письмо в формате HTML

CSS

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

Вы могли бы назвать свои классы более осмысленными, но это только хорошая практика, а не требование.

Вы можете опустить класс body .

Encoding/Charset

Вы должны добавить кодировку в документ. Если вы хотите использовать UTF-8 (рекомендуется), добавьте в качестве первого дочернего элемента элемента head .

элемент title

Отсутствует необходимый элемент title . Добавьте его как дочерний элемент head : Vertretung während Reise – 1. Декабрь 2012

`Обратный адрес`

Здесь правильно использовать . Однако дата не является частью адреса, поэтому ее нельзя разделять br . Вместо этого поместите дату в отдельный элемент. HTML5 предлагает элемент time .

Поскольку это ваш адрес (а не адрес получателя), его следует заключить в элемент address .

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

`Salution / Anrede`

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

`Приветствия`

Здесь правильно использовать элемент br для отделения приветствия от вашего сообщения. Но не используйте несколько br элементов только потому, что вы хотите добавить больше интервалов. Используйте только один и примените к нему класс, чтобы вы могли присвоить ему более высокое вертикальное поле (CSS).

Также включите это в p вместо div .

`Пример`

Таким образом, ваше письмо может выглядеть так:

   <голова>Vertretung während Reise – 1 декабря 2012 г.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/c/b/8cb840c1c5c8a77da251491fcd92ab6f.png' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/c/b/8cb840c1c5c8a77da251491fcd92ab6f.png' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/html-pismo-primer-vyorstka-html-pisem-polnaya-instrukcziya-ot-agentstva-email-soldiers-2.html" data-text="Html письмо пример: Вёрстка html-писем — полная инструкция от агентства Email Soldiers" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/html-pismo-primer-vyorstka-html-pisem-polnaya-instrukcziya-ot-agentstva-email-soldiers-2.html" data-text="Html письмо пример: Вёрстка html-писем — полная инструкция от агентства Email Soldiers" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/html-pismo-primer-vyorstka-html-pisem-polnaya-instrukcziya-ot-agentstva-email-soldiers-2.html" data-text="Html письмо пример: Вёрстка html-писем — полная инструкция от агентства Email Soldiers" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/html-pismo-primer-vyorstka-html-pisem-polnaya-instrukcziya-ot-agentstva-email-soldiers-2.html" data-text="Html письмо пример: Вёрстка html-писем — полная инструкция от агентства Email Soldiers" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/sajt-2/sozdanie-sajta-na-modx-revolution-s-nulya-sozdanie-sajta-modx-revolution-poshagovaya-instrukcziya.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Создание сайта на modx revolution с нуля: Создание сайта modx revolution;;пошаговая инструкция</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/kak-umenshit-razmer-fajla-v-fotoshope-umenshit-kartinku-adobe-photoshop-sajt-nn-sozdanie-sajtov-nizhnij-novgorod.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Как уменьшить размер файла в фотошопе: Уменьшить картинку: Adobe Photoshop — «Сайт НН» создание сайтов Нижний Новгород</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-pismo-primer-vyorstka-html-pisem-polnaya-instrukcziya-ot-agentstva-email-soldiers-2.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='26016' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_3dab380c8ffffb50a8efcfcf0fd57487.js"></script></body></html>