Делимся советами по созданию идеального адаптивного письма.

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

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

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

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

Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.

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

Команда из дизайнера и верстальщика на фрилансе сделают письмо за два-три дня, стоить это будет от 5 000 до 15 000 рублей. Если заказываете в агентстве - в разы дороже. Помните историю из вступления? Для Сергея выбор очевиден: он будет собирать письмо сам, в его ситуации это дешевле и быстрее.

Простое адаптивное письмо лучше собрать во встроенном редакторе. Если хотите нестандартных решений - отдавайте на аутсорс.

Как собрать письмо во встроенном редакторе

Тем, кто собирает письмо в редакторе, знать код не обязательно. Единственное, что нужно - продумать структуру письма, подобрать картинки и написать текст. Никакой «ручной» верстки - вы соберете письмо из блоков, как в конструкторе посадочных страниц.

Шаг 1. Схема или прототип письма

Начните с черновика, начертите на бумаге схему будущего письма: где будет заголовок, где картинка, где кнопка и т. д. Если есть время, соберите полноценный прототип в Balsamiq или NinjaMock. Такой прототип не стыдно показать директору и передать в работу дизайнеру.

Шаг 2. Верстка письма в редакторе

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

• Перетаскиваете нужные элементы в тело письма

Обычно во встроенных редакторах действует принцип Drag-and-drop. Если в вашем не так, посмотрите статьи из Базы знаний - принципы работы в редакторе описаны там.

• Настраивайте содержимое элементов: отступы, интервалы, выравнивание и начертание

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

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

Не забудьте настроить кнопки и добавить к ним ссылки для перехода.

Шаг 3. Проверка адаптивности во встроенном редакторе

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

В 90% случаев все будет в порядке, блоки «перестроятся» автоматически. Если верстка все-таки «слетает» или результат вас не устраивает - проверьте значения отступов в блоках, они должны быть одинаковыми. Если один один блок отступает на 10 пунктов, а другой на 30, в мобильной версии они могут перестроиться некорректно. Если оба блока отступают на 10 пунктов, скорее всего, все будет в порядке.

Шаг 4. Проверка адаптивности на сторонних сервисах

Проверьте результат через Litmus или Email on Acid. Эти сервисы покажут, как письмо отобразится на разных устройствах, в разных браузерах и разных почтовых клиентах.

В некоторых редакторах проверка через Litmus интегрирована по умолчанию. Если в вашем редакторе такой возможности нет, отправляйте тестовую копию письма на специальный e-mail, который дадут после регистрации в Litmus.

Услуга платная, месячная подписка в Litmus начинается от 79 $, в Email on Acid - от 45 $. Если вы отправляете по одному письму раз в месяц, выходит дороговато. В крайней случае, попробуйте Browser Shots, он старый и неудобный, зато бесплатный. Помните, что подобные сервисы не дают 100% гарантии. Даже если в Литмусе все хорошо, это не повод сразу же запускать рассылку. Отправьте письмо на личную почту и откройте его там.

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

Как оценить результат работы - своей или верстальщика

Если собираете письмо сами, проверьте адаптивность внутри редактора и посмотрите письмо с личной почты - этого достаточно. Хотите проверить адаптивность на многих устройствах, браузерах и почтовых клиентах сразу - тогда покупайте аккаунт в Litmus или Email on Acid, смотрите результат там.

Тем, кто отдавал верстку на аутсорс, покупать аккаунт не обязательно, попросите скриншоты из Litmus у верстальщика. Если он профессионал, то проверяет письма на подобных сервисах, отправить скриншот для него не проблема.При проверке присмотритесь к почтовым клиентам, в основном, косяки всплывают здесь. Обязательно проверьте, как открывается письмо в Outlook, Gmail, Yandex и Mail.ru - это самые популярные почтовые клиенты в России.

Не стоит тратить время на исправление макета, если он некорректно отображается на третьем айфоне, в седьмой версии Internet Explorer или в почтовом клиенте The Bat. Да, всегда найдутся те, кто пользуется третьим айфоном, но их меньшинство. Стоит ли переделывать макет ради 1-2% от общей базы? Зависит от количества и «качества» базы.

Надеемся, вы ее сегментировали и про своих подписчиков знаете все. Если 1-2% - это 10 000 человек, то заморочиться стоит. Если вы работаете в b2b и эти 1-2% - управляющие компаний, собственники бизнеса и другие вип-клиенты, придется адаптировать письма под них.

