Анатомия идеального шаблона email-письма

Что значит “указать данные в теле письма”? что такое “…

тело письма это само содержание, – текст. Который после реквизитов.

Есть заголовок письма, и тело письма.
В заголовке – адресат, тема, копии.
В теле – содержимое самого письма.

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

Одна из особенностей – наличие заголовка mime-version.
Этот заголовок указывает стандарт, которому соответствует тело сообщения.
Сообщения, соответствующие mime обязаны содержать такое поле заголовка со следующим текстом:
mime-version: 1.0

Что мне было интересно

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

Основные выводы

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

Есть ответ: что значит “указать данные в теле письма”? что такое ” тело письма” и как это делать?

Выравнивание

image

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

Высота строки

Ниже представлены основные выводы, касающиеся высоты строки.

  • При размере шрифта в 16 пикселей самой популярной высотой строки была высота в 24 пикселя;
  • Среднее отношение высоты строки к «высоте» (общему объему) текста составило 1,51 (у Константина – 1,46);
  • При 450-пиксельной ширине строки отношение высоты строки к высоте текста снижается до 1,49;
  • При 320-пиксельной ширине строки отношение высоты строки и к высоте текста снижается до 1,45;
  • 22% компаний, попавших в исследование, уменьшают высоту строки для писем, адаптированных под мобильные устройства;
  • 52% устанавливают высоту строки в пикселях;
  • 24% устанавливают высоту строки в процентах;
  • Отношение длины строки к ее высоте в среднем составляло 23,1 (у Константина – 24,9);
  • Отношение величины отступа между абзацами к высоте строки в среднем составляло 1,38 (у Константина – 1,39).

Стандартное правило: высота строки должна быть в 1,5 раза больше размера шрифта. То есть если размер шрифта – 16 пикселей, значит, высота строки составит 24 пикселя. Проведенное исследование подтверждает это правило: отношение высоты строки к размеру шрифта составило 1,51. Чем больше длина строки, тем большей можно сделать ее высоту.

Тим Браун (Tim Brown) называет такое изменение высоты «плавным» или «текучим». Джейсон Санта Мария (Jason Santa Maria ) поясняет: «Когда ваш взгляд доходит до конца строки, вам нужно увидеть промежуток между строками и понять, где находится следующая строка, чтобы не потеряться… Если строки становятся короче, значит, их можно разместить немного плотнее». Мы также отметили снижение этого отношения при переходе на мобильное устройство – оно упало с 1,51 до 1,45.

Высота строки в рассылке NYT Cooking снижается с 30 пикселей на ПК до 25 пикселей на смартфоне (отношение высоты строки к размеру шрифта снижается с 1,6 до 1,5)

52% дизайнеров email-рассылок устанавливает высоту строк в пикселях. Некоторые компании, например, Semplice, меняют высоту строки для разных элементов письма. 24% выставляют высоту в процентах. К примеру, Lagom устанавливает высоту 150%.

Оливер Райхенштайн (Oliver Reichenstein) считает, что 140% – «неплохой ориентир», хотя многое зависит от выбранной гарнитуры. Пол Эйри советует выставлять высоту в процентах, потому что в пикселях сложнее подобрать нужное соотношение. Тем не менее, разработчики, скорее всего, привыкли к пикселям, так как они поддерживаются многими почтовыми клиентами.

Методология

Учитывая тот

, что около 50% всех электронных писем открывается с мобильных устройств, все письма, выбранные для исследования, были адаптивными, состояли из одной колонки основного текста и заголовка. Я собрала статистику по трем типам устройств в зависимости от ширины экрана: большим (ПК), средним (450 пикселей) и маленьким (320 пикселей).

Google-таблица с полным обзором по каждому письму

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

Как письмо отображается на трех типах устройств в приложении WhatFont

Повышайте узнаваемость: оформление письма

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

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

  1. Выбирайте стандартные шрифты (их еще часто называют безопасными, поскольку они правильно отображаются на большинстве устройств).  Например, Times New Roman или Arial. Текст корректно отобразится у всех получателей.

  2. Используйте не больше 3 цветов. Можно отдать предпочтение классическому сочетанию светлого фона и темного текста – так написанное воспринимается легче. 

  3. Применяйте стандартный размер шрифта 14–16 px для основной части письма, а для заголовка вдвое больше, 28–32 px. Эта распространенная комбинация привычна для пользователей и помогает структурировать информацию в письме. 

Сервис Pepper.ninja в рассылках использует фирменные цвета и шрифты своего сайта

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

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

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

Позаботьтесь о мобильных читателях: адаптивность

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

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

:/>  6 приложений для установки видео на фон рабочего стола в Windows 10

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

Поиск партнеров для участия в проекте

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

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

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

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

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

