Из этой статьи вы узнаете, как сделать письмо для E-mail рассылки на онлайн-конструкторе Wilda. В чем отличие форматов Html и Jpeg, и какой формат подойдет вам больше.

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

1. Создав html версию письма
2. Отправив цельное изображение в теле письма.

Остановимся на каждом варианте подробнее чуть ниже, а пока давайте разберемся, что такое 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-маркетинг - это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией. Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

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

С чего начать и как создать?

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

Создание HTML-письма по шаблону

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

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

Как отправить HTML-письмо?

Отправка интерактивного письма, пожалуй, - самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо . Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем "написать письмо", пишем в форму какое-то слово, затем выделяем его и нажимаем "просмотреть код элемента".


В открывшемся коде, перед нами сразу предстанет строчка body id="tinymce", кликнув по котрой правой клавишей, необходимо выбрать пункт "Edit As HTML".


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


Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

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

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

Медиа-запросы: только полдела

Было время, когда было вполне достаточно определения типа устройства для создания адапивного шаблона электронного письма, которое одинаково хорошо отображалось бы и в iOS, и в Android почтовых клиентах, оба семейства смартфонов поддерживали CSS свойство @media.

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

Наиболее примечательным является последнее обновление приложения Gmail для Android, которое является в два раза более популярней, чем стандартное почтовое Android-приложение (что составялет 11% от общих запусков). Оно никогда не поддерживало media-запросы, и до сих пор не поддерживает, однако сейчас оно масштабирует ваши электронные письма путем сжатия размера внешней таблицы для заполнения всей доступной области отобржения экрана. Этот процесс сложно проконтролировать и, в том случае, если все ваши письма зависят от медиа-запросов для правильного отображения на мобильных устройствах, создается несколько неприятных результатов.

Почему плавающий шаблон "темная лошадка"

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

Однако, имеется несколько дизайн-компромиссов, которые вы должны применить. Любимое всеми "схлопывание" в одну ленту колоночных макетов не так хорошо работает с этим методом. Если же вы научитесь обходиться без них, вы сможете применять функциональный дизайн, который работает максимально хорошо.

Сегодня мы этим и займемся.

Первый этап

Давайте начнем с создания пустого шаблона.

Hello!

Я расположила главную таблицу контента по центру с помощью класса "content".

Обратите внимание

Примечание: в ходе выполнения урока вы заметите то, что я собираюсь разместить CSS в заголовке страницы. Обычно я размещаю стили в заголовке страницы, когда собираюсь использовать их снова, или оставить встроенными одноразовые стили.

Важно: Когда вы используете CSS в заголовке вашего документа, вы обязаны в конце разработки использовать инструменты для их преобразования во встроенные. Если вы используете сервисы, наподобии MailChimp или Campaign Monitor , они автоматически предложат вам преобразовать эти стили во встроенные, когда вы импортируете вашу разметку. Вы обязаны это делать, потому что некоторые почтовые клиенты, такие как Gmail, проигнорируют или вырежут содержание вашего тэга

Создание заголовка

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

Hello!

И затем в своих CSS стилях, задаем подложку для нашего заголовка.

Header {padding: 40px 30px 20px 30px;}

Создание первой адаптивной строки

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

Левая колонка

Заменим наше маленькое привествие тем, что приведено ниже.

Создаем таблицу в 70px и также добавляем небольшую подложку, которая будет смотреться, как зазор между нашими двумя колонками. Подложка снизу добавит вертикального просвета, когда наши колонки нагромоздяться друг на друга на смартфоне.

Правая колонка

Также мы создадим правую колонку снова применив выравниваие к левому краю. Таблица будет 445px в ширину, что позволит нам сэкономить 25px для правой стороны. Это очень важно, потому что Outlook автоматически нагромоздит ваши таблицы, если не будет оставлено по-крайней мере 25px для каждой созданной строки.

Если вы будете оставлять в запасе по-крайней мере 25px, ваши таблицы будут такими, как вы ожидаете.

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

style="width: 100%; max-width: 425px;">

