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

Некоторое время назад Яндекс начал отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а также отдавать им предпочтение при ранжировании.

Платон Щукин опубликовал рекомендации, которые помогут вебмастерам сделать сайт действительно удобным для мобильных девайсов.

1. Какие бывают мобильные сайты

Поисковые роботы с одинаковым приоритетом воспринимают:

• сайты с мобильной версией на поддомене;
• сайты с адаптивной версткой;
• сайты с динамической версткой.

Платон советует обратить внимание на три нюанса:

· Не рекомендуется создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно ее воспринять.

· Если вы остановились на варианте с поддоменом, выбирайте простое и понятное для пользователей доменное имя с явным указанием на мобильный сайт.

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

2. Несколько слов о создании сайта

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

После создания мобильной версии следует просмотреть ее с нескольких мобильных устройств и проверить, удобно ли с ней работать.

3. Как проверить сайт на мобилопригодность

Для проверки сайта можно воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».

4. Что делать, если обнаружены ошибки

Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере, являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.

Горизонтальная прокрутка

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

Как правило, большинство пользователей использует смартфоны c разрешением 320 px, поэтому можно ориентироваться на эту величину. Также следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.

Много мелкого текста

Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы.

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

Отсутствие мета-тега «viewport»

Мета-тег «viewport» позволяет браузеру мобильного устройства понять, что на сайте есть адаптивная верстка. Если выявлено, что на сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере head, что соответствует стандарту HTML.

Кроме того, желательно установить динамическую область просмотра в зависимости от ширины экрана устройства:

meta name="viewport" content="width=device-width, initial-scale=1"

Тогда не придется устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.

Наличие Flash-элементов

Если на сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. Большинство мобильных браузеров не воспринимает форматы Flash, Silverlight и Applet, поэтому лучше их не использовать.