Заинтересованность аудитории зависит не только от контента, но и от способа его подачи. Другими словами, важно и то, О ЧЁМ вы пишете, и то, КАК вы пишете.
Хотите сделать письмо более стильным? Попробуйте шрифты, которые бросаются в глаза. Выберите шрифт, который отражает настроение письма, и не забудьте убедиться, что он будет красиво и правильно отражаться на компьютерах и мобильных устройствах подписчиков. С возможностями вёрстки HTML рассылку сделать проще простого, даже если вы не умеете писать код самостоятельно. Есть веб-сервисы, такие как Google Fonts, которые выкладывают в общий доступ готовый код, который вам надо будет просто добавить в рассылку по определённым правилам. Будьте креативными, а удобный онлайн-сервис бесплатных веб-шрифтов от Google поможет вам в этом.
Используйте шрифты вместо картинок, чтобы отправить рассылку e mail с быстрой и правильной загрузкой
Почему при вёрстке в HTML email рассылок текст лучше картинки?
- У подписчика может стоять блокировка картинок в email , и, чтобы увидеть картинки, он должен будет снять эту блокировку. А шрифты отображаются в любом случае.
- Использование шрифтов из онлайн-коллекции уменьшает время загрузки письма. Не имеет значения, сколько раз в письме используются веб-шрифты: при загрузке происходит всего один запрос к серверу, на котором хранится шрифт. С картинками дело обстоит иначе: для подгрузки каждой картинки нужен отдельный запрос, поэтому письмо загружается медленнее. Если у подписчика медленный интернет, то он может просто закрыть письмо. Поэтому готовые html шаблоны для email рассылок, состоящие из одних картинок, не всегда приносят лучшие результаты.
- Даже самая качественная картинка с высоким разрешением будет выглядеть менее чётко и читабельно, чем текст.
Применяйте в письмах веб-шрифты Google
Попробуйте преобразить шаблон вашего письма с помощью веб-шрифтов Google! Расскажем подробнее о том, что это за шрифты, и почему они так хороши.
Шрифты Google Fonts – это качественные шрифты высокого разрешения, которые можно добавлять на сайты или в email.
Преимущества Google Fonts:
- Большой выбор бесплатных веб-шрифтов для использования в коммерческих и некоммерческих целях.
- Применить шрифт к тексту письма в HTML-формате очень легко: просто следуйте нашей инструкции из 6 пунктов, опубликованной чуть ниже.
- Шрифты Google поддерживаются большинством почтовых программ, включая Apple mail, Outlook 2000/2011, Lotus Notes версий 8 и 8.5, Thunderbird, Android 2.3/4.2 и всеми устройствами на iOS.
Если у подписчика стоит блокировка изображений, то веб-шрифт не отобразится. Вместо него подписчик увидит стандартный шрифт, например, Sans Serif. В любом случае текст будет читаемым.
Как использовать в HTML-письмах веб-шрифты Google
Если вы пишете письма в формате HTML, следуйте шести пунктам нашей инструкции, и вы сможете добавить веб-шрифты Google в текст рассылки.
Шаг 1
Перейдите по ссылке https://www.google.com/fonts и выберите подходящий шрифт. Для примера мы возьмем Shadows Into Light.
Шаг 2
Когда вы определитесь со шрифтом, нажмите Quick use.
Шаг 3
Слева появится вот такое окошко с HTML-кодом:
Здесь напишите ваш заголовок
Готово! Вот как будет выглядеть ваш заголовок в готовом письме:
Другие веб-шрифты
Кроме Google Fonts есть и другие интересные веб-шрифты, которые вы можете взять для письма, чтобы не ограничиваться надоевшими Arial и Times New Roman.
Font-family: Arial, Helvetica, sans-serif; font-family: Georgia, serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-family: "Times New Roman", Times, serif; font-family: "Arial Black", Gadget, sans-serif; font-family: "Comic Sans MS", cursive, sans-serif;.t.c. font-family: Impact, Charcoal, sans-serif; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: "Courier New", Courier, monospace;
Хотя большинство почтовых программ поддерживает стандартные веб-шрифты, есть и такие, у которых нет такой функции. В этом случае веб-шрифт будет заменен на универсальный. Как видно чуть выше, почти каждая строка заканчивается упоминанием шрифта Sans Serif, который поддерживается всеми почтовыми программами.
Подводим итоги по веб-шрифтам
Все хотят, чтобы их письма выделялись среди остальных рассылок, заполняющих почтовый ящик подписчика. Стандартные веб-шрифты и особенно веб-шрифты Google – это отличный способ привлечь внимание читателя. Не захламляйте письмо ненужными картинками вместо заголовков – лучше пользуйтесь веб-шрифтами. Это освежит письмо, уменьшит время его загрузки и улучшит читабельность.
Как выбрать идеальный шрифт? Попробуйте А/В тестировать разные шрифты, и вы найдёте тот, который лучше всего соответствует содержанию письма и характеру аудитории.
Хочется сказать умельцам, которые предпочитают самостоятельно писать скрипт email рассылки : 2016 год на дворе – ваше время стоит дороже! Зачем изобретать велосипед, если все удобные инструменты массовых email рассылок уже есть в удобном и недорогом сервисе Mailigen? Просто загрузите свою базу и начинайте создавать профессиональные рассылки за считанные минуты.
Если вам нужна консультация профессионалов по поводу использования веб-шрифтов в коде письма, пожалуйста, свяжитесь с нами . Если вы хотите дизайн письма «под ключ», то для вас работает наша Фабрика дизайнов . Обратитесь к нам и получите стильную email рассылку.
Можно только если использовать реальный текст в HTML-версиях писем.
При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.
Основы типографики
Одна из главных задач при верстке почтовых рассылок заключается в том, чтобы убедиться, что почтовые клиенты и движки рендеринга не делают с письмами ничего странного. Когда дело касается текста, то решить большую часть возможных проблем можно с помощью добавления пары стилей. Например, при использовании подхода можно применять их на уровне ячейки в таблице:
К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).
Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в и использовать инлайн-стили:
В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.
Использование веб-шрифтов
Данный метод хорошо дизайнер Пол Эйри (Paulr Airy). Его суть заключается в использовании веб-шрифтов, которые не установлены на устройстве пользователя. Делается это с помощью их включения в CSS. В вебе этот метод давно и успешно применяется, но среди email-дизайнеров только набирает популярность.Существует несколько способов включения веб-шрифтов, но Пол рекомендует использовать внешний файл со стилями, который используется для «вытягивания» шрифтов с сайтов вроде Google Web Fonts.
Затем в инлайн-стилях можно добавить нужный шрифт в декларацию font-family:
Теперь в почтовых клиентах, которые поддерживают веб-шрифты, текст будет отображаться с помощью выбранного заранее шрифта. В противном случае, будут использоваться перечисленные альтернативные шрифты - у нас это Helvetica, Arial или установленный шрифт без засечек.
| Поддержка веб-шрифтов в почтовых клиентах через ссылку на внешний файл стилей
|
|
| Apple Mail 6 |
|
| Lotus Notes 8 |
|
| Outlook 2000 |
|
| Outlook 2011 on Mac |
|
| Thunderbird |
|
| iPad |
|
| iPhone |
|
| Android 2.3 |
|
| Android 4.2 |
|
К сожалению, Outlook не станет отображать наши альтернативные шрифты (кто бы сомневался, конечно). Вместо этого, он проигнорирует все относящиеся к ним стили и отобразит текст с помощью Times New Roman. Но и с этим можно справиться с помощью специального CSS-класса - он будет выделять нужный текст через условные комментарии передавать Outlook информацию об используемом наборе шрифтов.
Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.
Многоколоночный вид без табличных ячеек
Пол также говорит о нежелательности использования для размещения текста несколько колонок-столбцов. Однако поскольку большинство писем верстают в , в котором всегда есть столбцы, то напрашивается простое использование соседних ячеек для отображения текста. Но что, если нам нужно добиться «перетекания» текста из одного столбца в другой, вместо «хардкодинга» контента в конкретные ячейки?Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.
С помощью этого свойства можно задать число столбцов, на между которыми будет разбиваться текст. Вот как выглядит код:
Теперь вне зависимости от объёма текста, он будет естественным образом разбит между двумя столбцами. В том случае, если почтовая программа, в которой открывается письмо, не поддерживает column-count, сообщение отобразится в одноколоночном виде.
Как сказано выше, с поддержкой как раз все не очень хорошо:
Иногда с помощью различных лайфхаков (например, применение стилей к тегу параграфа) удается заставить отображать письма с column-count и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.
Любой секретарь, на которого возложена обязанность заниматься почтой, подтвердит, что эти две задачи – самые затратные по времени, и попытка выиграть на каждом письме хотя бы по полминуты вполне оправдана и стоит определенных усилий. Возможности знакомой всем программы Microsoft Word позволяют довольно быстро справиться с надписыванием конвертов. Освоив эту нехитрую функцию, можно сразу получить конверт не только со всеми необходимыми реквизитами, но и оформленный в фирменном стиле организации.
Немаловажный аспект: потратиться придется только на конверт и краску в принтере, не обращаясь при этом в типографию.
Для работы нам понадобится вкладка Рассылки в верхнем меню MS Word (рис. 1), а также абсолютно чистые, без размеченных полей, конверты. Расположение реквизитов на конвертах разного размера уже заложено в программу, поэтому разметка не понадобится.
Дополнительный плюс: чистые конверты продаются в любом магазине канцтоваров, поэтому стоять в очереди на почте, чтобы их купить, не нужно.
Указание адреса отправителя
Обыкновенный почтовый конверт требует от отправителя заполнения следующих реквизитов:
· имя (наименование) и адрес отправителя;
· индекс получателя;
· имя (наименование) и адрес получателя.
Почта России закрепила правила написания адресов на своих отправлениях в Порядке приема и вручения внутренних регистрируемых почтовых отправлений (утв. приказом ФГУП «Почта России» от 17.05.2012 № 114-п):
«4.39. Адреса на почтовых отправлениях, сопроводительных бланках к посылкам, сопроводительных бланках «Е 1-в», пересылаемых в пределах Российской Федерации, должны быть указаны на русском языке и арабскими цифрами, а пересылаемых в пределах территории республик в составе Российской Федерации могут оформляться на государственном языке соответствующей республики при условии повторения адресов на русском языке.
Реквизиты адреса пишутся в следующем порядке:
· для юридического лица – полное или краткое наименование, для физических лиц – фамилия, имя, отчество;
· банковские реквизиты (для почтовых переводов наложенного платежа, направляемых юридическому лицу или принимаемых от юридического лица): ИНН, корреспондентский счет, наименование банка, расчетный счет, БИК;
· название улицы, номер дома, номер квартиры;
· название населенного пункта (города, поселка и т.п.);
· название района;
· название республики, края, области, автономного округа (области);
· почтовый индекс;
· телефон получателя (отправителя) (для отправлений EMS, МКПО)».
Наименование и адрес отправителя, в отличие от остальных данных, информация постоянная. Ее можно внести в программу.
Для этого нужно нажать на круглую кнопку Office в левом нижнем меню экрана и в выпавшем меню нажать на кнопку Параметры Word (рис. 2).
Рис. 2. Кнопка Параметры Word
В открывшемся окне слева кликаем на команду Дополнительно и прокручиваем правое поле вниз, до группы Общие . Там находится поле Почтовый адрес . Заполняем его и сохраняем, нажав ОК (рис. 3).
Рис. 3. Пример заполнения поля Почтовый адрес
Теперь программа запомнила обратный адрес отправителя и автоматически будет указывать его на конвертах.
Готовимся указать индекс получателя
Индекс получателя, написанный в нижней левой части конверта, относится к обязательным реквизитам почтового отправления. Без него оператор на почте, скорее всего, не примет письмо. Мы будем действовать по правилам и снабдим наши будущие конверты индексом, написанным по всем правилам почтовой каллиграфии.
Найти в Интернете шрифт для написания почтовых индексов очень просто, задав соответствующий поисковый запрос.
Скачать шрифт можно бесплатно, однако настоятельно рекомендуем перед скачиванием файла не торопиться и проверить его на вирусы.
Файл шрифта имеет расширение.ttf. Чтобы он отображался среди всех шрифтов Word, нужно открыть папку Мой компьютер , далее зайти в Панель управления , найти папку Шрифты и переместить в эту папку скачанный файл.
Надписывание конверта
Рис. 4. Окно Конверты и наклейки
Обратите внимание: адрес отправителя уже указан в соответствующем поле этого окна. Его можно и не отображать на конверте: для этого достаточно поставить галочку в чекбокс Не печатать . Но мы не рекомендуем этого делать, иначе могут возникнуть проблемы при отправке писем на почте. Адрес отправителя – обязательный реквизит.
Чтобы задать параметры конверта, нужно нажать на кнопку Параметры . В очередном открывшемся окошке доступны две вкладки: Параметры конверта и Параметры печати.
Во вкладке Параметры конверта задается размер конверта, на котором будет производиться печать; формат и размер конверта в миллиметрах указаны тут же (рис. 5). Программа также покажет схему расположения реквизитов на выбранном формате. Сразу же можно задать параметры текста адресов: шрифт и размер. Не забываем сохранять изменения, нажимая на ОК .
Рис. 5. Вкладка Параметры конверта
Вкладка Параметры печати , во-первых, позволяет выбрать принтер, на котором будет производиться печать, во-вторых, показывает, как именно следует расположить конверт в лотке для бумаги (рис. 6).
Рис. 6. Вкладка Параметры печати
Задав все нужные параметры конверта и печати, можно вернуться в окно Конверты и наклейки и нажать на кнопку Добавить , чтобы посмотреть на электронную версию готового конверта. Не хватает только индекса. Дважды кликнув мышкой по белому полю в том месте, где должен быть расположен индекс, пишем его и изменяем шрифт на тот, что ранее мы подготовили для этой цели. Конверт готов (рис. 7). Можно смело класть в лоток подачи бумаги принтера чистый конверт и отправлять документ на печать.
Рис. 7. Готовый конверт
Итак, минимальная цель достигнута: потратив всего несколько минут, мы навсегда решили проблему указания на конверте обратного адреса, а что касается индекса и адреса получателя, то их можно без всяких усилий добавлять в соответствующие поля на конверте из почтового реестра или списка рассылки с помощью элементарной функции «копировать-вставить». На практике на подготовку конверта по этой инструкции уходит меньше минуты.
Красивые конверты в фирменном стиле можно подготовить специально для праздничных рассылок к государственным и профессиональным праздникам. Самое главное, что работа по созданию конвертов в программе Word только кажется сложной. На самом деле это очень просто, а время, сэкономленное благодаря знанию этой функции, – бесценно.