Как вы можете увидеть, что я создала класс, названный "col425", для этой таблицы и задала ширину 425px для него. Я поместила таблицу, которая будет содержать в себе другую таблицу в 425px шириной, в код условия. Затем мы добавляем наш класс также и в медиа-запрос, который мы создали для Apple Mail.

Col425 {width: 425px!important;}

Сейчас внутри нашей ячейки добавим стилизированный заголовок.

CREATING

Responsive Email Magic

Subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;} .h1 {font-size: 33px; line-height: 38px; font-weight: bold;} .h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

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

Создание одноколоночной строки текста

Для создания одной строки текста, просто напросто добавим новую строку в нашу таблицу с классом ".content". Этой строке добавим класс ".innerpadding" с многократно используемыми значениями подложки. Также добавим класс "borderbottom", чтобы создать рамку для каждой строки.

Welcome to our responsive email!

CSS этой секции:

Innerpadding {padding: 30px 30px 30px 30px;} .borderbottom {border-bottom: 1px solid #f2eeed;} .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;} .bodycopy {font-size: 16px; line-height: 22px;}

Создание двухколоночной статьи

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Claim yours!

Мы добавили кнопку с классом "buttonwrapper". Она содержит ячейку-распорку с цветовой заливкой фона и также текстовую ссылку внутри себя. Я предпочитаю использовать этот способ, потому что он позволяет использовать кнопки с плавающей шириной, что очень полезно при создании многократно используемых шаблонов, где ширина каждой кнопки может быть различной. Если же ширина вашей кнопки фиксирована, вы можете предпочесть использоватьBulletproof Button Generator .

Стили для нашей кнопки:

Button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;} .button a {color: #ffffff; text-decoration: none;}

Также установим ширину для нового класса "col380", и добавим наш размер в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

@media only screen and (min-device-width: 601px) { .content {width: 600px !important;} .col425 {width: 425px!important;} .col380 {width: 380px!important;} }

Создание одной колонки для изображения

Это очень простая строка. Просто установим для изображения 100% ширину письма и убедимся, что его высота установлена в auto.

В наших CSS:

Img {height: auto;}

Создание финальной строки обычного текста

Наконец мы добавим строку текста без рамки внизу.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Создание подвала

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

® Someone, somewhere 2013 Unsubscribe from this newsletter instantly

Добавим требуемые стили для подвала в CSS:

Footer {padding: 20px 30px 15px 30px;} .footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;} .footercopy a {color: #ffffff; text-decoration: underline;}

Оптимизация кнопок для мобильных устройств

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

Удалим цвет из тэга td, к которому он был применен и затем добавить его в тэг a с большой подложкой.

Я использую оба свойства max-width и max-device-width в этом медиа-запросе в попытке избежать баг Oulook.com IE9

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) { body .buttonwrapper {background-color: transparent!important;} body .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;} }

Теперь, когда вы щелкните в любой части цветной кнопки это будет ссылка.

Дальнейшие усовершенствования с использованием медиа-запросов

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

Unsubscribe from this newsletter instantly

и добавляем соответствующие CSS стили в медиа-запрос:

Body .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} body .hide {display: none!important;}

Вы можете также наметить классы.innerpadding, .header и.footer, чтобы уменьшить влияние подложки для клиентов, которые поддерживает медиа-запросы.

Тестируй и двигайся дальше!

Наконец, как и всегда, убедитесь, что вы прошли валидацию (используя W3C Validator - вы можете иметь только одну ошибку с собственным атрибутом "yahoo" тэга body) и протестируй всё ли в порядке, используя реальные устройства и на Интернет-просмотрищиках, наподобие Litmus или Email on Acid .

Получай удовольствие, создавая адаптивные электронные письма, которые выглядят великолепно в любом почтовом клиенте!

Согласно данным сайта Statista, в 2018, количество пользователей электронной почты достигло 3,8 миллиарда. В то время как Gmail использует 1,4 миллиарда людей. Если посчитать, то получается, что 36,8% всех пользователей предпочитают данный почтовый клиент.

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

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