Проследите за тем, чтобы письмо адекватно отображалось в Outlook, Gmail, Yandex и Mail.ru - этого достаточно.

Памятка маркетолога

• Определитесь с форматом письма, каким оно будет: стандартным и простым или сложным и креативным. Письма со сложной структурой отдавайте дизайнеру и верстальщику. Простые письма собирайте в редакторе сервиса рассылки, они адаптируются по умолчанию.
• Проверяйте результат во встроенном редакторе и, если позволяет бюджет, на сторонних сервисах. Принимая письмо у верстальщика, просите скриншоты, которые подтверждают, что письмо отображается корректно - по крайней мере, в популярных почтовых клиентах и популярных браузерах.
• Обязательно просмотрите письмо через личную почту, хотя бы в основных почтовых клиентах и с актуальных моделей смартфонов на iOS и Android.

Плюсануть

Один из читателей блога Вебсовет попросил рассказать о верстке писем для рассылки. Сам я этим практически не занимаюсь. Помнится, в свое время я много возился с шаблонами для Subscribe.ru, и помню, что дело это было муторное. Проблема в том, что почтовые сервисы плохо работают с блочной версткой. А еще хуже со стилями css. Столько лет прошло, а воз и ныне там. Сейчас подавляющее большинство писем для рассылок верстаются все так же по старинке - при помощи таблиц. И это в 2016 году, когда на сайтах уже давно рулит html5, css3 и прочие современные вкусняшки.

В принципе, исчерпывающие статьи по верстке писем уже есть на Хабре, здесь и здесь. Также рекомендую почитать тамошнего обитателя по имени Артур Кох, у которого по верстке писем написана масса полезных статей. Примеры: ссылка 1, ссылка2.
Но чтобы пост не получился пустым, я все-таки кратко озвучу основные моменты верстки писем для e-mail рассылок.

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

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

В-третьих, можете не заморачиваться с тегами doctype, head и body. Без doctype ваши письма будут одинаковыми везде, head и body практически бесполезны, т.к. все равно будут вырезаны большинством почтовых сервисов (пруф).

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

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

Очень часто почтовики блокируют изображения в письмах, и если не задать их размеры, то письмо будет выглядеть коряво. Кроме того, обязательно добавляйте style=»display:block;. Это избавит от проблем с непонятными отступами (например, в gmail):

И ни в коем случае не используйте однопиксельные картинки в качестве распорок для ячеек таблицы! Ваше письмо гарантированно попадет в спам. Если нужна распорка, то следует применять картинку с размерами, как минимум, 20х20 пикселей, которой в стилях принудительно задать размер 1х1 пиксель.

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

И напоследок пара полезных ссылок. Здесь вы можете посмотреть, какие теги поддерживаются различными почтовыми сервисами. А здесь найдете еще несколько полезняшек - «Особенности верстки HTML-писем».

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

