Адаптивний дизайн

Що це означає

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

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

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

Як це працює на практиці

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

Сучасні шаблони в CMS адаптивні за замовчуванням, проблема зазвичай у доопрацюваннях і у вбудованих таблицях чи відео. Тому після кожної великої зміни тестують принаймні на одному малому і одному великому пристрої.

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

На що звернути увагу

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

Перевірки у зменшеному вікні браузера замало. Справжній телефон на повільному з’єднанні покаже важкі зображення, вміст, що стрибає під час завантаження, і кнопки, перекриті плашкою cookie; саме це вимірюють Core Web Vitals, які входять до оцінки сторінки пошуком.