Хотите сделать то же самое всего за несколько минут?

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

В этой статье я:

• создам HTML шаблон сообщения;
• экспортирую его в аккаунт Gmail;
• освещу некоторые технические характеристики почтовика Gmail;
• и наконец, мы с вами увидим, как Stripo справляется с ними. Другими словами, мы покажем, почему именно наши совместимы с Gmail.

1. Создаем шаблон сообщения в Stripo

Прежде чем экспортировать сообщение в аккаунт Gmail, его необходимо создать.

Для этого есть несколько способов:

Первый способ это создание нового сообщения на базе наших .

На момент написания статьи в Stripo их насчитывалось 210: сообщения-подтверждения, сообщения о брошенных корзинах, промо и, конечно же, праздничные шаблоны. Выбирайте любой на ваш вкус. Естественно, вам нужно будет немного изменить его дизайн в соответствии с вашим вкусом, типом сообщения, будь то триггерное или же промо, и в соответствии с требованиями вашего бренда. Но все это не займет больше 10 минут.

Второй способ - создание HTML шаблона с нуля.

Для этого вам нужно будет войти в ваш аккаунт, перейти в раздел «Шаблоны», после — выбрать раздел «Базовые шаблоны». Там вы найдете наш «Мастер шаблон». Создайте один шаблон на все случаи жизни. И просто комбинируйте блоки в соответствии с целями вашем маркетинговой кампании.

Третий способ — экспортировать/вставить HTML код.

В этом случае вам нужно будет в вашем личном кабинете выбрать вкладку «шаблоны» и выбрать мой HTML.

Первый способ самый простой, конечно же, если у вас нет уже созданного HTML шаблона.

Так как же вам кастомизировать наши шаблоны?

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

Шаг 1. Как установить прехедер в Stripo. И как будет выглядеть ваше сообщение

Широко известный факт, первым в сообщении получатели видят именно прехедер. И давайте быть откровенными: именно по вашему имени, теме и прехедер они судят, стоит ли открывать сообщение.

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

(Шрифт Arial, превью сообщения)

Шаг 2. Как добавить хедер и логотип в шаблон в Stripo. И как будет выглядеть ваше сообщение

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

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

Шаг 3. Как добавить баннер в Stripo. И как будет выглядеть ваше сообщение

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

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

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

Шаг 4. Как добавить структуры в Stripo. И как будет выглядеть ваше сообщение

Изображение и текст, 2 фото и 2 текстовых блока в ряд? Это решать только вам. Это достаточно распространенная опция. Многие редакторы позволяют размещать 2 или 3 блока в ряд. Но только мы позволяем использовать целых 4 блока в одной структуре. Сюда вы можете вставлять изображения, текст, кнопки, видео и т.д.

Пожалуйста, обратите внимание на данный пример структуры с двумя блоками:

Три блока в структуре:

На примере видно, что в блоках под картинками также можно размещать описание товара и даже кнопки.

4 блока в структуре:

Применяйте фоновые изображения или цвета для каждого блока отдельно или же единый фон для всей структуры.

Шаг 5. Как вставить иконки социальных сетей. И как будет выглядеть ваше сообщение

Располагайте их там, где душа пожелает. Что же особенного в наших иконках социальных сетей? Мы предлагаем более 45, не ограничиваемся стандартными Facebook, Youtube и Instagram. Для вашего удобства, мы собрали их все воедино. И в качестве бонуса, вы можете выбирать их цвет и задавать желаемую форму.

Сделать это очень просто: вам нужно перетащить блок «Социальные сети» в требуемую структуру, выбрать форму иконок, цвет, и вставить ссылки в соответствующее поле.

Шаг 6. Библиотека блоков, и как она поможет вам в создании писем для Gmail

Естественно, вы высоко цените свое время. В связи с чем вы не желаете создавать однотипные сообщения изо дня в день. Мы тоже. Именно по этой причине мы создали «Библиотеку блоков». Работать с ней достаточно легко. После создания шаблона просто сохраните его блоки в библиотеку, давая название каждому из них. Когда вы будете создавать следующую кампанию, вам нужно будет просто перетащить необходимый блок в шаблон сообщения.

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

