Адаптивный сайт: что это такое и зачем он нужен | Сайтодром

Что такое адаптивный сайт?

Создание сайтов

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

Вроде сайт есть и он работает, а пользоваться невозможно. Кнопка заказа не влезает в экран и её надо искать где-то сбоку. На телефон нельзя нажать и сразу позвонить, приходится запоминать его и набирать вручную. Все баннеры и акции слились в одно целое или наоборот перекрыли всю остальную контент-область.  Какова вероятность, что человек останется на таком сайте надолго? Как показывает статистика очень мала. Чаще всего он уходит на схожие ресурсы, в которых есть адаптивная версия сайта.

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

Как это работает

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

Основные признаки адаптивности

  • Макет сайта подстраивается под устройство на котором его открывают.
  • Масштабируемые изображение.
  • Блоки сайта перестраиваются под разрешение и размер экрана.
  • Весь контент на сайте помещается на экран, он хорошо виден, легко читается.
  • Шрифт сайта также увеличивается или уменьшается в зависимости от устройства.
  • На все кнопки и баннеры можно легко нажать пальцем.
  • На сайте нет горизонтальной прокрутки.

Также существуют специальные сервисы для проверки адаптивности сайта. Наиболее популярные: Google Mobile-Friendly Test, Resizer, Adaptivator, Screenfly, I Love Adaptive, Browserling.

Для проверки отображения на мобильных достаточно будет Google Mobile-Friendly Test. Если хотите убедиться, что сайт хорошо отображается на разных экранах используйте Resizer, Adaptivator, Screenfly.
I Love Adaptive помимо адаптивности покажет также скорость загрузки и валидность кода.
Browserling — платный сервис. Больше подходит для профессионального использования. На нём можно не просто протестировать сайт на мобильность, но и убедиться в корректной работе на разных ОС и браузерах. 

Адаптивность нужна всем сайтам

В 2020 году маркетплейс Deal.by провел ежегодное исследование E-data. Вот его результаты: только 36% пользователей делают заказы с ПК, остальные 64 используют для этого смартфоны. За последний год количество заказов с компьютеров уменьшилось на 19%.

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

Преимущества адаптивных сайтов:

  • Корректное отображение на любых устройствах, мониторах, расширениях.
  • Выше позиции в выдаче при запросе со смартфонов и планшетов.
  • Страницы сайта быстрее загружаются на мобильных устройствах.
  • Возможность показать посетителям важную информацию в удобном формате.
  • Быстрый звонок или отправка писем и сообщений напрямую с сайта.
  • Возможность определения геолокации.
  • Повышение лояльности посетителей, рост продаж.

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

Можно добавить адаптивность на уже существующий сайт

Всё зависит от характеристик сайта, как давно и на какой платформе он сделан. Чаще всего адаптивность в большей или меньшей степени можно добавить к любому сайту. Но важно оценить на старте объём работ. Иногда для того, чтобы сделать старый сайт адаптивным, понадобится времени больше, чем на разработку нового. 

Многие не хотят делать новый сайт, так как постоянные покупатели уже привыкли к старому или боятся потерять позиции в выдаче. Но если людям будет удобнее пользоваться новым сайтом они будут только рады переменам. А для сохранения позиций рекомендуем подключить к работе над редизайном сайта грамотного seo-специалиста.

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

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

Все новые сайты мы по умолчанию делаем адаптивными. Ориентировочную стоимость разработки и наш подход к созданию сайтов можно посмотреть здесь

Цена доработок на текущем сайте будет зависеть от:

  • Текущего состояния сайта.
  • Необходимости подключения дизайнера.
  • Срочности заказа.

Напишите или позвоните и мы проведём бесплатный аудит вашего ресурса и оценим возможность его доработки.