Мобильная версия сайта – это то, как сайт отображается на всех мобильных устройствах: планшетах, смартфонах, айфонах в горизонтальной и вертикальной ориентации гаджета.
На всех мобильных устройствах в любом положении и разрешении сайт должен отображаться корректно, контент не должен выходить за пределы экрана или обрезаться, все кнопки и ссылки должны быть читабельными и удобными для клика по ним.
Основные требования к мобильной версии сайта
- Контент не должен выходить за пределы экрана, не должно быть горизонтальной прокрутки.
- Шрифт должен быть не менее 12 px.
- Меню должно быть свернуто в «гамбургер». Десктопное меню очень громоздкое и закроет весь экран мобильного устройства. Поэтому оно, как правило, скрывается и открывается по клику на специальную кнопку.
- Расстояния между пунктами меню должны позволять удобно кликать по ним.
- Кнопки должны быть большими и удобными.
- Текст должен быть хорошо читаемым.
- Элементы дизайна не должны наезжать друг на друга.
- Страницы должны быстро загружаться (не более 3 секунд).
- Картинки и видео должны быть оптимизированы под размер экрана.
- Не должно быть блоков перекрывающих экран и мешающих просмотру контента сайта.
Особенно важна мобильная версия в Google, так как в настоящее время ранжирование сайта в Гугл осуществляется на основе мобильной версии сайта.
Как проверить ошибки в моб. версии сайта
Проверить корректность мобильной версии сайта можно непосредственно при помощи гаджетов, либо воспользовавшись эмуляторами.
Для айфонов обязательно нужно проверить отображение на реальном телефоне, так как эмуляторы не дают реальную картину. Это связано с особенностями операционной системы ios. Некоторые элементы, такие как селекты, номера телефонов и др. отображаются иначе, чем Вы увидите на эмуляторе.
Ошибки мобильной версии сайта можно просмотреть в Google Search Console в пункте удобство для мобильных.
В Яндекс Вебмастере так же есть функционал для проверки ошибок отображения сайта на мобильных устройствах.
При проверки на эмуляторах необходимо проверить сайт на всех мобильных разрешениях для iPhone и Android. Для проверки Вы можете воспользоваться сервисом https://responsinator.com или другими аналогичными сервисами.