2. Экспорт HTML сообщения в Gmail

Это мой любимый шаг.

Однако, перед экспортом созданного сообщения, вам нужно воспользоваться опцией «Предпросмотр». Как? Просто кликните на кнопку «Предпросмотр», она расположена прямо над вашим шаблоном и имеет форму глаза:

Здесь вы увидите и десктопную, и мобильную версии письма. После можно переходить к экспорту. Кликните на кнопку «Экспорт».

У вас появится вот такое вот поп-ап окошко:

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

Конечно, из перечня вам нужно выбрать «Gmail». В случае, если у вас всего один аккаунт в Gmail и вы в него залогинены, то ваше сообщение будет сразу же экспортировано. Если же у вас, как и у меня, 2 активных аккаунта, то наша система предложит выбрать, в который из них отправлять письмо.

Примечание: при экспорте ваше сообщение попадает в папку «Черновики».

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

Примечание: сообщение по-прежнему можно редактировать.

3 и 4. Технические ограничения Gmail, и как Stripo справляется с ними

Прежде чем приступать к написанию статьи, я прочитала множество гипотез о технических возможностях Gmail и решила их проверить.

Гипотеза 1. Изображениям требуются ссылки

Знатоки Gmail утверждают в сети, что любое изображение без ссылки в сообщении формата HTML, можно скачать.

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

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

Конечно же, она никуда не приведет покупателей, но это убережет ваших подписчиков от надоедливой кнопки «Скачать».

Гипотеза 2. Изображения без alt атрибута попадают в Спам

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

Я намеренно отправила множество сообщений с не заданным alt атрибутом, но все они были успешно доставлены в папку «Входящие». Хочу заметить, что сегодня я тестировала только один почтовый клиент — Gmail.

Посему, не могу утверждать, что ситуация сложится аналогично с почтовиками Outlook и Apple Mail. Следовательно, если вы планируете делать отправлять сообщения не только пользователям Gmail, то вам потребуется прописывать alt текст, чтоб успешно пройти спам фильтры.

Но если вы забудете добавить таковой, то наша система автоматически скопирует имя изображения, какое бы оно ни было. Однако, даже если вы случайно, или намеренно, как я, удалите имя изображения и alt атрибут, то при экспорте сообщения наша система подставит его обратно. Если же вы не указывали никакого имени и alt текста, то Stripo автоматически подставит атрибут alt=“”.

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

С нашим редактором вам не стоит волноваться об alt атрибуте. И даже если сами изображения почтовик заблокирует, то получатели все равно поймут, о чем ваше сообщение, увидев alt текст. Безусловно, у нас вы можете его редактировать. Постарайтесь, чтоб alt текст максимально описывал содержание картинки.

Гипотеза 3. Gmail обрезает сообщения

Да, это правда. Gmail “обрезает, все сообщения, которые весят более 102 kB. Внизу сообщения Gmail покажет кнопку “посмотреть сообщение полностью”. На данный момент нет технической возможности избежать этого. Но с нашей помощью вы можете взвесить сообщение:

• кликните на кнопку “экспорт”;
• выберите “HTML”;
• загрузите HTML;

• и потом просто правой клавишеей мыши проверьте “Свойства”.

Свойства файла показали, что вес шаблона составляет 65 kB. Я проверила данную информацию через другие приложения, и они подтвердили вес письма.

Все очень просто!

Гипотеза 4. Gmail не поддерживает класс

Неверно. Gmail передает и корректно отображает данные атрибуты. Проверено.

Гипотеза 5. Кнопка “Undo” не срабатывает при отправке массовой рассылки

Абсолютно неверно, если вы используете рассылку через Gmail, а не через Mail Merge. Все, что вам для этого нужно — войти в настройки, выбрать пункт “Отмена отправки” и выбрать время 5, 10, 20 или 30 секунд. Я применила данную опцию при массовой отправке сообщений в тестируемом почтовике, и все сработало верно. Никто мое сообщение не получил.

