Мобільні веб-сайти - чи вони дійсно необхідні? Коротка відповідь: так.

У 2018 році Google офіційно анонсувала Mobile First Indexing або ранжування веб-сайтів на основі своїх мобільних веб-сайтів, а не їхньої настільної версії. У цей час дослідження показало, що компанії, які не віддавали пріоритет мобільним версіям, спочатку втратили 50%, а далі більше падіння трафіку. У лютому 2020 року компанія SimilarWeb, що спеціалізується на аналізі інтернет-трафіку, опублікувала звіт за 2019 рік. У ньому йдеться, що люди все рідше виходять в мережу через комп'ютери, віддаючи перевагу мобільним пристроям.

По-перше, що означає мати «mobile-friendly» сайт? Google визначає це як:

    • уникнення програмного забезпечення, яке не часто зустрічається на телефонах, наприклад Flash.
    • використання розбірливого, великого тексту – не менше 12 пікселів на не менше 60% сторінки.
    • використання контенту, який автоматично підлаштовується під розмір екрана.
    • додавання посилань, які є досить далеко один від одного, щоб натиснути на кожну окремо.
Насправді, зручний для мобільних пристроїв веб-сайт - це інтуїтивно зрозумілий і простий у використанні інтерфейс для перегляду на невеликому екрані.

Сам Google рекомендує адаптивний дизайн. Ось деякі переваги:

    • компоновка гнучка, автоматично визначає розмір екрану та орієнтацію
    • UX однаковий для всіх типів браузерів та пристроїв
    • вам потрібна лише одна URL
Тим не менш, давайте поринемо в наш "checklist".

#1: Дизайн з орієнтацією на мобільність.

Більшість відвідувачів бажають бачити схожість між версіями для мобільних пристроїв та настільних комп'ютерів, такими як контент, кольори та теми.

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

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

# 2: Пишіть контент, орієнтуючись на мобільні пристрої.

Поширеною помилкою є просте стиснення вмісту або зменшення розмірів шрифту для менших екранів.

Ось кілька пропозицій для початку:

    • додайте великі описові кнопки: Apple пропонує розмір 44x44.
    • збільште розмір шрифту: виберіть щонайменше 16 пікселів з висотою рядка 1,5.
    • пропустити ефекти наведення миші та hover effects.

# 3: Не забувайте, навігація.

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

Дуже важливі сторінки.

Спершу надайте відвідувачам найважливіші веб-сторінки. Якщо у вас є веб-сайт і доступ до аналітики трафіку, скористайтеся ним. Куди найбільше збираються відвідувачі? Які сторінки вони не бувають?

Пошук = Навігація.

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

Навігація має бути інтуїтивною.

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

# 4: Оптимізація зображень для збільшення швидкості.

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

    1. Масштабуйте зображення за допомогою розмітки HTML. Це призупинить відвідувач браузер від завантаження великих зображень. Але не всі браузери можуть підтримувати його.
    2. Найкращий варіант – це оптимізувати фото за допомогою сторонніх ресурсів: Image Compressor, iLoveIMG та інші. Є й простіші способи, які ви також можете спробувати. Наприклад, при виборі зображень звертайте увагу на розмір файлу, враховуйте формат (наприклад, JPG або PNG), роздільну здатність та ім'я файлу.

# 5: Протестуйте свій сайт.

Отже, на цей час ви зробили кілька речей:

    • зібрали свій веб-сайт;
    • написали свій контент з урахуванням різних розмірів екрана;
    • зробили його touch-friendly;
    • організували зрозумілу навігацію;
    • оптимізували зображення або попрацювали з кодом.

Це означає, що ви готові до запуску, чи не так? Не зовсім.

Наступний, мабуть, найважливіший крок: тестування вашого сайту на мобільність. Найпростіший спосіб зробити це – використовувати Google Friendly Test. Після того, як ви опублікуєте свій сайт, ви можете ввести свою URL-адресу, і Google запустить тест зі своїм «Googlebot smartphone». Крім того, ви повинні використовувати інші інструменти тестування, такі як Browserstack або Web Developer.

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

Отже, підіб'ємо підсумки нашого «checklist» для мобільного сайту:

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