Из этой статьи вы узнаете, как сделать письмо для E-mail рассылки на онлайн-конструкторе Wilda. В чем отличие форматов Html и Jpeg, и какой формат подойдет вам больше.
Все мы пользуемся электронной почтой, и часто получаем красивые оформленные электронные письма, содержащие не просто текст, а еще изображения, логотипы, цветные фоны и другие элементы дизайна.
Оформить такое письмо можно двумя способами:
- Создав html версию письма
- Отправив цельное изображение в теле письма.
Остановимся на каждом варианте подробнее чуть ниже, а пока давайте разберемся, что такое Html письмо, и в чем особенности его оформления.
Что такое Html письмо?
Html письмо – это письмо, созданное на языке Html (также, как и сайты в интернете). Если у вас нет достаточных навыков, то самостоятельно создать такое письмо у вас не получится. Для этого вам потребуется помощь профессионального верстальщика, который создаст такое письмо с помощью материалов, предоставленных ему вами: тексты, изображения, структура письма. После создания html письма вам понадобится специальное программное обеспечение для рассылки его адресатам.
Существует достаточно много сервисов, позволяющих самостоятельно создать электронное письмо с помощью готовых шаблонов или используя конструкторы Html писем, а затем отправить его. Минусом этого подхода может стать некорректное отображение вашего письма у некоторых получателей, так как при создании письма может генериться лишний код, либо шаблоны недостаточно хорошо адаптированы под различные почтовые клиенты – программы, собирающие и отправляющие почту, такие как Mail, Yandex, Gmail, Rambler, Outlook,Thunderbird или The Bat.
Та же самая проблема существует и с отображением Html писем на мобильных устройствах. Ведь, по сути, рассылка и есть почти полноценная страница сайта, которая должна быть адаптирована под различные устройства.
Помимо этого, при создании рассылки требуется учитывать ограничения по использованию номенклатуры шрифтов, так как если на компьютере вашего получателя не установлен шрифт, выбранный вами для оформления письма, то он заменится на один из общеупотребительных шрифтов, например, Arial, и ваша дизайнерская задумка может не состояться!
Чем Wilda может вам помочь?
На конструкторе Wilda вы можете:
Создать рассылку в виде изображения и вставить в тело письма
Для этого при создании нового документа выберите тип «E-mail рассылка» или воспользуйтесь подходящим шаблоном. Ширина документа будет 700 px – рекомендуемое значение для успешного отображения письма на мобильных устройствах, а высоту вы можете регулировать в зависимости от контента. После окончания редактирования просто сохраните ваше письмо в виде Jpeg файла.
Для создания веб-версии письма вам достаточно просто опубликовать ваш макет на сайте Wilda, и у него появится собственный адрес в сети.
Создать макет письма для последующей верстки в Html
Если обстоятельства требуют от вас создания Html письма, то с помощью конструктора Wilda вы можете создать макет письма для того, чтобы специалистам было проще понять, что вам необходимо. Вместе с макетом вам останется только передать специалисту исходники изображений и ждать результата!
Подробнее об оформлении электронных писем читайте в статье Как создать письмо для E-mail рассылки.
Создать элементы для Html рассылки
В любом Html письме есть необходимый набор элементов: шапка, подвал, фон или изображения. С помощью онлайн-конструктора Wilda вы можете создавать или редактировать эти элементы, сохраняя каждый в
отдельности в виде файла Jpeg.
Для этого в конструкторе предусмотрено создание документов любых размеров.
Уточните у вашего специалиста необходимые требования к элементам и создайте их на конструкторе.
Вы легко справитесь с этой задачей, особенно если уже создавали для себя какие-нибудь документы. При этом в конструкторе уже будут храниться ваши логотипы, изображения,
фирменные цвета и т.д.
Резюмируя все вышесказанное, конструктор Wilda будет, несомненно, полезен всем, кому необходимо создать красивую и эффектную E-mail рассылку.
В офисе у коллег есть игра “Доведи дизайнера до слёз”. Нет, они не критикуют мои работы и не ругаются за пропущенную ошибку в тексте. Они присылают скриншоты всевозможных email-рассылок, которые приходят на их почтовые ящики. И, к сожалению, тест в этих письмах не прочитать, кнопка с призывом к действию не видна, и письмо настолько "вырви-глаз", что его хочется не то, что закрыть и забыть, но заодно и отписаться, чтобы больше никогда такого ужаса в своей почте не видеть. Дизайн - это не только про картинки и цвета. Это про грамотное расположение всех элементов письма, чтобы помочь подписчику понять, что от него хотят и что ему предлагают сделать. В 2018 году существует множество бесплатных онлайн-инструментов, которые сделают подготовку рассылки не только быстрее, но и качественнее. Вначале вы потратите не один час на подготовку, но это хорошая инвестиция, т.к. на выходе получится письмо, которое подписчику захочется открыть и прочитать снова.
Выбор шаблона
Посмотрите как создатели рассылок придерживаются этих правил:
Если всё ещё сомневаетесь, то загляните в галерею шаблонов Mailigen, там достаточно примеров шаблонов для каждого типа писем: 
Текст
Работа с текстом - это один из самых важных этапов работы над рассылкой. Дизайнеры годами учатся превращать текст в шедевры верстки и показывать его лучшие грани. Но не стоит бояться, понять основы не так долго и сложно. Перед тем как приступить к работе - прочитайте эти небольшие статьи:
- Самые основные правила , без них никуда (в оригинале на английском).
- Несколько комментариев из Ководства Артемия Лебедева.
- Эта из ильяховской рассылки Главреда, там рассказывается о важности работы с заголовками.
- можно увидеть конкретный пример письма с конкретными комментариями от дизайнера (спойлер: в том письме есть ещё что дорабатывать)
Есть несколько видов писем, где работа с текстом крайне важна:
- письма-подтверждения (заказ, бронирование, доставка), т.к подписчик должен быстро прочитать информацию и подтвердить её или отклонить. Хороший пример - подтверждение бронирования на сайте airbnb.com
- контентные письма - вдохновение можете найти на новостных порталах (meduza.io, lenta.ru)
Цвет
Идеально подобрать цвета на глаз дано не каждому, но, хвала программистам, мы живем в век, когда многое за нас могут делать роботы. В том числе и подбирать цвет. Из более чем двадцати ресурсов по подбору цвета я выбрала 3 наиболее интересных:
- Adobe Color CC (color.adobe.com)
Полезен при подборе палитры к конкретному цвету: вводите значение цвета и кулер подберет подходящие цвета.
- Color Hunt (colorhunt.co)
Если стоит вопрос о выборе цветовой палитры, то в этом сервисе почти бесконечное число сочетаний разнообразных цветов. Самая главная проблема - это остановиться на чем-то одном 🙂
Не так давно появился интересный сайт, где нужно выбрать 50 цветов, которые тебе нравятся и по итогу будет составлены палитры, градиенты, варианты оформления фотографий. Попробуйте, может быть это как раз то, что вы давно искали.
Примеры хороших рассылок, где каждый цвет на своем месте:
Фотографии
При изучении информации мозг человека сначала анализирует графическую информацию, а уже потом текстовую. Поэтому важно уделить достаточно внимания поиску подходящей картинки или графики. Бесплатные фотостоки хороший вариант при ограниченном бюджете (только помните, что при использовании необходимо указывать автора - это небольшая плата за использование качественных фото):
Здесь можно найти векторную графику, использование точно такое же, как и в фотостоках - свободное использование при упоминании автора:
Не стоит забывать про иконки:
Проверьте вес фотографии, для письма она должна быть не больше 600 Кб! Иначе письмо будет долго загружаться и, возможно, потенциальный клиент не увидит ваше письмо из-за низкой скорости интернета.
Нужно найти подборки графики начиная от макетов визиток, заканчивая журнальными разворотами и плакатами? Есть отличный сервис с шаблонами. Что полезно - там есть картинки специально для email рассылок! Большинство макетов можно бесплатно загружать после редактирования:
Сервис для создания разной графики. Не так давно там появились и анимации, что, конечно, радует. Есть бесплатные картинки, есть платные, но цена символическая - 0,99$:
Нужно обрезать фотографию? Изменить её контрастность, а фотошоп так и не успели освоить? Этот сервис на порядок проще фотошопа, но набора базовых инструментов должно хватить:
Вдохновение
Если уже поднаторели во всех инструментах, но не хватает идей и каких-то новых решений, то стоит сходить на ресурсы с базами email-шаблонов. Бесконечный поток вдохновения обеспечен (частично примеры для этой статьи взяты оттуда):
- EmailsFresh (emailsfresh.com)
- Really Good Emails (reallygoodemails.com)
- Email Gallery (email-gallery.com)
И, конечно, надо быть в курсе того, что делают конкуренты. Подпишитесь на максимальное число рассылок вашей сферы и смотрите что делают другие.
Пользуйтесь! И не заставляйте дизайнеров плакать, при виде ваших рассылок. Если время не позволяет учиться или просто нет желания “дизайнить”, то наймите человека, который знает своё дело. Цена за готовый шаблон с версткой стоит в среднем 8-12 тысяч (в нем можно менять текст и фотографии в зависимости от целей письма). Вы избавитесь от необходимости каждую рассылку делать не свою работу, а клиенты почувствуют, что вам не всё равно.
Порция свежих новостей из мира email маркетинга всегда на вашей почте.
Изучила исследования аналитиков и мнения специалистов email-маркетинга и написала для сайт колонку с трендами в дизайне email-рассылок в 2017 году.
215 миллиардов электронных писем отправляется ежедневно - это эффективный и популярный канал коммуникации, что бы о нём ни говорили. В email-маркетинге есть свои тенденции, самые заметные из них - в оформлении писем. Проверьте, насколько ваши рассылки им соответствуют.
Тренды 2016 года, которые будут жить в 2017 году
1. Адаптивный дизайн
Смартфоны победили десктоп. Согласно исследованиям Litmus, 55% писем открывают на мобильных устройствах. В 2017 году тенденция сохранится, поэтому самое время проверить свои рассылки на адаптивность. Руководствуйтесь основными принципами:
Универсальность . Разработайте адаптивный макет, чтобы письмо корректно отображалось на всех устройствах.
Телефония . Используйте возможности смартфонов: добавьте призыв к действию «позвонить» или «заказать звонок».
Разные CTA для мобильных и десктопа
Юзабилити . Не мельчите: пользователи не смогут рассмотреть маленькие заголовки, например, в верхнем меню. Сделайте из горизонтального меню вертикальное и увеличьте шрифт. Получится меню, которым удобно пользоваться на маленьком экране:
Адаптивное меню
На что обращать внимание
Критично важный момент - тестировать макеты под почтовыми клиентами, которыми пользуются получатели ваших рассылок.
2. Интерактивность
В интерактивных письмах нет статичного содержания: списки разворачиваются, элементы двигаются, картинки вращаются. Это позволяет превратить бесконечное «письмо-лендинг» в компактный макет с удобной навигацией.
Интерактивные элементы работают на CSS3, а спроектированы могут быть, например, в Adobe Experience Design или Sparkbox . Задача таких инструментов - помочь сосредоточиться на контенте, а не на вёрстке.
На что обращать внимание
Сегодня существует множество почтовых клиентов - десктопные приложения (например, Microsoft Outlook, AOL, Thunderbird), веб-сервисы (Gmail, Mail.Ru Group), мобильные клиенты. В зависимости от того, какие технологии они используют, ваши дизайнерские изыскания в виде CSS-анимации будут работать или не работать в разных клиентах. Стоит предусматривать упрощенные варианты отдельных блоков и прописывать их в media queries.
К слову, в сентябре 2016-го Gmail, наконец, объявил о том, что клиент начинает поддерживать адаптивную верстку писем. Это большой шаг для индустрии почтовых клиентов в целом - переход на адаптивную верстку рассылок станет еще более массовым явлением.
3. GIF-анимация
Анимированные изображения - ещё один способ «оживить» рассылки. У них есть одно важное преимущество - простота производства. В то же время гифки способны наглядно продемонстрировать продукт в действии - поэтому, несмотря на то, что поклонники CSS предрекают скорейшую гибель GIF-анимации, та будет жить и процветать еще долго.
На что обращать внимание
GIF-анимацию нужно использовать осторожно, она не должны перетягивать на себя внимание пользователей и перегружать вычислительные мощности устройства. В этом руководстве есть инструкция по созданию и оптимизации анимации для рассылок, а в этой подборке - много неплохих примеров.
Еще одна важная деталь - если анимация не загрузится у пользователя (например, по причине медленного соединения) - тот увидит только ее первый кадр. Поэтому стартовый кадр должен быть максимально информативным. По этой же причине не стоит делать слишком «тяжелые» гифки.
4. Векторные изображения
Анимация растровой графики - почти всегда потеря качества. Избежать этого помогают векторные изображения. Они масштабируются без изменений, мало весят и быстро загружаются.
На что обращать внимание
Пара полезных JS-библиотек для работы с SVG-анимацией: SnapSVG и GreenSock GSAP .
5. Покупка в письме
Электронная почта - главный инструмент ретаргетинга. Магазины знают, какую пару туфель смотрел пользователь в каталоге, положил её в корзину, но так и не совершил покупку. Письма как инструмент ретаргетинга продолжат эволюционировать - отказываясь от текстовых сообщений в пользу полностью интерактивных товарных карточек (непосредственно внутри письма).
Тренды в email-рассылках 2017 года
1. Видео
Будущее контент-маркетинга за видео - пишет газета The Guardian. По прогнозам Cisco, к следующему году видео охватит 69% всего интернет-трафика. Оно выйдет за пределы YouTube и будет активно применять в email-маркетинге.
- Кликабельность увеличивается на 55%.
- Пользователя тратят на просмотр письма на 44% времени больше, чем обычно.
- На 41% увеличиваются расшаривания и публикации в социальных сетях.
- Конверсия растёт на 24%, ROI - на 20%.
- Средний чек увеличивается на 14%.
Несмотря на эти преимущества, видео редко встраивается в письма (обычно предпочитают давать ссылку на видеохостинг).
На деле вставить видео в рассылку нетрудно - большинство сервисов поддерживает вставку роликов по ссылке (тот же Mailchimp). Видео может быть и фоном для отдельных элементов или всего макета сразу. Для этого есть онлайн-редактор Mailigen .
2. Галереи изображений
Изображения можно объединять в слайдер или галерею, а не разбрасывать по всему макету, как это делают бренды в большинстве случаев. «Галерейный» подход экономит пространство и позволяет лучше управлять вниманием пользователя.
3. Гибридная верстка рассылок
Насыщенные цвета помогают лучше структурировать контент.
5. Типографика и навигация
Даже великолепно оформленные письма иногда не работают, как этого хочется бизнесу. Причина - в контенте. Оно заслуживает такого же пристального внимания, как и макет. Речь о типографике.
А если письмо получается объёмным, включите в начало содержание. Его можно оформить таблицей с якорными ссылками на отдельные элементы. Это улучшит навигацию и позволит читателям изучить именно тот контент, который им наиболее интересен.
На что обращать внимание
Текст - главный инструмент в рассылках. Согласно исследованиям , 43% пользователей не используют просмотр изображений в почтовых программах. Чтобы выделить ключевые сообщения, применяйте стили для текста - цвет, начертание и размер кегля. Сам текст набирайте веб-шрифтами или подгружайте нужные с Google Web Fonts .
Как сделать макет plain-text динамичным? Используйте отступы. Они делают текст удобным для чтения, поэтому пользователи изучают такие письма тщательнее - это подтверждает исследование по психологии.
6. Интеграция с социальными сетями
Изучила исследования аналитиков и мнения специалистов email-маркетинга и написала для сайт колонку с трендами в дизайне email-рассылок в 2017 году.
215 миллиардов электронных писем отправляется ежедневно - это эффективный и популярный канал коммуникации, что бы о нём ни говорили. В email-маркетинге есть свои тенденции, самые заметные из них - в оформлении писем. Проверьте, насколько ваши рассылки им соответствуют.
Тренды 2016 года, которые будут жить в 2017 году
1. Адаптивный дизайн
Смартфоны победили десктоп. Согласно исследованиям Litmus, 55% писем открывают на мобильных устройствах. В 2017 году тенденция сохранится, поэтому самое время проверить свои рассылки на адаптивность. Руководствуйтесь основными принципами:
Универсальность . Разработайте адаптивный макет, чтобы письмо корректно отображалось на всех устройствах.
Телефония . Используйте возможности смартфонов: добавьте призыв к действию «позвонить» или «заказать звонок».
Разные CTA для мобильных и десктопа
Юзабилити . Не мельчите: пользователи не смогут рассмотреть маленькие заголовки, например, в верхнем меню. Сделайте из горизонтального меню вертикальное и увеличьте шрифт. Получится меню, которым удобно пользоваться на маленьком экране:
Адаптивное меню
На что обращать внимание
Критично важный момент - тестировать макеты под почтовыми клиентами, которыми пользуются получатели ваших рассылок.
2. Интерактивность
В интерактивных письмах нет статичного содержания: списки разворачиваются, элементы двигаются, картинки вращаются. Это позволяет превратить бесконечное «письмо-лендинг» в компактный макет с удобной навигацией.
Интерактивные элементы работают на CSS3, а спроектированы могут быть, например, в Adobe Experience Design или Sparkbox . Задача таких инструментов - помочь сосредоточиться на контенте, а не на вёрстке.
На что обращать внимание
Сегодня существует множество почтовых клиентов - десктопные приложения (например, Microsoft Outlook, AOL, Thunderbird), веб-сервисы (Gmail, Mail.Ru Group), мобильные клиенты. В зависимости от того, какие технологии они используют, ваши дизайнерские изыскания в виде CSS-анимации будут работать или не работать в разных клиентах. Стоит предусматривать упрощенные варианты отдельных блоков и прописывать их в media queries.
К слову, в сентябре 2016-го Gmail, наконец, объявил о том, что клиент начинает поддерживать адаптивную верстку писем. Это большой шаг для индустрии почтовых клиентов в целом - переход на адаптивную верстку рассылок станет еще более массовым явлением.
3. GIF-анимация
Анимированные изображения - ещё один способ «оживить» рассылки. У них есть одно важное преимущество - простота производства. В то же время гифки способны наглядно продемонстрировать продукт в действии - поэтому, несмотря на то, что поклонники CSS предрекают скорейшую гибель GIF-анимации, та будет жить и процветать еще долго.
На что обращать внимание
GIF-анимацию нужно использовать осторожно, она не должны перетягивать на себя внимание пользователей и перегружать вычислительные мощности устройства. В этом руководстве есть инструкция по созданию и оптимизации анимации для рассылок, а в этой подборке - много неплохих примеров.
Еще одна важная деталь - если анимация не загрузится у пользователя (например, по причине медленного соединения) - тот увидит только ее первый кадр. Поэтому стартовый кадр должен быть максимально информативным. По этой же причине не стоит делать слишком «тяжелые» гифки.
4. Векторные изображения
Анимация растровой графики - почти всегда потеря качества. Избежать этого помогают векторные изображения. Они масштабируются без изменений, мало весят и быстро загружаются.
На что обращать внимание
Пара полезных JS-библиотек для работы с SVG-анимацией: SnapSVG и GreenSock GSAP .
5. Покупка в письме
Электронная почта - главный инструмент ретаргетинга. Магазины знают, какую пару туфель смотрел пользователь в каталоге, положил её в корзину, но так и не совершил покупку. Письма как инструмент ретаргетинга продолжат эволюционировать - отказываясь от текстовых сообщений в пользу полностью интерактивных товарных карточек (непосредственно внутри письма).
Тренды в email-рассылках 2017 года
1. Видео
Будущее контент-маркетинга за видео - пишет газета The Guardian. По прогнозам Cisco, к следующему году видео охватит 69% всего интернет-трафика. Оно выйдет за пределы YouTube и будет активно применять в email-маркетинге.
- Кликабельность увеличивается на 55%.
- Пользователя тратят на просмотр письма на 44% времени больше, чем обычно.
- На 41% увеличиваются расшаривания и публикации в социальных сетях.
- Конверсия растёт на 24%, ROI - на 20%.
- Средний чек увеличивается на 14%.
Несмотря на эти преимущества, видео редко встраивается в письма (обычно предпочитают давать ссылку на видеохостинг).
На деле вставить видео в рассылку нетрудно - большинство сервисов поддерживает вставку роликов по ссылке (тот же Mailchimp). Видео может быть и фоном для отдельных элементов или всего макета сразу. Для этого есть онлайн-редактор Mailigen .
2. Галереи изображений
Изображения можно объединять в слайдер или галерею, а не разбрасывать по всему макету, как это делают бренды в большинстве случаев. «Галерейный» подход экономит пространство и позволяет лучше управлять вниманием пользователя.
3. Гибридная верстка рассылок
Насыщенные цвета помогают лучше структурировать контент.
5. Типографика и навигация
Даже великолепно оформленные письма иногда не работают, как этого хочется бизнесу. Причина - в контенте. Оно заслуживает такого же пристального внимания, как и макет. Речь о типографике.
А если письмо получается объёмным, включите в начало содержание. Его можно оформить таблицей с якорными ссылками на отдельные элементы. Это улучшит навигацию и позволит читателям изучить именно тот контент, который им наиболее интересен.
На что обращать внимание
Текст - главный инструмент в рассылках. Согласно исследованиям , 43% пользователей не используют просмотр изображений в почтовых программах. Чтобы выделить ключевые сообщения, применяйте стили для текста - цвет, начертание и размер кегля. Сам текст набирайте веб-шрифтами или подгружайте нужные с Google Web Fonts .
Как сделать макет plain-text динамичным? Используйте отступы. Они делают текст удобным для чтения, поэтому пользователи изучают такие письма тщательнее - это подтверждает исследование по психологии.
6. Интеграция с социальными сетями