Адаптивный сайт, для чего нужна адаптивность и как ее проверить.

4.75 1 1 1 1 1 1 1 1 1 1 Рейтинг 4.75 (2 Голосов)

Адаптивность сайтаАдаптивность сайта - это способность вашего сайта правильно отображаться на устройствах с разным разрешением (размером) экрана. 

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

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

Процент использования устройств в России за первое полугодие 2019 года:

  • Смартфоны 51,22 %
  • Десктоп 44,89 %
  • Планшеты 3,90 %.

График изменения использования устройств с начала 2016 по середину 2019, за 3,5 года

График изменения использования устройств 2016-2019г

 

Принцип базовой реализации адаптивной верстки для разных устройств:

Реализации адаптивной верстки, ПК версия:

  1. Логотип сайта
  2. Основное расширенное меню
  3. Слайдер ("резиновый")
  4. Основной контент
  5. Правое дополнительное меню
Адаптивность сайта, ПК версия

 

Реализации адаптивной верстки, версия для планшета:

Основное меню переходит в мобильное всплывающее что бы не расплывалось в несколько строк. Отключается правое меню уступая больше места основному контенту, для улучшения читабельности.

  1. Логотип сайта
  2. Мобильное всплывающее меню
  3. Слайдер ("резиновый")
  4. Основной контент
  5. -
Адаптивность сайта, версия для планшета

 

Реализации адаптивной верстки, мобильная версия:

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

  1. Логотип сайта
  2. Мобильное всплывающее меню
  3. -
  4. Основной контент
  5. -
Адаптивность сайта, мобильная версия

 

 Сервисы проверки сайта на адаптивность.

Mobile-friendly - Google в автоматическом режиме проверяет страницу на адаптивность к мобильным устройствам и выдает результат адаптивен либо нет. Вам только остается ввести адрес страницы который надо проверить. 

В Google Search.Console так же можно посмотреть какие есть проблемы с мобильной версией сайта Mobile.Usability

Screenfly - Внешний и довольно удобный ресурс проверки сайта на адаптивность. Вводите адрес проверяемой страницы, выбираете устройство, разрешение экрана и смотрите как выглядит страница.

Проверить адаптивность сайта в браузере:

  • Google Chrome - F12 переходим в режим разработчика после комбинацию клавиш Ctrl+Shift+M;
  • Mozilla Firefox -  Меню -> Разработка -> Адаптивный дизайн; либо комбинация клавиш Ctrl+Shift+M.

 

P.S. Во многих случаях намного проще, быстрее и менее затратно поменять шаблон сайта с простого на адаптивный, чем переделывать текущий.