Адаптивный веб-дизайн — это подход, при котором сайт корректно отображается на любых устройствах, от смартфона до телевизора.
Некоторые сайты выглядят одинаково и на компьютере, и на смартфоне. С телефона их использовать сложно: маленький шрифт, невозможно попасть по кнопке, контент вылезает за пределы экрана, а реклама перекрывает текст.
Чтобы пользователь не ушел с неудобного сайта, используют адаптивный веб-дизайн. Такой подход подстраивает страницы под разные устройства: под телефон, планшет, нетбук, ноутбук и компьютер.
Адаптивный дизайн появился по ряду причин:
- вырос мобильный интернет-трафик,
- появилось много устройств с экранами разных размеров и разрешений,
- поисковые системы стали ориентироваться в первую очередь на мобильные устройства.
Как работает адаптивный веб-дизайн
При разработке адаптивного сайта создают несколько макетов фиксированной ширины. Стандартный набор состоит из шести самых популярных форматов: 320, 480, 760, 960, 1200 и 1600 пикселей.
Основная цель — сделать сайт функциональным, поэтому учитывают особенности устройств. Например, наличие сенсора или ориентацию экрана.
Адаптивные сайты определяют тип устройства самостоятельно. Когда человек кликает по ссылке, сайт запрашивает у девайса его характеристики. После этого он выбирает подходящий макет под конкретное устройство и показывает его пользователю. Такая операция называется медиа-запросом.
Аналоги адаптивного дизайна
Существует всего два аналога адаптива. По ним можно отследить эволюцию от мобильных версий до адаптивных сайтов.
Мобильная версия
Это отдельный сайт, который дублирует десктопную версию. Он может полностью повторять родительский сайт или иметь другой функционал. Мобильные версии стали популярными, как только интернетом начали пользоваться с телефонов.
Мобильные версии сайтов максимально оптимизированы для смартфонов и планшетов. Они учитывают все особенности: небольшой экран, сенсор, иногда даже операционную систему.
Если верстают отдельную мобильную версию, возникают проблемы: трафик делится на два разных сайта, пользователи уходят из-за «неправильного» адреса, приходится платить за дополнительное администрирование.
Респонсивный дизайн
Это основной конкурент адаптивов. На страницах с респонсивным дизайном контент динамически реагирует на изменение размера окна, сохраняя структуру. Такие сайты ещё называют отзывчивыми, или резиновыми.
Чтобы изменить положение блоков, система использует медиа-запросы, как и в адаптивном дизайне. Но в этом случае все элементы имеют размер в процентах и растягиваются или сжимаются под размер окна.
Резиновый дизайн подходит для сайтов с простой архитектурой. Если на странице много информации в несколько колонок, данные будет плохо видно или они наползут друг на друга.
Отзывчивые сайты грузятся дольше обычного — это может оттолкнуть пользователя.
Зачем использовать адаптивный веб-дизайн
Больше посетителей. В 2022 году в России с телефона интернет использовали на 27% больше пользователей, чем в 2021. Число юзеров, которые посещали сайты с компьютера, снизилось на 10%. Если на страницу удобно заходить только с десктопа, ее посещаемость будет падать.
Выше положение в поисковой выдаче. Системы поиска лучше ранжируют адаптивные сайты. С 2018 года Google следует принципу mobile-first. Поисковик отдает предпочтение страницам, которые адаптированы под мобильные устройства.
Упрощение SEO. Адаптив использует единый URL для всех типов устройств. Контент с сайта не дублируется в поисковой выдаче и не конкурирует сам с собой. Это упрощает работу по продвижению.
Бывают ситуации, когда адаптивный веб-дизайн не нужен. Например, для сайтов, на которые можно попасть только при помощи QR-кода. Его нельзя отсканировать компьютером, поэтому такие страницы верстают только под смартфоны и планшеты.
Как адаптировать дизайн: основные принципы
Чтобы сайт был удобным для пользователей вне зависимости от размера экрана и типа устройства, придерживаются нескольких основных принципов.
Не используйте горизонтальный скроллинг. Это неудобно как на мобильных девайсах, так и на компьютере в большинстве случаев.
Оптимизируйте навигацию по сайту. Экран монитора позволяет оставить боковое меню или разделы сайта раскрытыми. На телефоне или планшете они будут только мешать.
Подберите подходящий размер для кликабельных элементов. Размеры указателя мыши, стилуса и пальца различаются. При адаптации увеличивают сам элемент или область нажатия.
Подберите оптимальный межстрочный интервал, кегль и длину строк. Если текст того же размера, что в десктопной версии, с телефона он будет нечитабельным. И наоборот.
Используйте одинаковый контент. Всё, что пользователь может увидеть с компьютера, должно быть доступно для других устройств. Этот принцип часто не соблюдают, когда создают отдельный сайт с мобильной версией.
Главные мысли
