Breadcrumbs

Чек-лист по адаптивной верстке сайта

Сегодня адаптивная версия сайта является уже необходимостью, так как доля пользователей, использующих в качестве основного устройства выхода в интернет телефон достигает порядка 40% в рунете.

  • Проверить доступность программных файлов для поисковых роботов

С помощью инструментов в панели вебмастера Яндекс и Google проверить доступность картинок, js- и css-файлов для поисковых роботов в файле ROBOTS.TXT

  • Проверить скорость загрузки страниц

Для поисковых систем скорость загрузки страниц является одним из факторов ранжирования сайта в выдаче. Поэтому обязательно нужно проверять скорость загрузки, например, с помощью сервиса Google PageSpeed - https://developers.google.com/speed/pagespeed/insights/

  • Проверить наличие мета-тега viewport

Пример: < meta name="viewport" content="width=device-width, initial-scale=1.0" >

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

  • Проверить наличие FAVICON для мобильных устройств

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

Принято делать несколько иконок различного размера для устройств на платформе Android и iOS. Но можно обойтись и одним вариантом иконки, например:
< link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/ >
размером 114х114 px.

  • Проверить отображение контента - на всю ширину экрана

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

  • Проверить размер шрифта

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

  • Проверить размеры кнопок

Проверьте, что во все интерактивные элементы – элементы, на которые можно кликнуть – легко попасть пальцем взрослого человека

  • Проверить расстояние между элементами и блоками

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

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

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

  • Проверить отсутствие pop-up окон

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

  • Проверить удобство работы навигации

Проверьте, что все необходимые пункты меню доступны в мобильной версии (включая выпадающие подменю). И не забудьте про «хлебные крошки» – они помогут посетителю понять, в каком разделе сайта он находится.

  • Проверить ссылки на номерах телефонов

Поставьте ссылки с номеров телефонов для быстрого набора их с мобильных устройств. Пример кода кликабельной ссылки на телефоне:

< a href="tel:83852603533" >+7 (3852) 603-533< /a >