Ноябрь 2, 2018

Кейс: адаптивный веб-дизайн

Кейс: адаптивный веб-дизайн

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

Еще немного теории

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

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

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

Кейс: адаптивный веб-дизайн

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

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

Адаптивный веб-дизайн на примере: «шапка» сайта

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

Десктоп (широкий экран)

В качестве базового возьмем стандартное разрешение для персональных компьютеров – 1920 пикселей в ширину:

Кейс: адаптивный веб-дизайн

Ноутбук

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

Кейс: адаптивный веб-дизайн

Планшет

Далее рассмотрим разрешение для планшета – 991 пиксель в ширину. Такая ширина потребовала от нас внести некоторые изменения в «шапке» сайта. А именно: скрыто слово «Присоединяйтесь» в блоке соцсетей, а основные элементы расположены в 2 уровня. Все кнопки, надписи и изображения не мешают друг другу, а функциональность сохранилась на 100%.

Кейс: адаптивный веб-дизайн

Смартфон (480 пикс.)

Следующим разрешением будет мобильное разрешение – 476 пикселей. Тут изменения уже более заметны:

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

Смартфон (320 пикс.)

Мобильное разрешение шириной экрана от 320пх до 475пх. Здесь нет ничего лишнего, все значки интуитивно понятны, кнопки большие, тексты хорошо читаемы. Дизайн «шапки» крайне лаконичный, но при этом легко вмещается на один экран, не требует увеличения на экране смартфона, смысл каждого элемента легко улавливается и без поясняющих надписей.

Кейс: адаптивный веб-дизайн

Резюме

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

Кейс: адаптивный веб-дизайн

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Scroll Up