Научитесь присоединять к представительскому письму файл.

  1. Щелкните кнопку Присоединить, выберите любой текстовый файл.
  2. После того как файл появится в строке Вложение заголовка письма щелкните кнопку Отправить письмо.
  3. Через 2-3 минуты проверьте почту и, получив это письмо, раскройте вложенный файл, дважды щелкнув его имя в заголовке письма. В этом случае файл откроется в отдельном окне с помощью соответствующей программы.

После выполнения данного упражнения скопируйте текст этого представительского письма в документ Microsoft Word с помощью сочетаний клавиш скопировать (Ctrl C) и Вставить (Ctrl V) и сохраните в рабочей папке.

Размер шрифта

Ключевым фактором в выборе размера шрифта является расстояние [от читателя] до экрана устройства. Экран ПК располагается на расстоянии вытянутой руки, поэтому 20-пиксельный текст письма от Robocat, набранный шрифтом Helvetica (на фото справа), читать проще, чем рассылку Patagonia с 14-пиксельным Muli (на фото слева).

На расстоянии текст размером 20 пикселей (справа) воспринимается легче, чем текст размером в 14 пикселей (слева)

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

Электронное письмо создается по тем же правилам, что и традиционное. В его структуре выделяются заголовок, “тело” и подпись.

Заголовок включает электронный адрес получателя, адрес, по которому будет передана копия письма (Сс:), а также кратко сформулированную тему письма. “Тело” письма – это собственно текст письма с обращением и приветствием. Электронная подпись может быть короткой (в неформальной переписке) или более подробной.

Для создания электронных писем в Outlook Express используется набор команд и специальные инструменты, которыми пользуются при оформлении и редактировании писем. Например, на панели инструментов программы находится кнопка Проверка орфографии, кнопки Отправить сообщение и Присоединить файл.

Для создания и отправки письма:

  1. Щелкните значок Создать на панели инструментов.
  2. Оформите заголовок письма (заполните поля Кому, Тема ) и введите текст.
  3. При необходимости присоедините к письму файл (щелкнув кнопку Присоединитьи выбрав нужный файл).
  4. Щелкните кнопку Отправить.

Текст письма можно вводить непосредственно в “теле” письма, или загрузить уже готовый текст с помощью команд основного меню Вставка/Текст из файла (при этом текстовый курсор должен находиться в “теле” письма).

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

Проведите тестирование работы с электронной почтой в Outlook Express.

  1. Без подключения к серверу (“вне линии” – offline) создайте новое сообщение.
  2. В качестве адреса получателя введите собственный электронный адрес.
  3. В “теле” и в теме письма напишите слово test.
  4. Отправьте сообщение.
  5. Через пару минут примите новые сообщения. Найдите свое тестовое сообщение и откройте его.

Для чтения сообщений, поступивших из Интернета, щелкните кнопку Доставить, а затем, после выгрузки сообщений из сети, – папку Входящие в окне Outlook Express. Если щелкнуть один раз в нужной строке списка сообщений, то сообщение откроется в окне просмотра, если два раза, то для просмотра сообщения откроется дополнительное окно.

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

Средний размер шрифта в заголовках

  • 30 пикселей – самый популярный (18%) размер в заголовках на ПК (30 пикселей – также и медианный размер, а средний размер – 31,6 пикселя);
  • Размеры шрифта в заголовках на ПК делились на две группы: от 24 до 26 пикселей и от 28 до 36 пикселей;
  • Шрифт в заголовках в среднем был ровно в два раза крупнее шрифта в теле письма (31,6 и 15,7 пикселя соответственно);
  • Шрифт в заголовках на ПК в среднем был в 1,2 раза больше высоты строки (это соотношение варьировалось от 0,65 до 1,8);
  • Ссылки не крепились к 62% основных заголовков на ПК;
  • 68% создателей рассылок не меняли размер шрифта в заголовке при переходе с ПК на 450-пиксельный формат ширины письма; 87,5% из тех, кто менял размер шрифта, уменьшали его;
  • 64% выбирали одинаковые размеры шрифта для заголовка на ПК и на мобильных устройствах (один масштаб);
  • На мобильных устройствах для основного заголовка чаще всего выбирали размер в 30 и 32 пикселя (оба по 12%);
  • Средний размер шрифта в основном заголовке на мобильном устройстве (320 пикселей) составил 28,48 пикселя (медианный размер шрифта был 26,5 пикселя)
  • Отношение размера шрифта в заголовке к высоте строки в среднем составляло 1,17 для мобильных устройств;
  • Только 14% использовали в заголовке одни прописные буквы (как правило, это были магазины одежды);
  • 72% использовали подзаголовки;
  • Средний размер шрифта подзаголовков – 27,9 пикселя (для десктопа).
:/>  Скачать бесплатно набор карточных игр для Windows 10

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

