Верстка email рассылок от а до я для чайников

Вставка текста в html-шаблон письма

Для вставки текста используем следующую конструкцию:

Свойства шрифта добавляем в span. Чтобы предлог не был оторван от слова, используйте символ неразрывного пробела: Для ссылок оборачиваем это ещё и в тег а, и тоже дублируем свойства. У ссылок необходимо указывать атрибут target=”_blank”:

Изображения

Для изображений обнуляем border, задаём ширину. Если изображение при адаптации нужно уменьшить, указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Если нужно, можно указать и минимальную ширину.

Фоновые изображения. Пример использования:

Видим таблицу шириной 86% и фиксированной высотой. К столбцу прописаны свойства background-image, background-position, background-repeat, background-size, bgcolor. Внутри таблицы расположена структура, благодаря которой можно добиться отображения фона в Outlook. Внутри этой структуры для Outlook располагается таблица с фиксированной высотой. Также можно увидеть таблицу с высотой 60 px, которая выполняет роль отступа, так как с ними может возникнуть проблема из-за структуры для Outlook.

Кнопки

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

В случаях, когда фон, например, с градиентом или нестандартной формы, но требуется, чтобы текст был текстом, можно использовать фоновое изображение. Но в таком случае придётся пожертвовать отображением в Outlook и не использовать особую структуру для фона, так как отображение будет искривлено. В результате на Outlook будет просто монотонный фон, который будет задан в bgcolor.

Тени

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

Внедряем CSS

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

Как добавить CSS в нашу рассылку? Есть 3 варианта.

1. Заключить тег style внутри head или body. Наверно, это один из самых простых и популярных способов, который прекрасно работает как в письмах, так и на страницах сайтов. Но главные его минут – это перегруженность кода, в результате чего становится сложно найти нужный элемент и отредактировать его. В общем, если хотите облегчить себе дальнейшую работу, второй и третий способы специально для вас.

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

3. Размещаем стили в нашем письме инлайн, т.е. встраиваем его в структуре HTML-документа в качестве атрибута. Да, это неудобно. Да, для простоты придется воспользоваться дополнительной программой или сервисом, внедряющей стили в код. Но неоспоримым преимуществом такого способа является то, что такие стили будут читаться на любом устройстве или приложении.

«Пошло, поехало»

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

К тому же, проблемы могут быть связаны не только с самим устройством, но и с почтовым клиентом, установленном на компьютере или смартфоне. Самые популярные из них – это Outlook, Gmail, Yahoo, iOS, Android, Mozilla Thunderbird и многие др.

Вот, что нужно запомнить:

1. Предпочтение необходимо отдать верстке с помощью таблицы.
2. Прописывать стили нужно либо в самом коде (инлайн), либо в отдельном файле, либо в «головной» части страницы head вместе с остальными медиа.
3. Сокращение свойств в стилях не особо приветствуется, поэтому прописывайте их в развернутом виде.
4. Откажитесь от фанатичного внедрения CSS3 в коде, иначе в дальнейшем могут появиться серьезные проблемы с отображением.
5. Если хотите, чтобы письмо помещалось на экране по ширине абсолютно на любом устройстве, то не превышайте размер в 600-700px.
6. «Играть» лучше со стандартными шрифтами, ведь далеко не все устройства и клиенты могут похвастаться полной «всеядностью».

Обязательные свойства для HTML-тегов

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

border=«0» — толщина рамки в пикселах;cellpadding=«0» — отступ от рамки до содержимого ячейки;cellspacing=«0» — расстояние между ячейками;style=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;-webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;display: block — делает строчный элемент блочным:

alt=»» — обязательное свойство, должно всегда использоваться, можно оставлять пустым;border=«0» — толщина рамки в пикселях (px);width=«100» — ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=«100». Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=«30» и она будет пропорционально менять и высоту и ширину;display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

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

Цвет и фон

Цветовое оформление в рассылке задается с помощью 16-теричных числовых значений в формате HEX, например, #FFFFFF (белый цвет). Сокращение до #FFF не рекомендуется, иначе далеко не все устройства и клиенты смогут распознать это значение, поэтому от него лучше отказаться. По той же причине следует избегать внедрение цветов в формате RGB.

