Чек-лист по подготовке мобильных-адаптивных страниц

Оптимизация в title и meta-тегов на мобильной версии отсутствует или не совпадает.

10/10

Необходима проверка заголовков окна браузера и meta-тегов у URL mobile-версии. Теги должны быть такими же, как на основной версии сайта.

Внутри контейнеров на документе есть блоки с прокруткой.

8/10

Контейнеры с любым типом прокрутки использовать нежелательно. Подойдите к адаптации сложных блоков и таблиц креативно.

Просмотру препятствуют вплывающие блоки, виджеты и объявления.

7/10

Блок, занимающий на десктопе 5% экрана иногда закрывает на мобильном устройстве значительную часть. Часто таким блоком является, реклама мобильного приложения, которое имеется у проекта. Необходимо сделать так, чтобы рекламные блоки не занимали более 15% экрана.

Перенаправление настроено неправильно

от 5 до 10/10

Характерная ошибка, если имеется отдельная мобильная версия. Она возникает при настройке переадресации по User-agent со всех страниц на главную страницу, а не на тот же документ на mobile версии, либо редирект имеет неправильный код ответа.

Страницы медленно загружаются

5/10

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

Чем медленнее загрузка, тем ниже конверсия.

Meta-тег viewport и область просмотра настроены неверно.

9/10

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

Присутствуют мелкие элементы и блоки. Не читабельный шрифт.

6/10

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

Форма заказа и другие элементы конверсии не оптимизированы

6/10

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

Особое внимание следует уделить процессу добавления товара в корзину и оплате с телефона.

Невозможность работы некоторых функциональных элементов без наведения курсора.

4/10

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

Нет возможности позвонить в один клик.

5/10

Обязательно проследите за тем, чтобы пользователи со смартфонов и других переносных устройств смогли позвонить, нажав на телефонный номер, расположенный в шапке сайта. Чтобы это можно было осуществить, указывайте телефонный номер целиком, с кодом страны и города, применяйте короткий протокол «tel», который задаст ссылке необходимое свойство.

Изображения, JS и CSS-файлы закрыты от индексации.

5/10

Если индексация JS и CSS-файлов запрещена, это считается ошибкой для любого проекта. Особенно критичной она считается в Гугл. Если от индексации закрыты только некоторые скрипты (для нужд SEO), то проблема критической не считается.

На странице присутствует контент, который не воспроизводится.

от 3 до 8/10

Необходимо визуально проверить содержимое основных URL сайта и исправить ошибки. Для анимации можно использовать только HTML5. Критичность зависит от числа проблемных страниц на ресурсе.