64% использовали одинаковый масштаб в заголовках на всех типах устройств. Если говорить об оставшихся 36%, то 87,5% из них уменьшали масштаб на мобильных устройствах. К примеру, в рассылке от Mr Porter размер шрифта на мобильном устройстве уменьшен с 30 до 25 пикселей – небольшое изменение, которое делает стиль более элегантным, в отличие от громоздких заголовков на ПК.

Размер шрифта заголовка в рассылке Mr Porter снижается с 30 пикселей на ПК до 25 пикселей на мобильном устройстве

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

Шкала из «Основ стиля в типографике» Роберта Брингхерста. Изображение: Retinart

В качестве альтернативы использования размера шрифта для визуального выделения, Марко Дугоньич (Marko Dugonjić ) предлагает менять стиль текста: например, курсив, все прописные или капитель [англ. small caps]. Посмотрите его демо-вариант (раздел «Выделение со сменой стиля»).

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

Структура шаблона

Не рассчитывайте, что сможете отделаться парой блоков с Lorem Ipsum и правильными размерами для изображений. Идеальный шаблон требует проработки, тестирования структуры и дизайна. Избегайте «кирпичей» (крупных сплошных блоков) текста – с первого взгляда читатель должен понимать, о чем узнает из письма.

Всего можно выделить три основных составляющих макета:

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

  2. Основная часть или тело письма – здесь, как правило, находятся различные блоки: баннеры, текст, картинки, кнопки с призывом к действию.

  3. Футер – самая нижняя часть письма, где, помимо обязательной информации, например ссылки отписки, часто размещают иконки социальных сетей.

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

Текст под заголовком

Записи под заголовком находятся вверху письма. Это первый текст, который пользователи обычно видят на своих смартфонах, вместе с именем отправителя и темой. В своем исследовании я разграничиваю понятия инструктивной надписи, например, «Смотреть онлайн», и отрывка текста, который более информативен и зачастую дополняет тему письма. Litmus подробно рассматривает этот вопрос в своем

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

  • 66% создателей рассылок используют текст под заголовком на ПК;
  • 36% включают в него только инструкции, 33% – инструкции и отрывок письма, 30% – только отрывок;
  • Самый популярный размер текста под заголовком на ПК – 11 пикселей (33%), далее 12 пикселей (18%) и затем 10 пикселей (12%) (среднее значение – 12,3 пикселя);
  • Размеры шрифта текста под заголовком варьируются от 9 до 18 пикселей;
  • Отношение размера текста под заголовком к размеру основного текста в среднем составляло 0,78;
  • Отношение размера текста под заголовком к высоте строки на ПК в среднем составляло 1,11;
  • 76% использовали в тексте под заголовком гарнитуры без засечек;
  • Самым популярным шрифтом без засечек был Arial, с засечками – Georgia;
  • В текстах под заголовком использовались 22 разных цвета, самый популярный – #000000, затем #999999;
  • 82% поддерживали текст под заголовком на мобильных устройствах, 18% его скрывали;
  • Самый популярный размер текста под заголовком на мобильных устройствах – 11 пикселей (40%), далее 16 пикселей (22%) и затем 14 пикселей (18%) (средний размер шрифта – 12,9 пикселя);
  • Размеры шрифтов текста под заголовком на мобильных устройствах варьировались от 8 до 16 пикселей;
  • 71% сохраняли размер при переходе на мобильные устройства, 22% увеличивали шрифт, 7% уменьшали;
  • Отношение размера текста под заголовком к размеру основного текста на мобильном устройстве в среднем составляло 0,85.

image

Текст под заголовком отображается вместе с именем отправителя и темой письма

Тело письма


На сайте Butterick’s Practical Topography

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

Формат строки

Еще один фактор, о котором нельзя забывать при учете пропорций шрифта – это

строки, то есть ширина тела письма. Формат строки измеряется либо в пикселях, либо в количестве символов в строке – разработчики электронных писем обычно не работают с кеглем. Роберт Брингхерст (Robert Bringhurst)

использовать в строке текста письма с одной колонкой, адаптированного под ПК, от 45 до 75 символов, идеальный вариант – 66 символов (с учетом пробелов).

Я провела небольшой эксперимент со шрифтом Georgia размером 16 пикселей при среднем формате строки в 540 пикселей. При таких параметрах число символов в строке будет чуть больше 70, и это не так плохо, если учесть, что 75 – максимум. Но в идеале лучше сократить число символов до 66, при этом ширина строки оказывается в районе 480 пикселей.