Задавать фон в рассылке следует при помощи атрибутов background=»» и bgcolor=»», используемых в теге table. Применив их внутри других тегов, они не будут распознаваться Gmail, если открыть его в браузере Safari. Также, при работе с фоном, нужно исключить использование некоторых свойств CSS, а именно background-image, background-visibility и background-size.

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

Шрифты в электронных письмах

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

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Не самые красивые шрифты, но они хорошо читаются: подписчик точно увидит весь текст в письме. Фокус «поиграть со шрифтами» не выйдет :). Кстати, стандартные системные шрифты на Android и iOS — это Helvetica и Roboto. Поэтому их тоже можно использовать. В случае чего они заменяются на родной всем Arial. Так как они похожи по начертанию, это не сильно повредит макет, и ничего не поедет.  

Рекомендуемый размер основного текста — 14 px, межстрочный интервал — 1,5.

Используйте несколько текстовых стилей для расстановки акцентов: главный заголовок, основной текст, ссылка, сноска

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

Оптимально, если их будет три-четыре: заголовок, основной текст, текст в футере или сноски, ссылки.

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

Цвет текста

Цвет текста должен быть контрастным к фону. Некоторые дизайнеры считают, что лучше использовать тёмно-серый, например, #333333 к белому фону, так как чтение 100% чёрного текста утомляет глаза. Но это спорное утверждение. Можете почитать статью, в которой автор рассказывает про читаемость, контрастность цвета текста к фону, эволюцию шрифтов в вебе и приводит примеры.

Создание таблиц

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

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

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

Чтобы не допустить ошибок, необходимо после составления таблицы кодов и тегов проводить тестирование каждого из элементов. Это минимизирует риск выполнения операции с ошибкой, и даст возможность посмотреть заранее, как будет выглядеть сообщения на конкретном устройстве, или в определённой программе.

Общий доступ к личной информации

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

Создание адаптивных шаблонов с колонками «от двух к одной»

Использование одноколоночных шаблонов — хороший выход при оптимизации рассылки для мобильных устройств. При этом существуют способы по созданию адаптивных двухколоночных шаблонов, без необходимости использования длинных CSS в media queries.

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

Золотое правило вёрстки писем гласит: «Везде, где только можно, используйте HTML вместо CSS». Степень поддержки CSS различными почтовыми клиентами может значительно различаться, но все они одинаково работают с HTML. Например, атрибуты вроде align=”left” и cellpadding=”10” — гораздо более надежный инструмент, нежели их аналоги в CSS float: left; и padding: 10px;. Именно эти атрибуты будут использоваться при создании писем в формате «от двух к одной колонке».

Вот так подобное письмо может выглядеть в Outlook 2007:

В пример выше использована таблица-контейнер шириной 640px, которая содержит две таблицы 320px, формирующие колонки. У этих столбцов cellpadding=”20“ — это сделано для того, чтобы контент не прижимался к границам.

При вёрстке для веба обычно используют float:left;, чтобы выровнять столбцы. Однако вместо этого можно использоватьalign=”left”. Поскольку ширина таблицы-контейнера равняется или больше совокупной ширины двух вложенных таблиц, то использование HTML хорошо сработает. Ниже представлен упрощенный код подобного двухколоночного шаблона:

<table width="640" border="0" cellpadding="0" cellspacing="0"><tr>    <td>    <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">      <tr>        <td><p>Column Left Content</p></td>      </tr>    </table>    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">      <tr>        <td><p>Column Right Content</p></td>      </tr>    </table>    </td>  </tr></table>

Результат выглядит так:

Таблица-контейнер шириной 640 пикселей, так что шаблон будет двухколоночным. Но в том случае, если ширина экране меньше этого, то контент правой колонки будет «завернут» под левую. Если сделать ширину вложенных таблиц равной 320 пикселям, то при отображении на мобильном устройстве будет получаться одноколоночное письмо, которое совсем не нужно «зумить». Добиться такого эффекта можно с помощью добавления одной строки media query в HTML-код:

<style type="text/css">    @media only screen and (max-device-width: 480px) {        table {             width:320px !important;        }    }</style><table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">

В результате получится адаптивный шаблон, который будет двухколоночным на десктопе и одноколоночным на мобильных устройствах (в дефолтном приложении Mail для iPhone и почтовом клиенте Android).

Адаптивный дизайн email-рассылки

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

Есть несколько вариантов адаптивной вёрстки письма.

С помощью «плавающих блоков»

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

