Использование адаптивного веб-дизайна для поддержки нескольких устройств

Найдите минутку и подумайте обо всех принадлежащих вам устройствах, которые можно использовать для просмотра веб-сайтов. Если вы похожи на большинство людей, этот список вырос за последние несколько лет. Скорее всего, оно включает в себя традиционные устройства, такие как настольный и / или портативный компьютер, а также устройства, которые стали популярными за последние несколько лет, включая смартфоны, планшеты, носимые устройства, игровые системы и многое другое. У вас может даже быть техника в вашем доме или экран в вашем автомобиле, который позволяет подключаться к Интернету! Суть в том, что ландшафт устройств все время расширяется и становится все более разнообразным, что означает, что для процветания в Интернете сегодня (и в будущем) веб-сайты должны быть построены с отзывчивым подходом и CSS-медиа-запросами и должны учитывать, как люди, скорее всего, объединят эти разные устройства в один опыт работы в Интернете.

Введите пользователя с несколькими устройствами

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

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

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

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

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

Другие сценарии

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

  • Ищу автомобиль для покупки
  • Планирование отпуска
  • Чтение новостных статей
  • Изучение идей обустройства дома
  • Ищу местных подрядчиков / услуги
  • Планирование свадьбы или другого большого события
  • После спортивной команды или спортивного мероприятия

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

Лучшие практики для подражания

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

  • Адаптивный сайт — Адаптивная компоновка, которая может адаптироваться и изменяться для разных размеров экрана, имеет решающее значение для поддержки разнообразных доступных сегодня сетевых устройств
  • Весь контент должен быть доступен — Если кто-то может получить доступ к определенному контенту или функциям при посещении сайта на одном устройстве, он ожидает, что они также будут доступны при возвращении на другие устройства. Контент должен быть представлен таким образом, чтобы он подходил для каждого устройства, но контент не должен быть «скрытым» или «отключенным» для определенных устройств.
  • Читаемость является ключевым — Независимо от того, какие устройства или какой размер экрана используется для посещения веб-сайта, важна легкость чтения этого сайта. Это означает, что типография является важным элементом дизайна, на котором нужно сосредоточиться. Если кому-то трудно читать контент сайта, он, скорее всего, вообще покинет сайт.
  • Последовательность среди разнообразия — Несмотря на то, что макет, представленный для каждого отдельного размера экрана, будет отличаться, между устройствами должно быть согласованность Общее взаимодействие должно быть связано с тем, чтобы пользователям не приходилось переучивать сайт каждый раз, когда они посещают его на новом экране.
  • Сделать производительность приоритетом — Веб-сайты должны загружаться быстро и хорошо работать на всех устройствах, включая мобильные устройства с неидеальной скоростью загрузки. Общая эффективность сайта должна быть приоритетом во всех аспектах дизайна и разработки сайта — в конце концов, никто никогда не скажет, что сайт загружался слишком быстро или работал слишком хорошо!

Под редакцией Джереми Жирара

Ссылка на основную публикацию