У вас есть «отзывчивый сайт»? Это сайт с макетом, который изменяется на основе устройства посетителя и размера экрана. Отзывчивый веб-дизайн в настоящее время является передовой практикой в отрасли. Он рекомендуется Google и найден на миллионах сайтов через Интернет. Однако существует большая разница между наличием веб-сайта, который просто «подходит» для разных размеров экрана и имеет сайт, который действительно отзывчив.
Я регулярно вижу, как компании редизаят свой сайт и выпускают пресс-релиз, восхваляющий достоинства их нового мобильного дизайна. Когда я посещаю эти сайты, то, что я часто нахожу, это макет, который действительно масштабируется и изменяется, чтобы соответствовать другим экранам, но это касается того, насколько они воспринимают отзывчивость. Этого недостаточно. По-настоящему отзывчивый веб-сайт делает больше, чем просто масштаб, чтобы соответствовать меньшему или большему экрану. На этих сайтах вы также найдете следующие важные черты.
1. Оптимизированная производительность
Никто не любит ждать загрузки веб-сайта, и когда кто-то использует мобильное устройство с подключением, которое может быть менее идеальным, необходимость в быстром загрузке сайта еще важнее.
Итак, как вы оптимизируете производительность своего сайта? Если вы начинаете работу с новым сайтом в рамках редизайна, вы должны сделать так, чтобы создать бюджет производительности как часть этого проекта. Если вы работаете с существующим сайтом и не начинаете с нуля, первым шагом является проверка производительности вашего сайта, чтобы увидеть, где вы стоите сегодня.
Когда у вас есть базовый уровень того, где ваш сайт стоит по производительности, вы можете начать делать необходимые улучшения для увеличения скорости загрузки. Отличное место для начала - это, вероятно, изображения вашего сайта. Слишком большие изображения являются виновниками №1, когда речь заходит о медленных загрузках сайтов, поэтому оптимизация изображений для веб-доставки может действительно помочь вашему сайту с точки зрения производительности.
Реальность заключается в том, что улучшенная производительность сайта и быстрая скорость загрузки - это то преимущество, которое оценят все посетители. В конце концов, никто никогда не жаловался, что сайт загружен «слишком быстро», но если сайт занимает слишком много времени для загрузки, он полностью отключит людей, будет ли он «соответствовать» на своем экране или нет.
2. Иерархия интеллектуального контента
Когда веб-сайт отображается на большом экране, вы можете размещать контент различными способами из-за существенной доступной экранной недвижимости. Вы можете часто размещать важные сообщения и изображения, обновления новостей, информацию о событиях и навигацию по сайту на экране одновременно. Это позволяет посетителю легко и быстро сканировать содержимое всей страницы и решать, что для них важно.
Этот сценарий сильно меняется, когда вы принимаете этот дизайн сайта и преобразуете его для устройств с маленькими экранами, например, сотового телефона. Вдруг вы работаете с частью экрана, которую вы имели раньше. Это означает, что вам нужно решить, что будет отображаться первым на сайте, что последует за ним и т. Д. Вместо того, чтобы все сразу видно, вы, вероятно, имеете только пространство, чтобы показать одну или две вещи (одна из которых, вероятно, является навигацией). Это означает, что необходимо принимать решения по иерархии. К сожалению, то, что часто определяет, что происходит первым на экране, а затем второе и т. Д. - это то, как кодируется сама страница. Это проще всего при создании отзывчивого сайта, чтобы отобразить все, что первым в коде сначала на экране, а затем второй элемент в коде и так далее. К сожалению, то, что может быть самым важным на одном устройстве, может быть не столь критичным для другого. По-настоящему отзывчивый сайт понимает, что иерархия контента должна меняться в зависимости от разных ситуаций, и она должна быть умной относительно того, что она отображает где.
Улучшения в методах компоновки CSS, в том числе CSS Grid Layout, Flexbox и т. Д., Позволяют веб-дизайнерам и разработчикам больше вариантов, когда речь заходит о разумном размещении контента, а не о том, чтобы точно определить порядок содержимого в HTML-коде. Использование этих новых методов компоновки станет еще более важным, поскольку ландшафт устройства и потребности пользователей нашего сайта продолжают развиваться.
3. Опыт, который учитывает сильные и слабые стороны устройства
Пребывание на тему устройств - каждое устройство, которое кто-то может использовать для посещения вашего сайта, имеет как сильные и слабые стороны, присущие этой платформе. Отличный отзывчивый сайт понимает возможности и ограничения различных устройств и использует их для создания настраиваемых событий, которые лучше всего подходят для любого устройства, которое посетитель может использовать в данный момент.
Например, мобильный телефон включает в себя ряд функций, которые вы не найдете на традиционном настольном компьютере. GPS - один из примеров мобильно-ориентированной функции (да, вы также можете получить общую информацию о местоположении на настольных компьютерах, но GPS-устройство гораздо точнее). Ваш сайт может использовать информацию GPS, чтобы наглядно отправить человеку очень подробную и конкретную пошаговую информацию о направлении или специальные предложения, основанные именно на том, где они находятся в данный момент.
Другим примером этого принципа на практике будет сайт, который понимает, какой экранный экран вы используете, и отправляет изображения, которые лучше всего подходят для этого дисплея. Если у вас есть экран с высокой плотностью пикселей, вы можете решить отправить изображения более высокого качества на этот экран. Тем не менее, эти же изображения были бы бессмысленны на менее функциональном экране, и дополнительное качество было бы потеряно, в то время как дополнительный размер файла был бы загружен по какой-либо причине.
На самом деле очень отзывчивые сайты рассматривают весь пользовательский опыт и работают над тем, чтобы адаптировать этот опыт не только к типу устройства или размеру его экрана, но и к другим важным аспектам аппаратного обеспечения.
4. Контент с контекстом
Первоначально, отзывчивый веб-дизайн получил свое название из-за идеи макета сайта, отвечающего на разные размеры экрана, но вы можете реагировать на столько больше, чем просто размер экрана. Основываясь на предыдущем примере использования сильных и слабых сторон устройства, вы можете использовать их, а также другие данные, такие как дата и время, для реальной настройки веб-сайта.
Представьте себе сайт для крупного выставочного мероприятия. Хотя отзывчивый веб-сайт изменит макет страниц сайта на масштаб с помощью разных экранов, вы также можете использовать дату, чтобы определить, какой контент наиболее важен для отображения. Если это период времени до события, вы, вероятно, захотите отобразить регистрационную информацию. Если, однако, событие на самом деле происходит в этот момент, регистрация не может быть самым важным контентом. Вместо этого вы можете сказать, что расписание событий в день более критично, поскольку оно более актуально для непосредственных потребностей этого пользователя.
Сделав шаги еще дальше, вы можете использовать GPS-устройство устройства, чтобы определить, где они находятся на выставке. Вы можете дать им интерактивный контент на основе их местоположения, показывая им соседние кабины или сеансы, которые нужно начать.
5. Доступность
В последнем примере мы рассмотрим, как сайт может действительно реагировать на потребности посетителя, - это думать о доступности веб-сайта. Сайты должны быть доступны как можно большему числу людей, в том числе инвалидам. Ваш сайт должен быть доступен кому-то, кому требуется программа для чтения с экрана или другое вспомогательное программное обеспечение для доступа к его контенту. Таким образом, ваш сайт отвечает их потребностям, потому что вы обеспечили, чтобы опыт, хотя и отличался для посетителей с ограниченными возможностями, по-прежнему уместен.
Отвечая на максимально возможное количество точек данных, а не только на размер экрана, веб-сайт может быть намного больше, чем просто «мобильным». Он может стать действительно отзывчивым опытом во всех смыслах этой фразы.
