Адаптивный сайт: что это, чем отличается от мобильной версии и как проверить свой сайт

Коротко. Адаптивный сайт — один сайт с одним адресом, у которого блоки, шрифты и картинки перестраиваются под экран. Отдельная мобильная версия — второй сайт для телефонов, который сложнее поддерживать. Для компании важнее не сам факт адаптива, а то, удобно ли с телефона прочитать оффер, нажать на кнопку и отправить заявку. В KORS каждый сайт адаптируем под телефоны и проверяем на реальных устройствах: с телефонов приходит больше половины посетителей.

Ниже — простое объяснение, сравнение подходов, чек-лист проверки и типичные ошибки, из-за которых посетитель с телефона закрывает вкладку.

Адаптивный сайт: что это простыми словами?

Простыми словами, адаптивный сайт — это одна страница, которая «знает», на каком экране её открыли. На широком мониторе карточки товаров стоят в четыре колонки, на планшете — в две, на телефоне — одна под другой. Меню сворачивается в кнопку, таблицы превращаются в карточки, крупные фото подменяются лёгкими.

Технически это делает адаптивная вёрстка сайта: для разных диапазонов ширины экрана задаются свои правила расположения блоков. Посетитель ничего не переключает и не попадает на другой адрес — сайт просто подстраивается.

Почему это важно бизнесу:

• Телефон — основной экран. По нашим проектам с телефонов приходит больше половины посетителей, и в B2B тоже: ссылку на сайт поставщика часто открывают из мессенджера или письма.
• Реклама ведёт на телефон. Клик по объявлению в Яндекс Директе с мобильного стоит тех же денег. Если страница неудобна, бюджет уходит впустую.
• Поиск учитывает удобство. Поисковые системы оценивают, как сайт работает на мобильных устройствах, и это влияет на позиции.

Адаптивная вёрстка сайта или мобильная версия: в чём разница?

Мобильная версия сайта — это отдельный сайт для телефонов, обычно на поддомене вроде m.site.ru. Сервер определяет устройство и отправляет посетителя туда. Адаптив — один сайт для всех экранов.

• Поддержка. У адаптивного сайта один набор страниц: поменяли цену или текст — изменения видны везде. Мобильную версию нужно обновлять отдельно, и она быстро отстаёт от основной.
• Адрес и SEO. У адаптива один адрес на страницу, ссылки и поведенческие сигналы не делятся на два сайта.
• Гибкость. Отдельная версия позволяет сильно упростить сайт для телефона, но этого же можно добиться в адаптиве: скрыть второстепенные блоки и поменять порядок.

Есть и третий вариант — фиксированная вёрстка без адаптива, когда на телефоне показывается уменьшенная копия компьютерной страницы. Такие сайты ещё встречаются у производств, сделанных много лет назад; читать их можно только с увеличением. Для новых сайтов адаптив — стандарт: на конструкторах вроде Тильды он заложен в блоки, о плюсах и ограничениях платформы — в статье о сайте на Тильде.

Что такое адаптивный дизайн сайта и с чего он начинается?

Адаптивный дизайн сайта начинается не с вёрстки, а со структуры: какие блоки увидит человек на маленьком экране и в каком порядке. Хорошая практика — проектировать сразу две раскладки, для компьютера и для телефона, а не «ужимать» готовый макет в конце.

1. Первый экран. На телефоне в него помещается заголовок, одна-две строки пояснения и кнопка. Длинный оффер и три кнопки придётся сократить. Как сформулировать главное — в статье о первом экране сайта.
2. Порядок блоков. На компьютере блоки стоят рядом, на телефоне — друг под другом. Нужно решить, что пойдёт первым: фото или текст, цена или преимущества.
3. Кнопки и формы. Кнопки делают крупными, под палец; поля формы — минимально нужными, с правильной клавиатурой: цифровой для телефона, почтовой для email.
4. Таблицы и каталоги. Широкие таблицы характеристик на телефоне превращают в карточки или дают горизонтальную прокрутку внутри блока, а не всей страницы.
5. Картинки и видео. Для телефона нужны лёгкие версии изображений, а горизонтальные фото иногда стоит заменить кадрированными.