(2 votes, average:

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

Верстка адаптивных писем: памятка маркетолога

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

Этот курс адресован HTML-верстальщикам, разработчикам и email-маркетологам с базовыми знаниями HTML и CSS. Вы узнаете, что такое мобильная и резиновая верстка, блочная и фланговая адаптация. Научитесь подготавливать изображения для писем и рассмотрите основные инструменты верстальщика.

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

2. Особенности адаптивной верстки

3. Подходы к адаптации email

4. Базовый шаблон адаптивного письма

5. Приемы мобильной адаптации

6. Инструменты HTML-верстальщика

7. Подведение итогов курса

8. Адаптивная верстка писем в email-маркетинге: итоговый тест

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

Создание письма для рассылки

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

30 бесплатных адаптивных шаблонов электронных писем

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

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

• продумать идею и грамотно выстроить серию писем;
• выделить главное, завоевать доверие клиента, предоставив интересный продукт;
• письма должны побуждать к действию, мотивировать на приобретение продукта;
• привлекательный дизайн, профессионалы сделают html верстку писем для рассылки.

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

Верстка html писем

• Идея продвижения продукта/услуги и ее реализация в текстовом формате.
• Дизайн письма для рассылки.
• Верстка электронных писем.
• Тестирование результата на всех платформах и почтовых сервисах.

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

Простые узнаваемые шаблоны, правильная ширина, информация о компании и форма отписки — если все это учесть, ваша рассылка будет вызывать доверие, и у клиента не возникнет и мысли нажать кнопку “спам”.

Что вы получите?

• Сверстанные по всем правилам кроссмейлерные письма
• Точное красивое оформление
• Высокий CTR
• Малый показатель отписок, добавления в спам
• Продуманный текст, таргетирование рассылок
• Эффективную сегментацию
• Корректное отображение писем в большинстве почтовых клиентов
• Правильную техническую настройку процесса рассылок

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

• Tutorial

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

Верстка адаптивных писем с Foundation for Emails

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

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

• Gulp: автоматизации процесса разработки
• Inky шаблонизатор: конвертирует собственную разметку в HTML код
• Sass: CSS препроцессор
• Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
• Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
• Inliner: переводит из таблиц стилей в инлайн стили
• BrowserSync: перезагрузка страницы после изменения исходных файлов
• Image Compression: сжатие изображений в процессе компиляции

Установка достаточно проста и состоит всего из нескольких шагов:

1. Устанавливаем foundation-cli , возможно понадобится использовать sudo

Npm install --global foundation-cli
2. Переходим в директорию проекта и выполняем команду

Foundation new --framework emails
CLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду npm start , после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения.

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

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

Пример кода с использованием Inky:

Put content in me!

HTML на выходе:

Put content in me!

Но не стоит увлекаться слишком большой вложенностью, т.к. вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)

Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».

Более подробно с документацией Foundation for Email можно ознакомиться .

1. Реализация адаптивности в письмах - довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.

Foundation for Emails в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x» , но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})
2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials .

Ваш шаблон будет выглядеть примерно так:

{{> header}} {{> body}} {{> footer}}
В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.

3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head ,
дублируются, помимо этого дублировались теги head и body , как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data . Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

Title: Page Title description: Lorem ipsum. ---

{{ title }}

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

Stuff on top

Stuff on bottom

HTML на выходе:

Stuff on top

Stuff on bottom

6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс.show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс.hide-for-large . Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

Button

HTML на выходе:

Button

8. Не все почтовые клиенты поддерживают background-image , но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.

9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation .

В нашем примере уголок сделан с помощью псевдоэлемента:before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

Верстка писем ,

Разработка под e-commerce

• Перевод

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

Зачем нужно адаптировать письма для мобильных устройств

Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. Во время исследования Campaign Monitor от 2011 года выяснилось, что почти 20% открытий писем происходили на смартфонах и планшетах - в 2009 году эта цифра находилась на уровне всего в 4%. Почти 90% от этих открытий осуществлялись на устройствах под iOS. Сейчас цифры еще выше.

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

Техники дизайна

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

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

Ниже представлено то же письмо, но открытое в приложении Mail для iPhone. Явно видна разница двух шаблонов. Мобильная версия уже, в ней меньше необязательных визуальных элементов, но читать её также удобно, как и десктоп-версию. Разница во внешнем виде двух мобильных вариантов заключается в использовании CSS.

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

Что учитывать при создании шаблонов

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

• На мобильных устройствах лучше работают одноколоночные шаблоны не шире 500-600 пикселей. Их проще читать, и даже если в них есть какие-то недоработки, все «косяки» в любом случае выглядят лучше.
• Согласно гайдлайнам Apple, минимальная целевая область кнопок и ссылок должна составлять 44 x 44 пикселя. Нет ничего более «неюзабельного», чем куча мелких ссылок, в которые сложно попасть на небольшом экране мобильного устройства.
• Минимальный отображаемый на iPhone шрифт составляет 13 пикселей. Необходимо учитывать этот факт при создании текста письма - если текст в шаблоне набран меньшим шрифтом, то он будет автоматически увеличен, что может сломать всю вёрстку.
• Письмо должно быть лаконичным, а всю важную информацию следует располагать в его верхней части. Скроллить на тачкскринах пальцем сложнее, чем на десктопе мышкой.
• Если возможно, стоит использовать свойство display:none; для скрытия необязательных элементов шаблона. Кнопки «шаринга» в соцсети уместны на десктопе, но ими не всегда удобно пользоваться на смартфоне.

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

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

Верстаем мобильные письма

Когда речь идет о мобильных стилях, чаще всего подразумевается не отдельный файл стилей, а media queries. Вот так они выглядят:

Давайте повнимательнее разберемся с тем, как происходит объявление @media . Прежде всего, чтобы создать «мобильный» CSS нужно реализовать какой-то критерий, помощью которого почтовый клиент будет определять какие стили использовать.

Для этого используется оператор @media only screen - он показывает, что почтовый клиент должен быть отображен на экране (вместо того, чтобы, к примеру, быть напечатанным на принтере). После этого в примере кода выше мы задали максимальную ширину экрана устройства в 480 пикселей. Это важно, поскольку у многих (но не у всех) мобильных устройств область отображения данных на экране составляет 480 пикселей или меньше.

Поэтому часто используют max-device-width: 480px (это также ширина дисплея предыдущих моделей iPhone в ландшафтном режиме), но можно и расширить описание, чтобы охватить другие размеры экрана:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }
Вернемся к рассмотренному выше мобильному шаблону письма. Вот как он выглядит в Apple Mail:

В этом примере использован к HTML-таблицам, содержащим текст и изображения, применен класс contenttable . Вот образец кода:

Этот класс играет интересную роль - когда письмо открывают на устройстве с экраном в 480 пикселей или шире, он ни на что не влияет. Однако, когда экран 480 или меньше, то он сужает ширину таблиц до 320 пикселей. Для того, чтобы избежать необычного глюка в почте Yahoo, использованы селекторы атрибутов . В противном случае используется «обычный» CSS. Кроме того, можно включить и такие объявления:

@media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ table { width: 325px !important; } img { width: 325px !important; } p { display: none !important; } }
Далее мы рассмотрим более сложные техники адаптации мобильных писем для мобильных устройств.

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

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

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

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

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

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

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

Column Left Content Column Right Content

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

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

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

Добавление «прогрессивного раскрытия» (как в «Википедии»)

Многие сайты используют для конвертации длинного веб-контента в короткий мобильный технику под названием «прогрессивное раскрытие» (progressive disclosure). Она заключается в сокрытии контента за интерактивным элементом вроде кнопки или ссылки, а затем показа этого контента по клику (или тапу). Эту технику использует «Википедия» и множество других проектов - ее можно применять и для вёрстки писем под мобильные устройства (для скрытия и показа контента используется CSS).

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

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

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

Основные действия будут осуществляться с помощью классов mobilehide , mobileshow и article . С помощью display:none; кнопка для разворачивания/скрытия контента будет скрываться на десктопе:

A, a { display: none !important; }
Чтобы убедиться в том, что эта кнопка отображается только на мобильных устройствах, придется прибегнуть к media query. Ниже представлен код для этого (включая ранее использовавшиеся сниппеты mobileshow и mobilehide , а также некоторые стили для webkit):