Гипотеза 6. Текстовые блоки, содержащие более 8500 знаков, удаляются

Как копирайтер или же просто как женщина, я люблю длинные предложения, подробные описания. Поэтому я решила вставить одну из статей в текстовый блок письма. В статье более 10000 знаков, не считая пробелы. Я отправила это сообщение своему другу. Оно было доставлено полностью, включая мою “поэму”. А это значит, что гипотеза не подтверждена. Что, на самом деле, прекрасно. Хоть я и очень сомневаюсь, что кто-либо станет рассылать столь длинные сообщения своим покупателям.

Гипотеза 7. Cсылки в Gmail-сообщениях

Я слышала, что Gmail самостоятельно подставляет ссылки к электронным адресам и телефонам в сообщениях. Другими словами, он делает их кликабельными. Я протестила массу писем с мобильными номерами и email адресами. И знаете что? Ни один из номеров не стал кликабельным. Мне по-прежнему нужно было выделять и копировать их для осуществления звонков.

Но! Ситуация с мобильными адресами немного смешная. Они либо становились серого цвета при отправке, но при этом были кликабельными. Либо же они становились голубого цвета, но при этом не активными.

5. Тестирование

Всегда перед экспортом и отправкой HTML сообщения в Gmail его нужно протестировать.
Первым шагом вам нужно выбрать режим " ". Вторым - .

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

6. Вывод

Теперь, когда вы знаете, как создать в Gmail, и что работа с редактором Stripo не отнимает много времени, мы надеемся, что ваши клиенты и друзья будут получать от вас только элегантные сообщения.

1. Самое сложное — это создание HTML шаблона письма для своей e-mail рассылки.
2. Сложность заключается в том, что Ваше письмо должно одинаково хорошо выглядеть (отображаться) во всех самых распространённых браузерах и почтовых клиентах.

Чем отличается письмо в HTML от письма обычным текстом?
Текст обычного электронного письма может содержать только ASCII-символы.
Это означает, что текст письма не будет иметь элементы форматирования текста: выделения полужирным, курсивом, цветом и проч.

Получается, что использование HTML шаблонов в e-mail маркетинге имеет ряд преимуществ:

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

1. Примите и осознайте, что HTML шаблона письма для рассылки — это не сайт. Не нужно пихать туда флешки, огромные картинки, анамашки и проч проч.
2. Ширина сообщений должна быть 620 — 800 пикселей. Иначе некоторым получателям придется пользоваться горизонтальным скроллингом для чтения Вашего письма.
3. Создавайте письма вручную. Не нужно использовать все подряд «WYSIWYG» (What You See Is What You Get) редакторы. Практически все из них вставляют лишний html код, который далее может по-разному отображаться в различных email программах. Я рекомендую использовать http://bluegriffon.org/
4. Для разметки не стоит использовать DIV, используйте таблицы.
5. Не вставляйте важную информацию картинками, так как по умолчанию они могут не показываться многими почтовыми сервисами и клиентами.
6. Всегда указывайте ширину и высоту картинок.
7. Указывайте alt текст у всех картинок. Если у пользователя будет заблокировано отображение изображений в письмах, то он увидит альтернативный текст.
8. Не делайте вложенных таблиц.
9. Не используйте фоновые рисунки, обычно они не отображаются.
10. Выкладывайте картинки на своём сервере, не нужно включать их в письмо. Укажите в шаблоне письма ссылки на изображения.
11. Желателен небольшой размер сообщений (40 — 100 кб не больше).
12. Не используйте скрипты в письмах. Они не будут работать.
13. Можно вставить в письмо ссылку на полную версию сообщения. Если у адресата письмо не откроется, он всегда сможет его посмотреть на Вашем сервере.
14. Создавайте своё письмо из расчёта того, что наиболее важная часть информации должна попасть в первые 7 — 10 см.
15. Не бойтесь ставить ссылки на свой сайт.
16. Добавьте возможность «Отправить другу».
17. Обязательно добавьте возможность управления подпиской в теле письма.

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