Перевірка сайту на адаптивність буде особливо актуальна для тих порталів, вік яких перевалює за 5–7 років, оскільки вимоги та підходи відтоді сильно змінилися. Однак це не означає, що й сучасніші сторінки не потрібно перевіряти, тому що ніхто не застрахований від помилок при розробці.
Щоб провести цю перевірку, можна скористатися кількома сервісами або спробувати все зробити вручну через браузер. У нашій статті ми розповімо про ці способи, а також поговоримо, що таке адаптивність та яким принципам вона підпорядковується.
Визначення адаптивності сайту
Що таке адаптивність сайту (або адаптивний веб-дизайн)? Це автоматично змінює розмір веб-сторінок залежно від типу пристрою, через який вони переглядаються. Перевірка сайту на адаптивність сьогодні здійснюється через монітори стаціонарних комп’ютерів, екрани смартфонів, планшетів, ноутбуків – у кожному випадку його сторінки мають відкриватися коректно та бути зручними для сприйняття користувачами.
Адаптивний дизайн заточений під створення сайту з різними елементами, які будуть по-різному поводитися під час перегляду сторінок на пристроях різних типів. Сьогодні неможливо ігнорувати необхідність адаптивного дизайну — це обов’язкова умова розвитку бізнесу. Клієнт, який не може нормально ознайомитися з продукцією компанії, тому що її сайт не має мобільної версії, знайде іншу можливість придбати потрібний товар. Тобто, адаптивність — це одна з умов утримання клієнтів.
Розглянемо тему докладніше. Наприклад, ви дивитеся традиційний «фіксований» сайт із монітора комп’ютера. Він відображає три стовпці. Потім ви відкриваєте його на планшеті і бачите, що сайт не міститься на екрані, що змушує вас перевернути планшет горизонтально. Зазвичай це дратує користувачів. В даному випадку елементи сайту часто приховані або виглядають по-іншому. Потім ви берете смартфон, і ситуація з сайтом, що переглядається, стає гіршою, адже екранчик телефону ще менше. Половина інформації виявляється просто недоступною потенційному клієнту. Зображення великого розміру можуть спотворити макет, а сайт буде дуже повільно завантажуватися, особливо якщо є графічне оформлення.
Але все вирішує адаптивний дизайн. Якщо творці заздалегідь подбали про зручність перегляду сайту з планшетів та телефонів: ці пристрої просто автоматично налаштують відображення потрібної кількості стовпців (вже, наприклад, не трьох, а двох). В результаті сайт стане читабельним і буде нормально сприйматися користувачами незалежно від величини екрана пристрою. Зображення не будуть спотворюватися, їх розмір просто зміниться.
Важливість адаптивності сайту в сучасних реаліях
Вже сьогодні перегляди сайтів зі смартфонів становлять 52,68% щодо їх загальної кількості (дані Яндекс.Радара). І є підстави вважати, що ця цифра тільки зростатиме. Відповідно, неадаптовані сайти просто втратять аудиторію через неможливість їх нормального перегляду, а значить, у компаній не буде лідів. Зараз ніхто не бажає витрачати час на маніпуляції з неадаптованими сайтами: це викликає негативні емоції та бажання піти до того, хто дбає про своїх клієнтів.
При цьому є одне “але”. Навіть за наявності адаптивного дизайну сайт може відкриватися по-своєму в різних браузерах та операційних системах. Припустимо, в Google Chrome він виглядає нормально, а в Яндекс.Браузері відкривається криво, що знову-таки тягне за собою потенційну втрату клієнтів. Те ж саме може відбуватися з iOS та Android.
За даними нового дослідження AccuraCast, монітор конвертує на 60% більше мобайла, а ПК-конверсії коштують на 93% дорожче за мобільні (попри те, що кількість дій на сайтах, що здійснюються саме зі смартфонів, зростає). При цьому дуже важливо приділяти особливу увагу мобільному маркетингу, оскільки статистику псує величезна кількість неадаптивних сайтів, з якими важко працювати.
Важливий момент — адаптивність істотно впливає на ранжування сайту як у Google, так і в «Яндексі» (дві основні пошукові системи ) та його попадання в топ-30 (у випадку з Google є зв’язок із позицією сайту).
9 ключових принципів адаптивності сайту
- Поточність
Допустимо, сайт був розроблений для звичайних моніторів. У браузері все виглядає чудово. Коли відбувається його відкриття в мобільному телефоні, блоки змінюють положення, розташовані один під одним. Це є потік. На даний момент без поточності складно уявити адаптивний дизайн.
- Відносність одиниць виміру
В адаптивному дизайні використовуються відносні одиниці виміру. Наприклад, різні пристрої мають різну щільність пікселів – відповідно, зображення одного і того ж розміру буде виглядати на моніторі так, а на екрані смартфона – зовсім інакше.
Тому, щоб внести якусь уніфікацію, необхідно використовувати відносні одиниці виміру. Тобто всі розміри елементів сайту слід задавати щодо елемента, який є і на екрані ПК, і на дисплеї смартфона. Наприклад, верхня межа.
- Використання контрольних точок
Розташування контрольних точок змінюється у разі перегляду сайту з певного пристрою із заданими параметрами екрана. Вони використовуються, щоб зафіксувати елементи сторінки, якщо вони починають зміщуватися.
- Мінімальні та максимальні значення
У ряді випадків необхідно вказувати певні властивості. Припустимо, при ширині екрана менше 1000 px вміст сторінки повинен відображатися на весь екран, інакше встановлюється максимальна ширина 1000 px. Інакше можна зіткнутися з тим, що текст на планшеті виглядає нормально, але коли ви відкриваєте статтю на великому моніторі, вона розтягується на весь екран і стає нечитабельною.
- Вкладеність об’єктів
На сайті може бути велика кількість елементів, які залежать від положення інших блоків. Для того, щоб проконтролювати ці складні об’єкти, їх можна вкласти в один контейнер. Однак це можна зробити за допомогою тих блоків, які не потрібно адаптувати під параметри екрана – кнопки, логотипи тощо.
- Правильні шрифти
Вибирайте шрифти з урахуванням того, що вони можуть впливати на швидкість завантаження сторінок сайту.
- Правильне використання растрової та векторної графіки
За наявності безлічі дрібних деталей краще використовувати растровий формат. В іншому випадку підійде векторний. До малюнків необхідно використовувати стиснення. Векторні зображення зазвичай оптимізовані, однак вони можуть не підтримуватися старими браузерами.
- Дотримання розмірів макетів
Макет повинен мати певний розмір. При створенні сайту на базі адаптивного дизайну потрібно орієнтуватися на контрольні точки (параметри, що передаються медіафункціями). Вони показують, який дозвіл спричинить зміну дизайну.
Стандартна роздільна здатність:
- смартфони – 320 px, 480 px;
- планшети – 768 px;
- ноутбуки та ряд планшетів – 1024 px;
- ПК – 1280 px і більше.
При цьому немає жорсткої прив’язки до певного дозволу. Все залежить від установок та параметрів пристроїв. Буває, що макет нормально відображається на моніторах та екранах в інтервалі 320-768 px, тому немає потреби робити додаткові макети з проміжною роздільною здатністю.
Коли макет ламається, тобто некоректно відкривається на пристрої з певною роздільною здатністю, точками перелому стають фактичні значення екрана цього пристрою.
- Медіазапити
Сайти з адаптивним дизайном створюються за допомогою media queries (медіазапитів), які допомагають визначати параметри стилів, типи пристроїв (проектори, смартфони, монітори, телевізори та ін.) та умови.
Коли надіслано певний запит і отримано відповідну відповідь, сайт буде відображатися на пристрої певним чином (будуть використані відповідні параметри відображення з файлу стилів css).
Популярні сервіси перевірки сайту на адаптивність
Щоб перевірити, як відкривається ресурс на різних пристроях, потрібно вибрати відповідний сервіс перевірки адаптивності сайту. Перелічимо основні.
- Google Mobile Friendly
Демонструє, як сайт відображається на смартфонах, дозволяє оцінити якість оптимізації.
Плюси:
- офіційний сервіс Google;
- повідомляє про конкретні помилки;
- здатний самостійно визначати наявність мобільної версії.
Мінуси:
- відсутня можливість побачити варіанти відображення сайту на екранах різного розміру;
- демонструє лише перший екран, взаємодіяти з сайтом не вдасться.
- Яндекс.Вебмастер Mobile Friendly
Цей сервіс дозволяє перевіряти лише власний сайт після підтвердження прав на нього в Яндекс.Вебмайстрі (у Google Mobile Friendly такого обмеження немає). Він дає загальну оцінку та демонструє варіант відображення сайту на смартфоні.
Плюси:
- офіційний сервіс “Яндекса”;
- показує конкретні помилки;
- розпізнає мобільну версію сайту.
Мінуси:
- можлива перевірка лише своїх сайтів;
- Подивитися, як виглядає сайт на різних екранах, не можна.
- Quirktools
За допомогою сервісу здійснюється перевірка сайту на адаптивність на різних пристроях аж до телевізора.
Плюси:
- існує список пристроїв, з якого можна вибрати відповідні, також є можливість задати якусь конкретну роздільну здатність;
- доступна взаємодія із сайтом.
Мінуси:
- сервіс не здатний визначати наявність мобільної версії;
- відсутня перелік помилок.
- Iloveadaptive
Сервіс дозволяє перевірити адаптивність сайту під найпоширеніші мобільні пристрої та операційні системи.
Плюси:
- демонструє варіанти відображення сайту на пристроях із різними операційними системами (iOS та Android);
- визначає наявність мобільної версії;
- є розширення для Google Chrome.
Мінуси:
- немає можливості самостійно задати розмір екрану;
- відсутня перелік помилок;
- автоматичне завантаження мобільної версії без можливості подивитися, як виглядає варіант для моніторів ПК за різних дозволів.
- Adaptivator
Плюси:
- оцінює загальну якість оптимізації, дає поради щодо виправлення помилок.
Мінуси:
- не визначає мобільної версії;
- не дозволяє ввести параметри для аналізу.
Перевірка сайту на адаптивність у браузері
Перевірка адаптивності сайту онлайн може здійснюватися шляхом його відкриття на пристрої та вивчення варіантів відображення елементів. Це найпростіший і очевидніший спосіб. Він дозволяє зрозуміти, як звичайні користувачі бачать сайт на своїх телефонах та планшетах, а також як він реагує на певні команди. Недолік способу полягає в неможливості відстежити всі варіанти відображення сайту, так як пристроїв з різною роздільною здатністю в світі досить багато.
Для перевірки в браузері Google Chrome потрібно натиснути на F12 (варіанти: клацнути правою кнопкою миші на екрані – “Переглянути код” у контекстному меню; перейти в “Налаштування та керування” – “Додаткові інструменти” – “Інструменти розробника”). Це дозволить побачити на екрані, як виглядає сайт на конкретному пристрої, який можна вибрати зверху зі списку. Крім того, є можливість самостійно ввести потрібну роздільну здатність екрана. При використанні цього інструменту доступний навіть перехід за посиланнями на інші сторінки сайту.
У браузері Mozilla Firefox є схожа опція (тільки шукати її потрібно в нижній частині екрану). Її також можна викликати кнопкою F12. У меню інструмент знаходиться в пункті “Дослідити елемент”.
Сайт, як один із основних інструментів продажу, зобов’язаний працювати справно та бути ефективним. Очевидно, що перевірка сайту на адаптивність є невід’ємною частиною інтернет-маркетингу, і їй потрібно приділяти особливу увагу.