Контрольний список питань для аудиту мобільної версії сайту

Всі інтернет-маркетологи давно зрозуміли, що адаптувати сайти під мобільний трафік потрібно було позавчора. Власники інтернет-проектів більше не сумніваються, чи потрібно робити мобільну версію сайту. Сьогодні вони намагаються зрозуміти, який спосіб оптимізації ресурсу під мобільний трафік вибрати.

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

Як перевірити мобільну версію сайту

Уявіть собі наступну ситуацію: ви звернулися в студію веб-дизайну, щоб отримати мобільну версію сайту. У зазначений строк співробітники студії здали роботу. На екрані вашого смартфона сайт виглядав нормально, посилання працювали, сторінки відкривались швидко. Тому ви подякували партнерів і вирушили у свій офіс.

Тепер ви сидите в кабінеті і чекаєте реакції аудиторії на появу мобільної версії сайту. Щоб її оцінити, вам доведеться почекати кілька тижнів. А щоб не виглядати безглуздо в очах користувачів, витратьте півгодини на самостійний аудит мобільної версії. Запропонований нижче контрольний список допоможе вам виявити і виправити поширені помилки.

Об’єднання мобільного та повної версії сайтів

1. Перевірте редиректи

• Перенаправляються користувачі на мобільну версію сайту, якщо вони використовують для серфінгу смартфони або планшетні ПК?
• Якщо мобільний користувач бажає перейти на внутрішню сторінку сайту, потрапить він на неї або буде перенаправлено на головну?
• Якщо власники стаціонарних ПК потрапляють на мобільний сайт по посиланню, чи вони будуть перенаправлені на повну версію сайту?

Редиректи налаштовані правильно, якщо ви відповіли на ці питання ствердно. Мобільні користувачі повинні спрямовуватися на мобільну версію сайту. Відвідувач повинен потрапляти на вибрану сторінку, а не на головну мобільної версії. Власники стаціонарних ПК повинні потрапляти на повну версію сайту. Однак залишайте їм можливість повернутися на мобільний сторінку.

2. Дозвольте мобільним користувачам працювати з десктопної версією сайту

• Може мобільний користувач легко перейти на повну версію сайту?
• Якщо мобільний користувач вибрав повну версію, чи залишиться він на неї після переходу на нову сторінку? Або при кожному переході його викидати на мобільну версію?

Редиректи налаштовані вірно, якщо користувач може швидко вибрати повну версію сайту і залишатися на ній після переходів.

3. Перевірте можливість динамічного показу

• Додано в HTML-код сайту HTPP-заголовок Vary: User-Agent?

Цей заголовок повідомляє пошукових систем і браузерів, що вибір версії сайту повинен здійснюватися у відповідності з типом гаджета клієнта.

4. Перевірте атрибути для мобільних і повних версій сайту

• Додано HTML-код повній версії сайту тег rel=»alternate»?
• Додано в HTML-код мобільної версії сайту тег rel=»canonical»?

Щоб браузери показували мобільну версію сайту власникам смартфонів і планшетів, додайте в шапку повній версії таку строчку: .

Щоб браузери показували повну версію сайту власникам десктопів, додайте в шапку мобільної версії наступну сходинку: .

На які технічні аспекти звернути увагу

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?

Додайте в шапку мобільної версії сайту сходинку , щоб браузери мобільних девайсів могли враховувати розмір екрану гаджета.

5. Подбайте, щоб на сайті не було спливаючих вікон

• Відображати спливаючі вікна на мобільній версії сайту?

Користувачі мобільних гаджетів можуть покинути сайт через спливаючих вікон. Ці елементи не завжди просто закрити, переглядаючи сайт за допомогою планшета або смартфона. Крім того, вони збільшують час завантаження сайту.

Зручна навігація

1. Переконайтеся, що відвідувачам доступні всі розділи і сторінки мобільної версії сайту

• Доступні мобільному користувачеві всі елементи навігації та посилання на розділи?

Іноді дизайнери скорочують кількість елементів навігації мобільної версії, що погіршує користувальницький досвід. Переконайтеся, що навігація дозволяє відвідувачам потрапити в кожен розділ сайту і знайти потрібний контент.

2. Перевірте, чи доступні мобільним користувачам посилання на сторінки повній версії сайту

• Чи може відвідувач мобільної версії переглядати десктопні сторінки, для яких не існує мобільної версії?

Якщо повна версія вашого сайту містить 1000 сторінок, не обмежуйте мобільних користувачів доступом до 50 адаптованих сторінок. Якщо у вас немає мобільної версії всіх сторінок, відкрийте власникам смартфонів і планшетів доступ до десктопних сторінкам. Проаналізуйте потреби мобільних користувачів, можливо, це підштовхне вас до створення додаткових сторінок мобільної версії.

Перевірте контент

1. Переконайтеся, що кількість сторінок повної і мобільного версій сайту збігається

• Однаково кількість сторінок на мобільному і повній версії сайту?

В деяких випадках кількість сторінок на мобільній версії сайту може перевищувати кількість сторінок на повній версії. Наприклад, це доречно, якщо ви поділяєте контент декстопной сторінок на кілька частин і публікуєте їх на окремих мобільних сторінках. У будь-якому випадку, кожна сторінка повній версії повинна мати еквівалентну мобільний сторінку.

2. Переконайтеся, що ваш контент підходить мобільним відвідувачам

• Чи зможе користувач споживати ваш контент на ходу?

Мобільні користувачі можуть читати як короткі новинні замітки, так і великі аналітичні матеріали. Однак матеріали великого обсягу повинні бути структуровані. Слона легше з’їсти по шматочку за присід. А велику статтю з екрану мобільного гаджета легше прочитати, якщо вона об’єднана в декілька смислових блоків, має підзаголовки, марковані списки та ілюстрації.

3. Переконайтеся, що ви не демонструєте мобільним відвідувачам рекламу

• Демонструєте ви рекламу мобільним відвідувачам?

Якщо реклама не є головним джерелом доходу вашого бізнесу, видаліть її з мобільної версії сайту. Це збільшить швидкість завантаження сторінок і поліпшить користувальницький досвід.

Переконайтеся, що публікується відео доступно для мобільних користувачів

1. Використовуйте відеоплеєр, що підтримує формат HTML5

• Можна переглянути опубліковане на сайті відео на екрані смартфона?

Використовуйте для публікації відеохостинг YouTube, що підтримує формат HTML5.

2. Використовуйте адаптивне відео

• Адаптується розмір відео до розміру екрану гаджета?

Ця опція доступна, якщо ви використовуєте для публікації відео хостинги YouTube або Vimeo.

Враховуйте різницю мобільного та декстопной сторінок пошукової видачі

1. Зверніть увагу на заголовок сторінки

• Залишається привабливим заголовок сторінки, який відображається в два рядки?
• Повністю відображається на сторінці видачі опис сторінки?

Title мобільного сторінки не повинен перевищувати 70 символів з пробілами. Зверніть увагу, що на сторінці мобільного видачі заголовок відображається в дві лінії. Description сторінки не повинен перевищувати 120 символів з пробілами. У цьому випадку він відобразиться на сторінці видачі повністю.

Як перевірити мобільну версію сайту

Запропонований контрольний список дозволяє уникнути найбільш поширених при запуску мобільної версії сайтів помилок. Перевіряючи сайт самостійно або за підтримки друзів, ви можете прогнозувати реакцію аудиторії і помітити різні незручності і недоліки. Оперативно усунувши помилки, ви допоможете аудиторії переглядати ваш сайт за допомогою мобільних гаджетів.