Эта статья предназначена для маркетологов, которые пошли по пути создания мобильной версии сайта или динамического показа данных для разных групп пользователей. В ней вы найдете список вопросов для оперативного контроля корректности использования мобильного сайта. Этот чек-лист поможет вам исправить распространенные ошибки, а также использовать методы оптимизации под мобильный трафик, о которых иногда забывают даже опытные специалисты.
Как проверить мобильную версию сайта
Представьте себе следующую ситуацию: вы обратились в студию веб-дизайна, чтобы получить мобильную версию сайта. В указанный срок сотрудники студии сдали работу. На экране вашего смартфона сайт выглядел нормально, ссылки работали, страницы открывались быстро. Поэтому вы поблагодарили партнеров и отправились в свой офис.
Теперь вы сидите в кабинете и ждете реакции аудитории на появление мобильной версии сайта. Чтобы ее оценить, вам придется подождать несколько недель. А чтобы не выглядеть глупо в глазах пользователей, потратьте полчаса на самостоятельный аудит мобильной версии. Предложенный ниже контрольный список поможет вам обнаружить и устранить распространенные ошибки.
Объединение мобильной и полной версий сайтов
1. Проверьте редиректы
- Перенаправляются ли пользователи на мобильную версию сайта, если они используют для серфинга смартфоны или планшетные ПК?
- Если мобильный пользователь желает перейти на внутреннюю страницу сайта, попадет ли он на нее или будет перенаправлен на главную?
- Если владельцы стационарных ПК попадают на мобильный сайт по ссылке, будут ли они перенаправлены на полную версию сайта?
Редиректы настроены правильно, если вы ответили на эти вопросы утвердительно. Мобильные пользователи должны перенаправляться на мобильную версию сайта. Посетитель должен попадать на выбранную страницу, а не на главную мобильной версии. Владельцы стационарных ПК должны попадать на полную версию сайта. Однако оставляйте им возможность вернуться на мобильную страницу.
2. Позвольте мобильным пользователям работать с десктопной версией сайта
- Может ли мобильный пользователь легко перейти на полную версию сайта?
- Если мобильный пользователь выбрал полную версию, останется ли он на ней после перехода на новую страницу? Или при каждом переходе его будет выбрасывать на мобильную версию?
Редиректы настроены верно, если пользователь может быстро выбрать полную версию сайта и оставаться на ней после переходов.
3. Проверьте возможность динамического показа
- Добавлен ли в HTML-код сайта HTPP-заголовок Vary: User-Agent?
Этот заголовок сообщает поисковым системам и браузерам, что выбор версии сайта должен осуществляться в соответствии с типом гаджета клиента.
4. Проверьте атрибуты для мобильных и полных версий сайта
- Добавлен ли HTML-код полной версии сайта тег rel="alternate"?
- Добавлен ли в HTML-код мобильной версии сайта тег rel="canonical"?
Чтобы браузеры показывали мобильную версию сайта владельцам смартфонов и планшетов, добавьте в шапку полной версии такую строчку: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.moysait.com" />.
Чтобы браузеры показывали полную версию сайта владельцам десктопов, добавьте в шапку мобильной версии следующую строчку: <link rel="canonical" href="http://www.moysait.com" />.
На какие технические аспекты обратить внимание
1. Проверьте, индексируют ли поисковые системы мобильный сайт
- Есть ли сообщения об ошибках в сервисе для веб-мастеров Google?
- Есть ли сообщения об ошибках в сервисе «Яндекс.Вебмастер»?
Чтобы проверить наличие ошибок с помощью сервиса для веб-мастеров Google, воспользуйтесь меню «Индекс Google — статус индексирования». Чтобы проверить наличие ошибок с помощью сервиса «Яндекс.Вебмастер», воспользуйтесь меню «Индексирование сайта — исключенные страницы».
2. Создайте или проверьте мобильную карту сайта
- Все ли страницы мобильной версии сайта указаны в карте сайта?
- Одинаково ли количество страниц в мобильной и полной версии сайта?
Создайте отдельные карты для полной и мобильной версий. Это поможет вам следить за количеством проиндексированных мобильных страниц и сравнивать его с количеством проиндексированных страниц полной версии. О создании мобильной карты сайта читайте здесь.
3. Проверьте скорость загрузки мобильной версии сайта
- Насколько быстро загружается сайт?
Скорость загрузки относится к критически важным направлениям оптимизации мобильных сайтов. Чтобы проверить этот критерий, воспользуйтесь инструментом Google PageSpeed Insights. Этот инструмент не только поможет вам определить скорость загрузки, но и подскажет, как улучшить этот показатель.
Соответствует ли дизайн нуждам пользователей
1. Проверьте, как выглядит сайт на экранах разных мобильных гаджетов
- Удобно ли просматривать сайт на экране смартфонов?
- Удобно ли просматривать сайт на экране планшетов?
Проверяйте внешний вид сайта с помощью нескольких гаджетов одного типа. Выбирайте девайсы с разным размером экрана, работающие на разных операционных системах. Попробуйте открыть сайт с помощью смартфонов iPhone (iOS), Samsung Galaxy (Android), Nokia Lumia (Windows). Также воспользуйтесь «таблетками» iPad, Samsung Galaxy, Kindle Fire, Asus Transformer Book.
2. Проверьте возможность использования ссылок
- Удобно ли использовать ссылки?
Согласно рекомендациям Google, интервал между ссылками или элементами навигации мобильной версии сайта должен иметь размер 28 на 28 пикселей. Однако не тратьте время на подсчет пикселей. Проверьте самостоятельно, легко ли перейти по ссылке. Не нажимаете ли вы другие элементы навигации, когда стараетесь «тапнуть» выбранную кнопку?
3. Не используйте элементы, работающие на технологии Flash
- Есть ли на сайте элементы, использующие Flash?
Гаджеты на iOS не поддерживают технологию Flash. Гаджеты на ОС Android с трудом отображают элементы, работающие на Flash. Поэтому удалите эти элементы с мобильной версии сайта.
4. Проверьте, смогут ли мобильные браузеры учитывать размер экрана гаджета
- Используете ли вы метатег viewport?
Добавьте в шапку мобильной версии сайта строчку <meta name="viewport" content="width=device-width">, чтобы браузеры мобильных девайсов могли учитывать размер экрана гаджета.
5. Позаботьтесь, чтобы на сайте не было всплывающих окон
- Отображаются ли всплывающие окна на мобильной версии сайта?
Пользователи мобильных гаджетов могут покинуть сайт из-за всплывающих окон. Эти элементы не всегда просто закрыть, просматривая сайт с помощью планшета или смартфона. Кроме того, они увеличивают время загрузки сайта.
Удобна ли навигация
1. Убедитесь, что посетителям доступны все разделы и страницы мобильной версии сайта
- Доступны ли мобильному пользователю все элементы навигации и ссылки на разделы?
Иногда дизайнеры сокращают количество элементов навигации мобильной версии, что ухудшает пользовательский опыт. Убедитесь, что навигация позволяет посетителям попасть в каждый раздел сайта и найти интересующий их контент.
2. Проверьте, доступны ли мобильным пользователям ссылки на страницы полной версии сайта
- Может ли посетитель мобильной версии просматривать десктопные страницы, для которых не существует мобильной версии?
Если полная версия вашего сайта содержит 1000 страниц, не ограничивайте мобильных пользователей доступом к 50 адаптированным страницам. Если у вас нет мобильной версии всех страниц, откройте владельцам смартфонов и планшетов доступ к десктопным страницам. Проанализируйте потребности мобильных пользователей, возможно, это подтолкнет вас к созданию дополнительных страниц мобильной версии.
Проверьте контент
1. Убедитесь, что количество страниц полной и мобильной версий сайта совпадает
- Одинаково ли количество страниц на мобильной и полной версии сайта?
В некоторых случаях количество страниц на мобильной версии сайта может превышать количество страниц на полной версии. Например, это уместно, если вы разделяете контент декстопной страницы на несколько частей и публикуете их на отдельных мобильных страницах. В любом случае, каждая страница полной версии должна иметь эквивалентную мобильную страницу.
2. Убедитесь, что ваш контент подходит мобильным посетителям
- Сможет ли пользователь потреблять ваш контент на ходу?
Мобильные пользователи могут читать как короткие новостные заметки, так и большие аналитические материалы. Однако материалы большого объема должны быть структурированы. Слона легче съесть по кусочку за присест. А большую статью с экрана мобильного гаджета легче прочитать, если она объединена в несколько смысловых блоков, имеет подзаголовки, маркированные списки и иллюстрации.
3. Убедитесь, что не демонстрируете мобильным посетителям рекламу
- Демонстрируете ли вы рекламу мобильным посетителям?
Если реклама не является главным источником дохода вашего бизнеса, удалите ее с мобильной версии сайта. Это увеличит скорость загрузки страниц и улучшит пользовательский опыт.
Убедитесь, что публикуемое видео доступно для мобильных пользователей
1. Используйте видеоплеер, поддерживающий формат HTML5
- Можно ли просмотреть опубликованное на сайте видео на экране смартфона?
Используйте для публикации видеохостинг YouTube, поддерживающий формат HTML5.
2. Используйте адаптивное видео
- Адаптируется ли размер видео к размеру экрана гаджета?
Эта опция доступна, если вы используете для публикации видео хостинги YouTube или Vimeo.
Учитывайте разницу мобильной и декстопной страниц поисковой выдачи
1. Обратите внимание на заголовок страницы
- Остается ли привлекательным заголовок страницы, отображаемый в две строки?
- Полностью ли отображается на странице выдачи описание страницы?
Title мобильной страницы не должен превышать 70 символов с пробелами. Обратите внимание, на странице мобильной выдачи заголовок отображается в две линии. Description страницы не должен превышать 120 символов с пробелами. В этом случае он отобразится на странице выдачи полностью.
Как проверить мобильную версию сайта
Предложенный контрольный список позволяет избежать наиболее распространенных при запуске мобильной версии сайтов ошибок. Проверяя сайт самостоятельно или при поддержке друзей, вы можете прогнозировать реакцию аудитории и заметить различные неудобства и недостатки. Оперативно устранив ошибки, вы поможете аудитории просматривать ваш сайт с помощью мобильных гаджетов.