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

Обновлено 22 августа 2022 г.

Откройте страницу с лучшей конверсией на своем веб-сайте на трех устройствах — мобильном телефоне, планшете и компьютере.

Действительно, сделай это. Я буду ждать.

Отображается ли ваш контент так, как вы ожидали?

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

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

И это может быть ошибкой.

Не унывайте, товарищ контент-маркетолог. Я здесь, чтобы помочь с небольшой настройкой – COPE-M.

Понять, зачем нужен COPE-M

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

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

Но COPE не является панацеей для публикации вашего контента. Современные браузеры переформатируют ваш текст, но изображения уменьшаются для ваших устройств. Изображение, которое отлично смотрится на компьютере, может быть неузнаваемо на мобильном устройстве. (Вашей аудитории это не нравится, как и Google, что может повредить рейтингу вашего контента.)

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

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

Изображения не обязательно лучшие друзья COPE

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

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

Изображения не такие податливые. Визуализированная графика (например, файлы JPEG, PNG) не может быть отделена от ее внешнего вида. Один размер из одного источника не всегда подходит всем. Инфографика, которая хорошо выглядит на рабочем столе, может быть нечитаемой на iPhone. Это заставляет зрителя щипать, приближать, щуриться и ворчать, пытаясь его увидеть.

Выберите изображения для нескольких источников

Пока системы управления контентом не станут достаточно умными, чтобы автоматически обеспечивать идеальные впечатления от просмотра каждого изображения на каждом устройстве, вы должны учитывать, когда СПРАВЛЯТЬСЯ, а когда нет СПРАВЛЯТЬСЯ с вашими изображениями.

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

СОВЕТ. Ограничьте выбор страниц теми, которые получают значительный трафик с мобильных устройств.

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

СОВЕТ: Не просто смотрите, отображается ли изображение. Внимательно посмотрите, как он отображается. Если пользователю приходится сжимать и масштабировать изображение, чтобы просмотреть все изображение, COPE, скорее всего, не лучший метод.

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

Дизайн для нескольких экранов

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

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

На этом рисунке показаны три возможные контрольные точки: 320 пикселей для мобильного телефона, 720 пикселей для планшета или большого телефона и 1024 пикселя для ноутбука.

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

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

Вот как это работает с исходным примером. На этот раз я сделал разные фотографии для каждого размера — шириной 800, 400 и 200 пикселей. При публикации их лица примерно одинакового размера.

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

Этот подход не СПРАВЛЯЕТСЯ. Это не основная часть COPE-M. Я создал себе в три раза больше работы. Вот почему вы должны ограничить эту трудоемкую работу только основным конвертирующим контентом.

Посмотрите, как кодируются изображения из нескольких источников

Хотя эта статья не является руководством по написанию такого кода, вам может быть полезно посмотреть, как он выглядит:

Между тегами «picture» я указал три исходных изображения, имена которых основаны на ширине изображения:

• jpg
• jpg
• jpg

Теперь каждое изображение сработает, когда достигнет точки останова:

• 499 пикселей (макс.) для смартфонов
• 799 пикселей (макс.) для планшетов
• 800 пикселей (минимум) для рабочего стола

Заставьте COPE-M работать на ваш бренд

Большинство систем управления цифровыми активами (DAM) могут создавать несколько выходов одного изображения в разных размерах и соотношениях. Если вы не можете переснять фотографии, обрежьте их, чтобы обеспечить наилучшее качество изображения на экранах всех размеров. Это может потребовать много работы, поэтому не просите своих дизайнеров или разработчиков изменить дизайн каждого изображения на вашем веб-сайте. Сосредоточьтесь на воздействии.

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

Как насчет вашей команды? Вы иногда создаете несколько версий своих важных изображений, чтобы они соответствовали разным размерам экрана? Чему вы научились, тестируя свои изображения на нескольких устройствах? Дай мне знать в комментариях.

Изображение на обложке: Джозеф Калиновски/Content Marketing Institute