В 2024 мобильная версия сайта за дополнительную плату, серьезно? Если у вас с разработчиками возник подобный вопрос, то примите наши соболезнования. На связи веб-студия «По маслу» и мы вам поможем разобраться в этом.
В текущее время наверно уже 90% всего трафика идет с мобильных устройств. Обделять пользователей мобильный устройств удобством при выборе ваших услуг - это самоубийство продвижения бизнеса в поиске.
Ниже в статье мы постарались простым языком объяснить как технически происходит работа по адаптации сайта к различным устройствам.
1️⃣ Практически у каждого сайта верстка начинается на десктопной (компьютерной) версии шириной макета в диапазоне от 1024 до 1366 пискелей, то есть ширина экрана ноутбука. Этого вполне достаточно чтобы сайт отлично выглядел даже на 4к телевизорах.
На скриншоте ниже представлен пример как на экране шириной 1920 пикселей расположен макет сайта (серый фон) с фиксированной шириной в 1366 пикселей и содержимым внутри. Голубой прямоугольник это шапка сайта, зеленые квадраты - карточки с товарами, с левой стороны серые полоски - сайдбар с фильтрами сортировки или категориями товаров.
При открытии этой же страницы на ноутбуке макет растянется по всей ширине экрана.
В диапазоне ширины экранов от 1024 до 1366 (ноутбук) пикселей все содержимое будет сжиматься при уменьшении ширины, пока не придет в точку 1023 пикселя. Идем дальше к планшету.
2️⃣ Следующим шагом сверстанный макет адаптируется к ширине планшета от 768 до 1024 пикселей. В этом диапазоне идет отдельная расстановка элементов на странице. В этом скриншоте показано два варианта размещения содержимого на планшетной ширине экрана.
С левой стороны скриншот подразумевает что вывод товаров будет не в 3 колонки, как на десктопной ширине, а в 2.
С правой стороны сайдбар занял 100% ширины экрана, тем самым сместил вывод товаров, сохранив количество колонок в 3 шт.
3️⃣ Завершающим этапом в адаптиве макета диапазон 320-768 пикселей - это смартфон вертикальной и горизонтальной ориентации. В этом этапе идет так же свое расположение элементов. Товары тут уже будут в 1 ряд. Либо в 2, но карточке товара уже также будет сделан свой адаптив.
✅ Это был приведен пример базовых настроек адаптации одного блока сайта. Некоторые специалисты, либо студии ленятся делать адаптив или берут за это отдельную плату. Мы считаем что это преступление по отношению к заказчику. В текущее время посетители со смартфонами на сайтах составляет больше половины всего трафика. Адаптив должен делаться по умолчанию, как и множество других операций, чтобы сайт выглядел абсолютно на всех устройствах и браузерах корректно и справлялся со своими задачами.