Аудит мобильного сайта

05.03.2014 Аналитика и юзабилити
Аудит мобильного сайта

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

audit.jpg

Этап интеграции

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

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

Сайты с динамическим содержимым должны при передаче данных отдавать заголовок HTTP Vary, чтобы браузеры знали о вероятном изменении контента в зависимости от User Agent.

Если мобильный сайт является измененной копией оригинала, то следует добавить в код страниц метатег rel со значением alternate или canonical. Первый обозначит наличие второй версии страницы для мобильных устройств, а второй - существование версии для десктопов.

Техническая сторона

Google Webmaster Tools позволяет узнать, насколько успешно поисковик справляется со сканированием сайта. Лог ошибок доступен во вкладке Crawl Errors в подразделе Crawl. В отчет включена ссылка на проблемную страницу. Помните, что страницы с долгим временем загрузки Google обходит стороной.

Добавьте и убедитесь в корректности sitemap XML для мобильной версии. Данный файл поможет Google найти и правильно внести в индекс все страницы сайта. Проверить корректность можно в Google Webmaster Tools при помощи карты проиндексированных страниц.

Скорость - залог успеха. Google Chrome позволяет провести мгновенный аудит сайта, для чего достаточно открыть панель разработчиков и перейти во вкладку Audits. На мобильном же устройстве оценить скорость можно вручную.

Редиректы должны указываться на сервере, а не на клиенте (например, JS). В первом случае сразу начнется загрузка целевой страницы, во втором - сперва прогрузится "пустышка". Кроме того, Google сумеет быстрее обновить проиндексированные страницы, если встретит серверное перенаправление.

Оформление

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

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

Flash - первостепенный враг мобильных устройств. Он не поддерживается iOS и сильно замедляет работу Android. Некоторые видеохостинги конвертируют загруженные файлы во Flash - избегайте размещения подобного контента.

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

Привыкайте к работе с viewport - этот тег поможет мобильным браузерам подобрать верный размер страницы.

Избавьтесь от popup-рекламы, даже с собственной рекламой. Они ужасно неудобны при работе с мобильными устройствами и вызывают сильное раздражение, при этом замедляя загрузку страницы.

Если используется адаптивный дизайн, стоит проверить доступность всех элементов управления. Важные ссылки (например, кнопка "добавить в корзину") перепроверьте дважды.

Навигация

Мобильные пользователи не должны чувствовать себя обделенными - сохраните навигацию в полном объеме

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

Контент

Чаще всего большие объемы контента выгоднее разбить на несколько страниц, чтобы загрузка на мобильных устройствах занимала меньше времени.

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

Оптимизируйте изображения

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

Видеоконтент

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

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

Особенности поисковой выдачи

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

Последним шагом проверки станет W3C's mobileOK checker или альтернативные программы для поиска ошибок в разметке. Они помогут избавиться от потенциальных проблем в будущем, устранив их на раннем этапе.

 
Больше интересных статей

Оставьте номер телефона, чтобы наш менеджер связался с вами в удобное для вас время

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
9:00 9:15 9:30 9:45 10:00 10:15 10:30 10:45 11:00 11:15 11:30 11:45 12:00 12:15 12:30 12:45 13:00 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 15:30 15:45 16:00 16:15 16:30 16:45 17:00 17:15 17:30 17:45
Виды услуг
ОбзорМаксимальный размер файла - 10 мб