Три контент-стратегии адаптивного веб-дизайна: планирование, расстановка приоритетов, дистилляция

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

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

Отзывчивый веб-дизайн — это возможность переосмыслить контент, чтобы каждое предложение привлекало больше читателей и собирало больше лидов.

Что такое адаптивный дизайн?

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

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

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

Зачем нужен адаптивный дизайн

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

Пара кратких статистических данных: на мобильные устройства приходится 41 процент всех кликов по платному поиску и 31 процент всех расходов на платный поиск (Merkle RKG) и 53 процента всех открытий электронной почты (Litmus). Учитывая мобильные тенденции, эти цифры не уменьшатся в ближайшее время.

Результаты создания контента, действительно оптимизированного для мобильных устройств, могут быть ошеломляющими. Act-On обнаружил 93,5-процентное увеличение потенциальных клиентов благодаря адаптивному дизайну. Какие еще простые решения могли бы мгновенно удвоить ваши продажи?

Три шага по оптимизации вашего контента для адаптивного дизайна.

1. Планировать по отделам

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

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

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

2. Расставьте приоритеты контента в четкой иерархии

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

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

Сокращение содержания до мобильного размера

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

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

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

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

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

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

~ Хотите изучить все приемы адаптивного веб-дизайна, включая управление процессом разработки, оценку затрат и переход на мобильные устройства? Посмотреть весь вебинар «Адаптивный дизайн: 10 правил, которые можно и нельзя делать для веб-страниц и электронной почты».