@media only screen and (max-device-width: 480px) { a, a { display: block !important; color: #fff !important; background-color: #aaa; border-radius: 20px; padding: 0 8px; text-decoration: none; font-weight: bold; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; position: absolute; top: 25px; right: 10px; text-align: center; width: 40px; } div { display: none; } a.mobileshow:hover { visibility: hidden; } .mobileshow:hover + .article, .article:hover { display: inline !important; } }
В результате на iPhone будут отображаться кнопки для сворачивания и разворачивания контент. На GitHub представлен весь

Что такое адаптивный дизайн в email-писем? Адаптивный шаблон сообщений способен определять размер экрана устройства или размеры окон браузера при помощи @media query , и позволяет предоставить посетителю максимально оптимизированный вариант дизайна сайта. Самой популярной точкой преломления (или breakpoint) считается 480 пикселей (спецификация iPhone), однако технология позволяет вам выставить любые точки преломления, адаптировав ваш сайт под различные размеры экранов, включая мобильные устройства, планшеты или настольные ПК.

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

В то время как масштабируемый дизайн гораздо легче разработать, его работу на различных устройствах сложно называть «работой», так как от этого сильно страдает юзабилити, и структура дизайна может преломляться. Масштабируемые дизайны лучше подходят текстовым email’ам без использования графики (которые, кстати говоря, не очень эффективно работают в торговой индустрии). Адаптивный дизайн не требует разработки под настольные ПК, а вместо этого предлагает возможность предоставить пользователям мобильных устройств наиболее подходящий опыт взаимодействия, в то время, как и пользователи стационарных компьютеров смогут увидеть сообщение во всей красе.

К сожалению, адаптивный дизайн – не панацея от глупости . Некоторые почтовые клиенты вроде Gmail или Outlook «вырезают» все CSS-стили и не поддерживают @media query. Есть информация о том, что большинство пользователей предпочитают использовать не нативные почтовые клиенты через синхронизацию, которые поддерживают @media и позволяют правильно генерировать адаптивный дизайн.

Однако вам следует подумать о запасном варианте в форме гибкой верстки или шаблона с фиксированной шириной на HTML.

Адаптивный шаблон и верстка письма.

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

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

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

3. Разберитесь с последовательность. Вместо того, чтобы уменьшить картинки, просто трансформируйте горизонтальный шаблон в вертикальный, и используйте точку преломления на 480 пикселях. В этом деле стоит поучиться у представленного выше примера Crocs. 2- и 3-колоночные дизайны также можно преобразовать в единый столбец. Несмотря на то, что это интернет-магазин так нахваливает свой адаптивный сайт, формат их email-рассылки пока что оставляет желать лучшего.

Стиль электронных рассылок

4. Используйте читабельный шрифт. Здесь имеется не просто шрифт без засечек. Размер шрифта должен составлять минимум 13 пикселей (минимальный размер шрифта в iPhone), так как меньшие по размеру шрифты автоматически увеличиваются устройствами, что может навредить общему виду шаблона.

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

Нижеприведенный пример демонстрирует нам сложности, присущие рукописным и полужирным шрифтам, а также возникающие при слабом контрасте между фоном и текстом.

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

Контент

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

8. Хорошо продумайте мерчандайзинг. Если ваши email-сообщения укомплектованы различными предложениями товаров, то постарайтесь адаптировать ассортимент под мобильных пользователей. Всегда помните о том, что ваш ассортимент для пользователей настольных ПК не всегда должен совпадать с ассортиментом продукции для мобильных пользователей.

9. Используйте текстовый контент. Используйте текст вместо изображений, — это позволит вам «ухватить» клиентов, у которых отключено отображение картинок.

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

10. В первую очередь разрабатывайте дизайн под клиентов с выключенными картинками. Иначе вы рискуете рассылать вашим потенциальным клиентам «белый экран смерти».

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

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

13. Повысьте резкость картинок. Экраны с высоким разрешением Retina требуют от вас изображений в высоком качестве и с повышенной резкостью.

14. Замените анимированные Gif-изображения на статичные. Учитывайте, что GIF хоть и может придать вашим письмам динамики, они все равно не будут работать на мобильных устройствах, поэтому выберите лучший кадр из изображения, который вам понравится.

Призыв к действию (Call to Action)

15. Используйте крупные кнопки. Научитесь правильно разрабатывать под touch-экраны. Для начала следует запомнить, что ссылки и кнопки должны составлять минимум 44х44 пикселей в размере, — таковы правила компании Apple.

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

17. Сделайте кнопки еще больше! Да-да, это правило следует повторить!

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

19. Кнопки должны быть расположены проксимально контенту. Каждая ссылка – это, по сути, призыв к действию. Ссылки на товары должны быть расположены максимально близко к изображениям, которые их представляют, — таким образом, получатели будут знать, на что они кликают. Учитывайте это правило с каждой ссылкой/кнопкой в вашем сообщении.

20. Пусть ссылки выглядят как ссылки. Звучит так, как будто мы в детском саду, не правда ли? Однако актуальные реалии заключаются в том, что современные дизайнеры предпочитают оформлять ссылки просто другим цветом, полностью забывая про подчеркивание.

21. Оптимизируйте CTA под клиентов с отключенными изображениями. Кнопки – это тоже изображения… зачастую.

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

23. Ссылайтесь на оптимизированные . Не переводите получателей напрямую на ваш сайт.

24. Копируйте промо-коды. Автоматическое принятие кода ссылки для тех, кто перешел на сайт из email’а – это очень эффективная практика.

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

Стоит ли это ваших усилий?

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

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

Между тем, лендинг лендингу рознь. Один лендинг пейдж, работая в паре с рекламными баннерами, успешно проинформирует клиента о товаре и услуге и подтолкнет его к совершению покупки (или любого другого необходимого действия), а другой — так и останется обыкновенной страницей сайта, только немного красивее и “навороченнее” других.

Что же делает посадочную страницу успешной?

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

Хорошее юзабилити позволяет клиенту чувствовать себя на посадочной странице как дома: структура элементов удобна; контент и призывы к действию плавно подводят клиента к покупке; лендинг не перегружает клиента лишней информацией; лендинг не заставляет клиента бешено скроллить по странице, чтобы найти желанную (или на этот момент уже нет?) кнопку покупки.

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

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

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

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

Итак, начиная работать над лендингом, ответьте себе на следующие вопросы:

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

Вроде бы, ответы на эти вопросы очевидны, но не стоит их недооценивать. Дело в том, что мобильные пользователи делают покупки не так активно, как десктопные. Конверсия распределяется примерно следующим образом:

1. Планшеты
2. Смартфоны.

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

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

Подытожив, можно сказать, что цель клиента — найти информацию, цель владельца сайта — получить деньги, а цель дизайнера и разработчика — сделать лендинг, который мог бы привлечь максимальное количество наводок (лидов).

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

Банально, но самый просто способ для клиента определиться, покупаю или нет, — позвонить. Следовательно, настройте сервис быстрых звонков. Пусть заветная иконка с телефоном сопровождает потенциального клиента по всему лендингу. Обратите внимание, что это должна быть именно иконка с телефоном и каким-нибудь призывом к действию типа “Позвони сейчас!”. Ряд исследований показал, что иконка эффективнее обыкновенного телефонного номера на 10-20%.

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

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

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

• сведите количество выпадающих меню к минимуму или вообще откажитесь от них;
• уменьшите общее количество полей для заполнения — всю дополнительную информацию может запросить работник call-центра после того, как клиент оставил заказ;
• убедитесь, что все оставшиеся поля правильно настроены, то есть клавиатура мобильного автоматически подстраивается под поле: ФИО — буквы, телефон — цифры и т.п.;
• если требуется регистрация, активируйте возможность зарегистрироваться через социальные сети;
• убедитесь, что сервисы оплаты не потребуют от клиента заполнять всю информацию еще раз.

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

Совет 4. Призыв к действию должен быть всегда на виду

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

“Купи сейчас!”, “Подпишись на рассылку!”, “Получи скидку!”, “Скачай буклет!” и другие призывы к действию должны быть не где-то внизу страницы или не где-то в заголовке лендинга, а либо должны повторяться в разных смысловых частях лендинг пейдж, либо “следовать” за клиентом при скроллинге.

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

Контент — обязательная составляющая любой лендинг пейдж, но его не должно быть много. Контент должен быть ясным, понятным и склоняющим клиента к нужному действию.

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

Не тяните резину, а сразу сообщите клиенту, что он может получить на данной лендинг пейдж. Не используйте “красивые” фразы и длинные обороты — краткость, простота и ясность важнее стилистики. Запомните это.

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

Недавнее исследование, проведенное в США, показало, что тяжелые и неоптимизированные к низким скоростям Интернета посадочные страницы теряют 40-50% потенциальных клиентов. Что ж, в мире, где у любого бизнеса десятки конкурентов, ждать никто не хочет и, поверьте, не будет.

Чтобы сделать страницу более легкой, убедитесь, что:

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

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

Что из этого следует и причем тут мобильные лендинг пейдж? Посадочная страница будет успешной, если вам удастся разделить с потенциальным клиентом его желания и заботы, предложив ему грамотное и эффективное решение проблемы. Товары, услуги и лендинг пейдж под них есть у всех, а вот решение — только у вас!

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

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

Выводы

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

• “заточен” под какую-то одну задачу;
• достаточно информативен для того, чтобы клиент принял решение совершить необходимое действие;
• позволяет клиенту легко связаться со службой поддержки по телефону или же через форму контактов;
• не заставляет клиента заполнять множество полей при совершении нужного действия;
• не растекается мыслью по древу, четко и ясно дает понять, какую проблему решит клиент, совершив действие;
• быстро загружается, не заставляет клиента терять драгоценное время;
• позволяет совершить необходимое действие, в какой части лендинга не находился бы клиент (минимальный скроллинг);
• ориентирован не на предложении товара или услуги, а на решение проблемы клиента.

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

Надеемся, что мы решили вашу проблему сегодня. Спасибо за чтение!

First heading Hide Show Pellentesque habitant morbi... Read more...