Адаптивный сайт — это сайт, который автоматически подстраивается под размер экрана. На компьютере блоки стоят в несколько колонок, на смартфоне выстраиваются в одну, меню сворачивается в кнопку, а текст остаётся читаемым без увеличения. Для пользователя это просто «удобный сайт», для бизнеса — обязательное условие.
Почему адаптив обязателен
- Большинство посетителей — с телефона. Особенно в рекламе и соцсетях.
- Google оценивает мобильную версию. Поисковик индексирует и ранжирует сайт прежде всего по тому, как он выглядит и работает на смартфоне.
- Заявки. Если форму неудобно заполнить пальцем, а телефон нельзя нажать, человек просто уходит.
Адаптив, резиновая вёрстка и мобильная версия
Адаптивная вёрстка
Один сайт и один адрес для всех устройств. Дизайн перестраивается по контрольным точкам ширины экрана. Это стандарт сегодня: проще поддерживать, нет дублей страниц.
Резиновая вёрстка
Элементы просто растягиваются и сжимаются пропорционально. На очень узких экранах такой сайт часто становится неудобным, поэтому её обычно сочетают с адаптивом.
Отдельная мобильная версия
Отдельный сайт на поддомене вроде m.site.com. Подход устарел: две версии сложнее поддерживать, а ошибки в настройке приводят к дублям в поиске.
Что входит в хороший адаптив
- Текст читается без увеличения, строки не слишком длинные.
- Кнопки и ссылки достаточно крупные для пальца и не стоят вплотную.
- Нет горизонтальной прокрутки.
- Изображения подгружаются в размере под экран, а не в полном разрешении.
- Формы короткие, с правильной клавиатурой: цифровой для телефона, с @ для почты.
- Телефон кликабелен, мессенджеры открываются в приложении.
- Всплывающие окна не закрывают весь экран.
Типичные ошибки адаптива
- Скрытый контент. На телефоне убирают блоки, «чтобы было короче», а вместе с ними — цены, отзывы и важный для SEO текст. Лучше сократить и переупорядочить, чем прятать.
- Таблицы, которые не помещаются. Широкие таблицы цен уезжают за край экрана. Их стоит перестроить в карточки или дать аккуратную горизонтальную прокрутку внутри блока.
- Липкие элементы на полэкрана. Закреплённая шапка, баннер cookie и кнопка чата вместе закрывают половину экрана телефона.
- Тяжёлые изображения. Картинки в разрешении для монитора грузятся по мобильному интернету секундами.
Адаптив и скорость
Адаптивный сайт должен не только правильно выглядеть, но и быстро загружаться по мобильной сети. Используйте современные форматы изображений (WebP, AVIF), отдавайте картинки под размер экрана, откладывайте загрузку того, что ниже первого экрана, и не подключайте скрипты, без которых можно обойтись.
Как проверить свой сайт
- Откройте сайт на своём телефоне и пройдите путь клиента: найти услугу, цену, оставить заявку.
- Поверните телефон горизонтально — ничего не должно ломаться.
- В браузере на компьютере включите режим разработчика и посмотрите сайт на разных ширинах экрана.
- Проверьте мобильную скорость в PageSpeed Insights.
Если адаптива нет
Старый сайт без адаптива можно доработать, но иногда дешевле и быстрее сделать новый дизайн: старая вёрстка часто сопротивляется переделке. Решение зависит от того, насколько сайт устарел и устраивает ли вас остальное. Мы делаем адаптив частью любого проекта — подробнее в услуге создание сайта под ключ и разработка дизайна.
Частые вопросы
Адаптив увеличивает стоимость сайта?
Сегодня адаптив — стандартная часть разработки, а не дополнительная опция. Если студия предлагает его за отдельные деньги, стоит уточнить, что именно входит в базовую цену.
Нужно ли отдельно рисовать дизайн для телефона?
Да, хотя бы для ключевых страниц. Мобильный дизайн — это не уменьшенный десктоп, а продуманный порядок блоков и размер элементов для пальца.