макет письмаАдаптивная вёрстка

С подстраивающимся содержимым

В таком методе при уменьшении экрана в письме уменьшаются картинки, а размер шрифта остаётся прежним

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

С помощью медиазапросов

Mediaquery — это компонент языка CSS. Этот метод позволяет менять расположение объектов при помощи медиазапросов. Не самый лучший способ адаптации для писем, так как далеко не все почтовые клиенты с ними работают.

Клиенты, поддерживающие и не поддерживающие медиазапросы:

Зелёным обозначены почтовые клиенты, которые поддерживают медиазапросы, красным — те, что не поддерживают. Данные взяты отсюда: campaignmonitor.com

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

Ещё я бы посоветовала почитать книгу Люка Вроблевски «Сначала мобильные!». В ней доступно рассказывают о проектировании сайтов с учётом отображения на мобильных и планшетах, приводятся примеры и рекомендации по вёрстке. Этот подход можно применять и в дизайне писем.

Ошибки в адаптивном дизайне писем

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

Например, в этом письме теги задумывались в два столбца:

Теги отображаются в два столбца

Но в результате письмо выглядело вот так:

Письмо с ошибкой в вёрстке

Дело в том, что между плавающими блоками

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

Мастер-шаблон для интернет-магазина

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

Мы сделали варианты с иконками и без. И текст, и иконки можно менять.

Этот блок нужен для промо-рассылок, чтобы разделить товарную сетку.

4. Товарная сетка

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

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

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

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

Также нужны варианты отображений цен со скидками и без, если такие товары предусмотрены на сайте.

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

6. Товарная сетка с одним товаром

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

8. Блок с корзиной

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

Мы использовали вёрстку таблицей, чтобы не тратить время на подсчёт количества товаров. Мы просто будем добавлять каждый новый товар на отдельную строку.

9. Блок с категориями товаров

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

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

10. Второстепенный баннер

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

Как видите, каждый мастер-шаблон индивидуален, но при этом есть чёткие правила. Главное, понять, что потребуется в рассылках именно вам.

Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом: Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку. Также необходимо указать нужные стили для ссылок. Для телефона:

Для электронной почты:

1. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

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

1. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height. — решает проблему отображение свойства в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

Ограничение ответственности Администрации сайта

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

4.2. Информация на Сайте постоянно обновляется и в любой момент может стать устаревшей. Администрация сайта не несет ответственности за получение устаревшей информации с Сайта, а также за неспособность Пользователя получить обновления хранящейся на Сайте информации.

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

4.4. Администрация сайта не несет ответственности за возможные противоправные действия Пользователя относительно третьих лиц, либо третьих лиц относительно Пользователя.

4.5. Администрация сайта не несет ответственности за высказывания Пользователя, произведенные или опубликованные на Сайте.

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

4.7. Администрация сайта не несет ответственности за утерю Пользователем возможности доступа к своему аккаунту — учетной записи на Сайте.

4.8. Администрация сайта не несет ответственности за неполное, неточное, некорректное указание Пользователем своих данных при создании учетной записи Пользователя.

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

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

Структура писем

Структура писем практически не отличается от структуры обычной веб-страницы:

Прехедер

В прехедере чаще всего располагаются тема письма и ссылка на веб-версию.

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

Шапка письма (хедер)

Стандартно в шапке письма располагают логотип компании, иногда — контактную информацию и меню. Учтите: если вы добавляете меню в шапку, лучше всего выбрать только самые важные для конкретного письма пункты, а не впихивать всё.

Вот пример шапки письма от «Амедиатеки», здесь просто логотип:

А вот письмо «Ламоды»: здесь и логотип, и информация по накопленным баллам, и меню:

Тело письма

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

Подвал письма (футер)

Обязательная для подвала информация — ссылка на отписку от рассылки. Без неё письма будут попадать в спам. Обычно в подвале также размещают контактную информацию, сноски и ссылки на соцсети.

Как делается адаптивная вёрстка

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

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

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

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

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

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

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

Похожие записи:

Как стримить на twitch: полное руководство Как получить и на что потратить 250 тысяч рублей по социальному контракту в 2021 году? Перепись населения пройдет в 2021 году. рассказываем все, что об этом нужно знать Учредительные документы индивидуального предпринимателя Обзор «яндекс.станция мини»: «алиса» на диете 12 типов миссии человека