Как проверить адаптивность сайта за 15 минут?

Проверить адаптивность сайта можно без специалистов: возьмите свой телефон и пройдите путь клиента от входа до заявки. Затем повторите на другом телефоне — с другим размером экрана и другой системой.

• Нет горизонтальной прокрутки. Страница не должна «гулять» вбок, когда листаете вниз.
• Текст читается без увеличения. Заголовки не обрезаются, строки не наезжают друг на друга.
• Меню открывается и закрывается. Все разделы доступны, кнопка закрытия видна.
• Кнопки нажимаются с первого раза. Соседние ссылки не стоят вплотную.
• Телефон кликабельный. Нажатие на номер сразу открывает звонок, а кнопки мессенджеров — переписку.
• Форма отправляется. Отправьте тестовую заявку с телефона и проверьте, что она дошла до почты или CRM.
• Скорость. Откройте сайт на мобильном интернете, а не по Wi-Fi: если первый экран грузится долго, часть посетителей не дождётся.
• Всплывающие окна. Попап не перекрывает экран без возможности закрыть его.

Дополнительно полезно посмотреть в Яндекс Метрике отчёт по устройствам: если конверсия с телефонов заметно ниже, чем с компьютеров, проблема почти наверняка в мобильной раскладке. Как считать конверсию и где её смотреть — в статье о конверсии сайта.

Как адаптив влияет на заявки и SEO?

Адаптивный сайт сам по себе заявок не приносит — их приносит понятный оффер. Но плохой адаптив способен обнулить хороший оффер: человек не нашёл кнопку, не смог заполнить форму или устал ждать загрузки.

Для поиска важны те же вещи: удобство на мобильных, скорость загрузки и отсутствие ошибок отображения. Поэтому в полноценном аудите сайта, который мы делаем за 5 дней и 25 000 ₽, отдельный пункт — техника и SEO: скорость, телефон, индексация, формы. Подробнее о том, что проверяют при разборе, — в статье про аудит сайта.

О скорости: на наших сайтах мы сжимаем картинки, а лишние скрипты подгружаем только тогда, когда они нужны. Медленный сайт теряет и посетителей, и позиции в поиске — на телефоне это заметнее всего.

УслугаСайты под ключ с адаптивом: интервью, тексты, дизайн для компьютера и телефона, вёрстка, формы, CRM и Яндекс МетрикаТарифы и сроки →

Сколько стоит адаптивный сайт?

Отдельно «за адаптив» мы не берём: вёрстка с адаптивом входит в создание сайта под ключ вместе с интервью и аналитикой, текстами, дизайном, доменом, формами, CRM, Яндекс Метрикой и базовым SEO. Ориентиры со страницы создания сайтов KORS:

• Лендинг на шаблоне — от 39 000 ₽, от 7 дней.
• Экспресс-лендинг — от 74 000 ₽, от 14 дней.
• Продающий лендинг — от 104 000 ₽, от 21 дня.
• Многостраничный сайт — от 139 000 ₽, от 30 дней.

Если сайт уже есть, но на телефоне выглядит плохо, начните с разбора: бесплатный аудит текущего сайта занимает 1–2 дня, после него понятно, хватит ли доработки мобильной раскладки или выгоднее сделать редизайн. Цены ориентировочные, точная смета фиксируется в договоре.

Частые ошибки

• Проверять адаптив только в окне браузера на компьютере. Эмулятор не покажет, как работает палец, клавиатура и мобильный интернет — нужны реальные устройства.
• Прятать на телефоне важное. Цены, контакты и форму скрывают «ради компактности», и посетителю не за что зацепиться.
• Оставлять тяжёлое видео на первом экране. На мобильном интернете оно грузится дольше, чем человек готов ждать.
• Мелкие кнопки и ссылки вплотную. Промахи раздражают и уводят не туда.
• Длинная форма. Десять полей на маленьком экране почти никто не заполняет.
• Отдельная мобильная версия, которую забыли обновить. На телефоне висят старые цены и снятые с производства позиции.

Вопросы, которые нам задают чаще всего