Найімовірніше, менше, ніж ви думаєте, і ви б не дізналися, бо дивилися на нього лише на тому комп'ютері, на якому його проєктували. А люди, які вирішують, чи телефонувати вам, тримають телефон, стоять десь, і в них вільний один великий палець.
Ось як нормально це перевірити приблизно за десять хвилин і що робити з тим, що знайдете.
Чому сайт, який має нормальний вигляд на ноутбуці, провалюється на телефоні?
Бо «вміщується» і «працює» - різні перевірки, а більшість сайтів проходять лише першу.
Майже кожен сайт, зроблений за останні десять років, адаптивний, тобто розкладка перебудовується під ширину екрана. Ця частина зазвичай гаразд. Ламається все, що залежало від миші, широкого екрана чи швидкого з'єднання: меню, яким потрібне наведення, таблиці цін, які були в три колонки, а тепер нечитабельні, форми, які були короткими на ноутбуці й здаються нескінченними на телефоні, і картинки, розраховані на десктоп, які телефон тепер мусить завантажувати повністю за слабкого сигналу.
Нічого з цього не видно під час погодження дизайну. Видно це з того, що люди йдуть.
Як перевірити, нічого не купуючи?
Три проходи. Робіть їх у такому порядку.
Прохід перший: ваш власний телефон, на мобільному інтернеті, а не на офісному Wi-Fi. Вимкніть Wi-Fi. Відкрийте головну. Потім зробіть те, що зробив би клієнт: знайдіть години роботи, знайдіть ціну, дійдіть до контактної форми й надішліть собі тестову заявку. Засічіть час. Якщо щось із цього потребує більше трьох дотиків або доводиться збільшувати, щоб прочитати, це і є знахідка.
Прохід другий: телефон, який не ваш. В ідеалі людина старша, в іншій мережі, яка ніколи не бачила сайт. Дайте їй телефон і нічого не кажіть. Дивіться, де вона затинається. За дев'яносто секунд ви дізнаєтеся більше, ніж із будь-якого звіту.
Прохід третій: ваша аналітика. Не гадайте, скільки відвідувачів заходить із телефонів. Відкрийте Google Analytics, подивіться категорію пристроїв і порівняйте показники відмов і конверсії між десктопом і мобільними. Якщо мобільного трафіку багато, а мобільних заявок немає, ви знайшли, куди йдуть гроші. Це той самий діагноз, що й у трафіку, який не перетворюється на заявки.
Що насправді ламається першим?
Приблизно в порядку того, як часто ми це знаходимо.
Надто маленькі чи надто близько розташовані області натискання. Кнопки, пункти меню й посилання, розраховані на курсор. WCAG 2.2 встановлює мінімум 24 на 24 CSS-пікселі для цілей вказівника в критерії успіху 2.5.8 (W3C, Understanding SC 2.5.8 Target Size (Minimum)), і це нижня межа, а не мета. Два посилання в підвалі за кілька пікселів одне від одного означають, що хтось раз у раз влучає не туди й здається.
Номер телефону, який не посилання. Якщо номер набрано простим текстом або, гірше, він сидить усередині картинки, натискання нічого не робить. На телефоні він має набирати номер. Це виправлення на п'ять хвилин, яке люди відкладають роками.
Форми, які просять забагато. Кожне поле - привід кинути на маленькому екрані. Ім'я, контакт, одне поле повідомлення. Задайте правильний тип клавіатури для кожного поля, щоб поле пошти відкривало клавіатуру для пошти, а поле телефону - цифрову. І переконайтеся, що форма справді надсилає, бо форми, які мовчки не працюють, - найдорожча несправність, яка може бути в невеликого сайту.
Сховане меню, у якому все. Іконка-гамбургер - нормально. Іконка-гамбургер, яка ховає чотирнадцять пунктів, із яких важливі три, - ні. Дві-три дії, заради яких прийшли люди, мають бути видні без відкриття будь-чого.
Липкі шапки, які з'їдають екран. Закріплена смуга має охайний вигляд на ноутбуці й з'їдає третину екрана телефона. Гірше того, вона може закрити поле, на яке ви щойно натиснули, і ви не бачите, що друкуєте.
Текст, вдрукований у картинку. Банери, де пропозицію написано просто в JPEG. На вузькому екрані цей текст стискається до нуля, і його не можна виділити, перекласти чи прочитати вголос.
Таблиці. Прайс-листи й таблиці характеристик, зроблені під широкий екран, або вилазять убік, або стискаються в колонки, які ніхто не прочитає. На телефоні їх зазвичай треба складати в картки.
Чи впливає щось із цього на те, чи знаходять вас у Google?
Так, і пряміше, ніж очікує більшість власників.
Google прямо пише, що для індексування й ранжування використовує мобільну версію контенту сайту, проскановану смартфонним агентом (Google Search Central, Mobile-first indexing). Оцінюють саме версію для телефона. У рекомендаціях Google також попереджено, що якщо на мобільному сайті менше контенту, ніж на десктопному, можна очікувати втрати трафіку, бо пошуковикові немає з чим працювати.
На практиці: якщо шматок тексту про послуги сховано на мобільних заради охайної розкладки, цього тексту на вашому сайті фактично немає. Приберіть його в акордеон чи вкладку, а не видаляйте. Це лежить в основі видимості в локальному пошуку, де той, хто шукає, майже завжди й так із телефона.
А що зі швидкістю на телефоні?
Перевіряйте на тому з'єднанні, яке у ваших клієнтів, а не у вас в офісі.
Core Web Vitals від Google вважають проблемою Largest Contentful Paint понад 2,5 секунди, а на телефоні цей найбільший елемент майже завжди головне фото. Найчастіша причина - зображення десктопного розміру, яке надсилають на телефон, і виправлення на боці розробника: правильні розміри під пристрій, сучасні формати й нічого, що вантажиться раніше, ніж потрібно. Докладніше про весь ланцюжок у статті чому ваш сайт повільний.
Чи потрібен окремий мобільний сайт?
Ні. Цей підхід помер багато років тому й лишив по собі купу покинутих піддоменів m.. Один сайт, один набір контенту, різна розкладка на різній ширині.
Конструктори сторінок це ускладнюють. Більшість дають змогу окремо налаштовувати мобільний вигляд, і це корисно, але означає, що хтось має це реально зробити. Шаблон, який так і не підігнали під телефони, - не провина інструмента. Це недороблена робота.
Виправляти чи перезбирати?
У більшості випадків виправляти. Області натискання, клікабельний номер телефону, коротка форма, урізане меню й картинки правильного розміру - це години роботи на наявному сайті, а не проєкт.
Перезбирайте, коли мобільна розкладка зламана, бо сам сайт настільки старий, що адаптивність до нього прикрутили згодом, коли сайт повільний зі структурних причин, а не через картинки, або коли ви й так збиралися робити редизайн. Якщо ви тут, робіть це, не викидаючи позиції, які у вас уже є. Наші сайти коштують від 1 200 до 8 000 $ залежно від обсягу, як ми визначаємо обсяг, показано на сторінці вебдизайну, а повні діапазони є на сторінці цін.
У будь-якому разі зробіть перший прохід сьогодні. Телефон у руці, Wi-Fi вимкнено, спробуйте найняти самого себе.
Якщо хочете, щоб це зробив хтось інший, надішліть нам адресу сайту на безкоштовний розбір. Ми пройдемо ваш сайт на справжньому телефоні й скажемо, що ламається, у скільки це вам обходиться і яке виправлення зробити першим, працюватимете ви з нами чи ні.