Як перевірити, чи має вебсайт мобільну версію
Як перевірити, чи має вебсайт мобільну версію
Сайт може “мати мобільну версію” трьома різними способами. Це може бути адаптивний сайт, який підлаштовується під екран, окремий мобільний сайт із власною URL-адресою або десктопна сторінка, яка просто зменшується й сподівається на краще. Останній варіант трапляється дуже часто, тож якщо вам треба зрозуміти, як перевірити чи має сайт мобільну версію, почніть саме з цього поділу.
Перш ніж щось оцінювати, визначте мету. Якщо ви намагаєтеся з’ясувати як перевірити, чи має вебсайт сторінку контактів, ви шукаєте один тип сигналу; тут же ви перевіряєте поведінку екрана, навігацію та роботу на різних пристроях. Це різні запити й різні докази. Саме так і як дізнатися чи сайт адаптивний стає практичним питанням, а не здогадом.
Мобільна версія має не просто “відкриватися” на телефоні. Вона повинна підлаштовуватися під менші екрани, зберігати читабельність тексту й не заважати виконанню основного завдання через постійне масштабування та прокручування. Один лише гамбургер-меню ще нічого не доводить. Як і крихітний десктопний макет — саме тому перевірка мобільної версії сайту має дивитися на поведінку, а не лише на зовнішній вигляд.
1. Визначте, що саме означає “мобільна версія” у вашій перевірці
Почніть з одного рішення: ви шукаєте окремий мобільний сайт, адаптивний макет чи мобільно-специфічний досвід, наприклад підказку встановити додаток або спрощене меню? Саме цей вибір і визначає, що ви перевіряєте насамперед.
Окремий мобільний сайт часто використовує інший піддомен, наприклад m.example.com, або окремий шлях. Адаптивний макет зазвичай залишає ту саму URL-адресу й змінює сторінку за допомогою CSS. Мобільно-специфічний досвід може й далі бути на тій самій сторінці, але там інша навігація, менше колонок або підказка встановити застосунок. Це не одне й те саме.
Якщо сайт старий, мобільна версія може бути очевидною. Якщо він новіший, мобільна версія може бути захована в дизайні, а не винесена на окрему адресу. Звертайте на це увагу.
Один практичний орієнтир: сайт, який змінює лише розмір шрифту, — це не надто схожа на мобільну версія. А сайт, що змінює меню, відступи, блоки з медіа та розташування форм, справді працює над адаптацією.
2. Перевірте сайт у десктопному браузері, не перемикаючи пристрої
Спочатку відкрийте сторінку у звичайному десктопному браузері. Потім повільно звужуйте вікно, а не робіть це одним різким кроком. Дивіться, що змінюється на 1200 пікселях, потім на 1024, потім на 768. Ці значення важливі, бо багато макетів ламаються саме на них.
Дивіться на поведінку, а не лише на зовнішній вигляд. Чи згортається верхня навігація в одне меню? Чи спускаються бічні панелі під основний контент? Чи велике зображення стає меншим без того, щоб виштовхувати текст за межі екрана? Це ознаки того, що сайт створювали з урахуванням адаптації.
Сайт може вдавати мобільну дружність, просто зменшуючи все підряд. Цього недостатньо. Користувач усе одно потребує читабельних абзаців, кнопок, на які зручно натискати, і форм, що не вимагають прокручування вбік.
Відкрийте сторінку з довгою формою. Якщо на меншій ширині підписи накладаються один на одного, мобільна версія слабка. Якщо поля акуратно стають одне під одним, а кнопка надсилання лишається видимою, значить, мобільну версію, ймовірно, продумали добре.
Для швидкої додаткової перевірки можна порівняти структуру з іншою сторінкою на тому самому домені, наприклад як перевірити, чи має вебсайт сторінку з політикою доставки. На сайтах сторінки з політиками часто залишаються більш жорсткими, ніж товарні сторінки, і ця різниця може показати, чи застосовували адаптивні правила по всьому сайту, чи лише на головній.
3. Перевірте вихідний код і CSS на наявність мобільних налаштувань
Перегляньте вихідний код або відкрийте інструменти розробника. Знайдіть метатег viewport. Якщо бачите width=device-width і розумне початкове масштабування, це сильна ознака того, що сайт створювали з урахуванням мобільних екранів.
Потім перегляньте CSS-файли. Адаптивний код зазвичай містить медіа-запити з точками перелому на кшталт 768px, 1024px або 480px. Не потрібно читати кожен рядок. Один-два вдало розміщені брейкпоінти можуть сказати дуже багато.
Шукайте й мобільно-орієнтовані ресурси. Для зображень можуть бути менші версії для повільного інтернету. Скрипт навігації може завантажуватися лише тоді, коли екран вузький. Шрифт може змінювати вагу для кращої читабельності. Такі деталі важливі, бо вони показують задум, а не випадковість.
Якщо у вихідному коді всюди фіксована ширина, варто насторожитися. Фіксовані макети можуть відкриватися на телефоні, але це не означає, що сайт має мобільну версію. Можливо, це просто десктопна сторінка, яку втиснули в менше вікно.
Ось що часто випускають з уваги: вихідний код може показувати підтримку мобільних пристроїв навіть тоді, коли візуально сторінка виглядає простою. Чиста сторінка не завжди проста всередині. А хаотична — не завжди зламана.
4. Порівняйте поведінку на типових мобільних ширинах
Перевірте кілька стандартних ширин у браузері. Спробуйте 375 пікселів, 390 пікселів і 414 пікселів для сучасних телефонів, а потім 768 пікселів для перегляду в планшетному форматі. Цей діапазон швидко виявляє більшість проблем із макетом.
На 375 пікселях перевірте, чи контент не виходить за межі екрана. На 390 пікселях подивіться, чи кнопки достатньо великі для натискання великим пальцем. На 414 пікселях шукайте порожні бокові поля або обрізані банери. Це дрібні підказки, але вони складаються в загальну картину.
Хороша мобільна версія акуратно перебудовується. Слабка — просто стає меншою. Є реальна різниця між “вміщується” і “працює”.
Спробуйте ту саму сторінку у портретній та альбомній орієнтації. Іноді сторінка добре поводиться в одному режимі й стає незручною в іншому. Галерея може занадто жорстко фіксувати зображення, або таблиця стає нечитабельною. Таблиці особливо показові.
Якщо сторінка містить порівняльну таблицю, зменшуйте ширину й дивіться на результат. Правильна мобільна версія може складати рядки в стовпчик або дозволяти кероване горизонтальне прокручування. Погана — просто обрізає останній стовпець. Саме такі речі користувачі помічають дуже швидко.
5. Шукайте окремі мобільні URL-адреси або перенаправлення за типом пристрою
Старі сайти інколи перенаправляють телефони на іншу адресу. Ви можете побачити m.example.com, mobile.example.com або URL, що містить /mobile/ чи /amp/. Уважно перевіряйте адресний рядок після завантаження сторінки на телефоні або в вузькому вікні емуляції.
Перенаправлення за типом пристрою можуть відбуватися непомітно. Десктопний користувач бачить одну сторінку, а користувач телефона потрапляє на іншу. Це може вказувати на окрему мобільну версію, але також може означати застарілу схему, яку так і не оновили.
Звертайте увагу на перенаправлення, які відбуваються до повного завантаження сторінки. Швидкий перехід з одного домену на інший часто означає, що сервер визначає тип пристрою. Якщо перенаправлення веде на спрощену сторінку, сайт, можливо, створювали для старих телефонів, а не для сучасних адаптивних екранів.
Не робіть поспішних висновків. Мобільно схожа URL-адреса не завжди означає, що сайт кращий на телефонах. Іноді це означає лише, що сайт старіший, повільніший і складніший у підтримці.
Одна проста ознака — послідовність. Якщо перенаправляється лише головна сторінка, а внутрішні — ні, мобільна версія, імовірно, неповна.
6. Перевірте, чи сайт змінюється залежно від user agent
Відкрийте інструменти розробника та змініть user agent на профіль телефона. Потім перезавантажте сторінку. Якщо вміст змінюється, сайт віддає інший HTML або CSS для мобільних пристроїв.
Це важливо, бо деякі сайти ховають мобільну версію за визначенням типу пристрою. У десктопному браузері вони можуть показувати повний макет; для user agent телефона — вужче меню, інші зображення або навіть інші текстові блоки. Це не побачиш лише через зміну розміру вікна.
Спробуйте принаймні два user agent: один сучасний профіль iPhone і один Android. Якщо сайт поводиться по-різному, зафіксуйте точну відмінність. Зміна навігації має значення. А зміна скриптів аналітики — ні.
Якщо сторінка ламається лише під одним user agent, мобільну версію, можливо, латали під конкретні пристрої замість того, щоб добре спроєктувати її спочатку. Це ознака технічного боргу. Також це може спричиняти дивні баги, які з’являються лише на певних телефонах.
Для окремої перевірки структури сайту можна порівняти його з як перевірити, чи має вебсайт сторінку умов користування. Юридичні сторінки часто менш адаптивні, ніж товарні, тож вони корисні для виявлення часткової підтримки мобільних пристроїв.
7. Перевірте публічні вебархіви та фрагменти пошукової видачі на наявність колишніх мобільних варіантів
Публічні архіви можуть показати, чи існувала мобільна версія раніше. Знайдіть сайт у Wayback Machine або в іншому архіві та перегляньте знімки за кілька років, а не лише один. Мобільна сторінка 2018 року може розповісти те, що приховує головна сторінка 2026 року.
Заархівовані URL можуть показати старі мобільні піддомени, перенаправлення для конкретних пристроїв або окремі шаблони. Фрагменти пошуку теж можуть допомогти. Якщо в проіндексованих результатах видно мобільний шлях або AMP-сторінку, це означає, що сайт колись публічно показував мобільну версію.
Не робіть надто широких висновків з одного знімка. Архіви можуть не зберегти таблиці стилів, скрипти або зображення. Але якщо три різні знімки показують URL-шаблон для телефону, це вже сильний доказ.
Ви також можете порівняти кешований текст навколо заголовка сторінки. Якщо в пошукових результатах раніше відображався короткий мобільний заголовок, а тепер — довгий десктопний, ймовірно, сайт із часом змінив подачу.
Є й практична причина перевіряти архіви: деякі сайти прибирають мобільну версію, не очищаючи старі посилання. Користувачі переходять із пошуку або закладок і потрапляють на непрацюючі мобільні шляхи. Такі проблеми залишаються непоміченими, поки хтось не перевірить їх вручну.
8. Визначте, яку саме мобільну підтримку насправді має сайт
На цьому етапі ви вже повинні мати змогу описати результат одним реченням. Скажіть, чи сайт адаптивний, чи використовує окрему мобільну версію, чи майже не має оптимізації для мобільних пристроїв. Це речення має спиратися на 3 конкретні спостереження, а не на здогад.
Адаптивний сайт зазвичай має одну URL-адресу, чіткі точки перелому та змінює навігацію на менших ширинах. Окрема мобільна версія зазвичай використовує окрему URL-адресу або перенаправлення за user agent. Слабка мобільна реалізація зазвичай просто зменшує десктопний дизайн, обрізає контент або робить форми незручними.
Якщо вам потрібен швидкий шаблон для звіту, використовуйте такий порядок: шаблон URL, поведінка макета та докази з вихідного коду. Три пункти. Для базового звіту більшого не потрібно.
Наприклад: “Сайт адаптивний. Він зберігає ту саму URL-адресу, використовує viewport-тег і на ширині 390 пікселів переносить бічну панель під основний контент.” Це чітко, коротко й перевіряється.
Якщо вам потрібно задокументувати старіший сайт для довідки, робіть запис точним. Зазначте конкретний мобільний шлях, поведінку на пристрої та ширину, на якій змінюється макет. Розпливчаста фраза на кшталт “працює на телефоні” нікому не допоможе.
І остання перевірка: якщо сайт пропонує лише мобільне меню, але все одно ховає ключовий контент за дрібними посиланнями, це не сильна мобільна версія. Це просто мобільне меню. Це різні речі.
