Чек-лист для аудита мобильного сайта

В 2014 году уже не стоит вопрос о том, нужен мобильный сайт или нет. Сегодня актуальна другая проблема — как создать хороший мобильный сайт. Мобильные сайты ничем особенно не отличаются от обычных. Но редизайн вашего сайта под очень маленькие экраны и его соединение с основной версией дают много поводов для размышлений.

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

Соединение вашего мобильного сайта с основным

Проверьте ваши редиректы.

• Установлены ли редиректы, перенаправляющие посетителей именно на ту страницу, которую они хотели просмотреть, а не на главную?
• Перенаправляются ли пользователи в случае необходимости на мобильную версию сайта?
• Перенаправляются ли пользователи в случае необходимости на обычную версию сайта?

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

• Это легко сделать?

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

Регулярно обновляемые сайты: Проверьте заголовок HTTP Vary.

• Вы установили заголовок HTTP Vary, чтобы сообщить Google и браузерам, что вы меняете HTML в зависимости от user-agent?

Разные URL мобильной и основной версии сайта: Проверьте теги rel=alternate/canonical.

• Страницы обычного сайта созданы с тегом rel="alternate", указывающим на мобильную версию этой страницы?

В заголовок добавить: < link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.domain.com" / >

• Страницы на мобильной версии сайта созданы с тегом rel="canonical", указывающим на обычную версию сайта?

В заголовок добавить: < link rel="canonical" href="http://www.domain.com" / >

Технические вопросы

Используйте Google Webmaster Tools, что узнать, испытывает ли Google трудности при сканировании вашего мобильного сайта.

• Проверьте Crawl > Crawl Errors и выберите Smartphone tab. Так вы сможете просмотреть URL, которые являются проблемой для мобильного сканирования.
• Если страница долго открывается, Google не будет ее индексировать.

Проверьте/добавьте мобильный sitemap XML.

• Были ли все страницы мобильной версии сайта представлены Google с помощью sitemap XML в Google Webmaster Tools?
• Держите мобильные страницы отдельно от обычных; Google Webmaster Tools сообщает количество проиндексированных страниц в отдельной карте сайта. Если вы держите страницы каждой версии сайта отдельно, то сможете увидеть, что мобильные страницы индексируются меньше, чем обычные.

Просмотрите мобильный сайт так же, как вы просматривали бы обычный.

• «Чек-лист для аудита технического сайта» Джефа Кеньона — отличное начало.

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

• Google предлагает отличный инструмент проверки скорости сайта, который дает ряд рекомендаций, основанных на сканировании вашего ресурса.

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

Используйте серверные редиректы.

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

Дизайн

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

• Сайт хорошо выглядит на разных телефонах?

Проверьте топовые телефоны. Хороший пример —iPhone (iOS), Samsung Galaxy S4 (Android), Nexus 5 (другой Android) и Nokia Lumia 520 (Windows).

Проверьте топовые телефоны, которые — исходя из данных веб-аналитики — используют ваши посетители.

• Сайт хорошо выглядит на разных планшетах?

Проверьте топовые планшеты. Хорошими вариантами будут iPad (iOS), Samsung Galaxy Tab в разных размерах (Android), Kindle Fire (Amazon) и Asus Transformer Book (Windows).

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

Проверьте размер ссылок.

• Есть ли между ссылками интервал 28×28 пикселей, чтобы на них было удобно нажимать пальцем?

Убедитесь, что нет элементов, работающих на Flash.

• iPhone не может воспроизводить Flash-элементы, а на Android они работают медленно.
• Обратите внимание на скрытое использование Flash, например, на Flash Player для видео.

Убедитесь, что дизайн мобильного сайта согласуется с основным.

Используйте тег viewport.

• Настройте тег viewport, чтобы мобильные браузеры могли изменять размер страницы для используемого устройства.

Не используйте pop-up баннеры.

• Нажав на них, пользователь может уйти со страницы, на которой он хотел бы быть.

• Они замедляют время загрузки.

Адаптивные сайты: Посмотрите, где располагаются элементы.

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

Навигация

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

• Часто навигация сводится к минимуму из-за недостатка места. Не допустите этого.

Разные сайты: Ссылки ведут только на основную версию сайта или только на мобильную.

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

Контент

Сопоставьте страницы мобильной и основной версии сайта.

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

Сократите многословный контент.

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

Удалите ненужные изображения.

• Они замедляют загрузку страницы и занимают дополнительное пространство.

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

Видео

Просмотрите видео на мобильном сайте, чтобы убедиться, что они загрузились и нормально работают.

Используйте HTML5 видеоплейер.

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

Адаптируйте свое видео.

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

Различия выдачи

Заголовок каждой страницы хорошо выглядит на двух строках?

• Google отводит на заголовок 70 символов (512 пикселей), но из-за ширины экрана он делится на 2 строки.

Ваш метатег description содержит не больше 120 символов?

• Google обрезает description мобильных сайтов в своей выдаче примерно до 120 символов.

Ваш URL понятен пользователям и содержит ключевые слова?

• Google отображает в мобильном поиске не основной, а мобильный URL, если редиректы настроены верно.

Последняя проверка

• Прогоните страницы через W3C’s mobileOK checker или какой-либо другой инструмент, чтобы убедиться, что вы не допустили маленьких ошибок в коде.