Шрифты с засечками и без засечек

  • 74% шрифтов, которые использовались в заголовках, были без засечек;
  • 64% шрифтов, которые использовались в теле письма, были без засечек;
  • Самые популярные шрифты без засечек в заголовках – Helvetica (16%) и Arial (14%);
  • Самые популярные шрифты с засечками в заголовках – Georgia (14%) и Merriweather (4%);
  • Самые популярные шрифты без засечек в теле письма – Helvetica или Neue Helvetica (20%), Arial (10%);
  • Самые популярные шрифты с засечками в теле письма – Georgia (24%), Merriweather и Times (по 4% каждый);
  • Шрифты с засечками на 10% чаще использовались в теле письма, чем в заголовках;
  • В теле письма встречались всего 5 различных шрифтов с засечками и 15 различных шрифтов без засечек;
  • В заголовках встречались 24 разных типа шрифтов, из которых 16 встречались по одному разу;
  • В теле письма встречались 20 разных типов шрифтов, из которых 11 встречались по одному разу;
  • Times New Roman оказался непопулярен: его не использовали ни в одном из заголовков.
:/>  Что такое команды Tasklist и Taskkill в Windows 10? - zanz

Helvetica стала самым популярным шрифтом в заголовках и использовалась в 16% случаев, как, например, в рассылках

. Georgia чаще всего использовалась в теле письма (24%), как, например, в рассылках

. Набирают популярность две гарнитуры из набора Google Fonts – Merriweather и Open Sans, которые можно увидеть в рассылке

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

Константин отмечает, что шрифты с засечками стали использоваться намного чаще в основных текстах веб-сайтов (61,5%). Наше исследование показало, что для писем этот показатель составляет 36%. Возможно, в своей работе он больше изучал новостные сайты, в которых чаще встречаются шрифты с засечками.

Кроме того, в рассылке редко встречается много текста, так как основной контент обычно располагается на посадочной странице. Интересным примером является сайт Крейга Мода (Craig Mod), который использует шрифт с засечками Lora из Google Fonts как в заголовках, так и в теле письма.

В 36% случаев в теле письма используются шрифты с засечками, в 64% – шрифты без засечек

Для выбора гарнитуры рекомендую прочитать пособие «Комбинируем гарнитуры» и статью «Классные комбинации шрифтов». Помимо этого, Пол Эйри (Paul Airy) пишет о том, как комбинировать шрифты в email-рассылке. И если вы думали, что в письмах не встречаются веб-шрифты, то вы ошибаетесь.

Элемент 1: хедер

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

«Спортмастер» в своих рассылках дает сокращенную версию меню интернет-магазина

Элемент 2: тело письма

Можно условно разделить на части.

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

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

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

Баннер должен удержать внимание, как только пользователь открыл рассылку

Или интегрировать предложение и кнопку с баннером, как это сделал «Связной».

На первом экране все четко: тайтл, призыв, дедлайн и призыв к действию

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

Авторские гифки все чаще появляются в email-рассылках

2. Приветствие и персонализация. Продумайте, как вы будете обращаться к подписчикам: можно начать с «Привет, Андрей!», а можно обратиться по-деловому. Определите стиль общения и придерживайтесь его. 

МТС обращается к подписчикам по имени, а Сбербанк использует официальное приветствие по имени и отчеству

3. Основной текст/витрина/предложение и призыв к действию. Все то, ради чего отправляется рассылка.

Если баннер в начале письма сразу не “зацепил” читателя, далее в письме следует привести дополнительные аргументы в пользу совершения им целевого действия. Не пишите в письме лишнего. Всё только по делу! Если вы хотите побудить пользователя к действию: перейти на сайт или начать пользоваться приложением, предусмотрите в шаблоне простой и понятный призыв, чтобы человек понимал, что ему делать после прочтения письма. А для повышения кликабельности настройте кнопку перехода.

Расскажите о спецпредложениях и покажите, на какие товары действует акция, как это сделали «Аэрофлот» и «Связной».

«Аэрофлот» не загромождает шаблон кнопками

Иногда минимализм в шаблоне – это лучшее решение

Добавьте подборку лайфхаков или презентуйте новую коллекцию товаров.

Поэкспериментируйте с текстом и оформлением витрины, когда презентуете новый продукт

Если вы рассказываете о продукте, не забудьте показать его достоинства, рассказать, в каких ситуациях он пригодится. Это поможет читателю осознать потребность и усилит CTA (call to action, призыв к действию).

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

В рассылках GeekBrains использует призыв к действию в виде кнопки

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

Элемент 3: футер

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

Заключение

Изначально я хотела узнать, как сайты вроде iA, Fray, Medium и Pelican Books создают такие «эталонные» примеры подбора типографики, и попытаться использовать их идеи как основу для разработки гайдлайнов по дизайну email-рассылок. К примеру, может ли существовать четкая связь между размером шрифта и величиной отступа на мобильных устройствах?

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

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

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

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

Оставьте комментарий

Adblock
detector