Ситуація, знайома майже кожному власнику сайту: на комп'ютері все виглядає добре, ви показуєте сайт зі свого телефона — і бачите, що текст дрібний, кнопка «Замовити» наполовину за екраном, а сторінка їздить вбік. При цьому виконавець каже, що «все зроблено».
Формально він може мати рацію: сайт існує й відкривається. Проблема в тому, що більшість ваших відвідувачів дивляться його саме з телефона — і для них цей сайт не працює. Не гірше, ніж на комп'ютері, а просто не працює: якщо кнопку не натиснути, замовлення не буде.
Ця стаття пояснює простими словами, що таке адаптивність, звідки беруться типові поломки, як перевірити свій сайт самому й що вимагати від виконавця, щоб цієї розмови взагалі не виникало.
Що таке адаптивність
Адаптивна верстка — це коли сайт сам підлаштовує свою структуру під розмір екрана: на широкому моніторі блоки стоять у три колонки, на телефоні — вишиковуються в одну, меню згортається в кнопку, шрифти й відступи змінюються.
Ключове слово — структура, а не масштаб. Погана імітація адаптивності — це коли сторінку просто зменшили, щоб «вмістилась»: технічно вона вміщується, але текст стає нечитабельним, а натискати доводиться прицілюючись.
Що варто розрізняти:
- Адаптивний сайт — один сайт, який змінює вигляд залежно від екрана. Стандарт сьогодні.
- Окрема мобільна версія — другий сайт на окремій адресі. Застарілий підхід: дві версії треба підтримувати окремо, і вони завжди розходяться.
- Просто масштабування — не адаптивність узагалі, а її видимість.
Адаптивність — це не «щоб вміщувалось», а щоб на телефоні сайтом було зручно користуватися: читати без зуму й натискати пальцем без прицілювання.
Симптоми й що за ними стоїть
Кожна типова скарга має конкретну технічну причину.
Сторінка їздить вбік (горизонтальна прокрутка). Майже завжди якийсь елемент ширший за екран: таблиця, зображення, довге слово чи посилання, блок із фіксованою шириною в пікселях. Один такий елемент розтягує всю сторінку.
Текст дрібний, доводиться зумити. Розміри шрифтів задані під десктоп і не змінюються на малих екранах, або сторінці не сказано, що вона має підлаштовуватись під ширину пристрою.
Кнопки не натискаються з першого разу. Елементи розраховані на курсор миші, а не на палець. Палець потребує помітно більшої зони натискання, і сусідні посилання не мають бути впритул.
Зображення розтягнуті або обрізані. Картинку вставили з фіксованим розміром, і на іншому екрані вона або виходить за межі, або деформується.
Меню недоступне. Горизонтальне меню на десять пунктів фізично не вміщується на телефоні, а мобільного варіанту не передбачили.
Форму неможливо заповнити. Поля вузькі, підписи налазять, клавіатура закриває половину екрана, а сторінка не прокручується до потрібного поля.
Блоки налазять один на одного. Верстка розрахована на конкретну ширину, і за її межами елементи перекриваються.
Сайт довго відкривається на мобільному інтернеті. Формально не «повзе», але результат той самий: людина йде, не дочекавшись. Про це — окремий розділ нижче.
Чому так виходить
Причини майже завжди в процесі, а не в кваліфікації окремої людини.
- Дизайн намалювали тільки під десктоп. Тоді верстальник змушений вигадувати мобільний вигляд сам — і рішення виходить випадковим.
- Фіксовані розміри в пікселях замість гнучких. Блок шириною рівно 1200 пікселів на екрані шириною 390 виглядатиме саме так, як ви бачите.
- Не перевіряли на реальних пристроях. Зменшене вікно браузера — не те саме, що телефон: там інша щільність екрана, інші шрифти, інша поведінка клавіатури.
- Контент додали пізніше. Верстка була нормальною, поки в неї не завантажили таблицю на вісім колонок або довгу назву без пробілів.
- Адаптив не був у ТЗ. Найчастіша причина суперечок: замовник вважав це очевидним, виконавець — окремою роботою. Як цього уникнути — у статті «Як скласти ТЗ і бриф».
Брейкпоінти простими словами
Брейкпоінт — це ширина екрана, на якій верстка перебудовується. Умовно: до певної ширини блоки стоять у три колонки, після — у дві, ще менше — в одну.
Що з цього важливо знати замовнику:
- Брейкпоінтів зазвичай кілька — не «десктоп і мобільний», а кілька станів, включно з планшетом і великими телефонами.
- Кожен брейкпоінт — це окрема робота дизайнера й верстальника. Саме тому адаптивність впливає на ціну: це не «одна галочка», а кілька варіантів однієї сторінки. Структуру вартості розібрано у статті «Скільки коштує зробити сайт».
- Перевіряти треба між брейкпоінтами теж: найчастіше все ламається саме на проміжних ширинах.
Мобільний — це не зменшений десктоп
Головна помилка мислення. На телефоні змінюється не тільки розмір, а й спосіб користування:
- Палець замість курсора. Немає наведення, немає точного прицілювання, є випадкові натискання.
- Вертикальний потік. Усе шикується в одну колонку, тому порядок блоків стає критичним: те, що на десктопі було збоку, на мобільному опиниться зверху або внизу.
- Інша ситуація користувача. Людина в дорозі, поспішає, часто без звуку. Довгий текст і складні форми працюють гірше.
- Менше видно за раз. Головне має бути на першому екрані: що це, для кого й що натиснути.
- Клавіатура з'їдає пів екрана — це треба враховувати у формах.
- Наведення не працює взагалі. Усе, що показується «при наведенні», на телефоні або недоступне, або поводиться непередбачувано.
Тому правильний порядок роботи — спочатку мобільний макет, потім десктоп. Так головне визначається одразу, а на широкому екрані лишається додати простір, а не викидати блоки.
Чи потрібна окрема мобільна версія сайту?
У більшості випадків ні. Окремий мобільний сайт на іншій адресі — застарілий підхід: дві версії треба підтримувати паралельно, вони поступово розходяться за вмістом, а пошукові системи отримують дублікати, які треба правильно пов'язувати.
Сучасне рішення — один адаптивний сайт. Окрема версія має сенс лише у вузьких випадках: коли мобільний сценарій принципово інший за десктопний (наприклад, повноцінний особистий кабінет проти простого перегляду), і навіть тоді частіше говорять про окремий застосунок, а не про другий сайт.
Швидкість — теж частина адаптивності
Сайт може бути ідеально складеним і при цьому не працювати на мобільному, бо просто не встигає відкритись.
- Зображення — головна причина. Фото з фотоапарата вагою кілька мегабайт на телефоні вантажиться помітно довго. Картинки треба стискати й віддавати в розмірі, потрібному для екрана.
- Мобільний інтернет нерівний. Ваш сайт відкривають у транспорті, у ліфті, за містом — а не на офісному Wi-Fi.
- Кожна зайва секунда коштує відвідувачів. Люди не чекають — вони повертаються у видачу.
- Перевіряйте на мобільній мережі, а не тільки на домашньому Wi-Fi. Це найпростіший спосіб побачити реальну картину.
Ширший контекст сучасних вимог до продуктивності — у статті «Сучасна розробка сайтів».
Як перевірити свій сайт за 10 хвилин
Без інструментів і спеціальних знань:
- Відкрийте сайт із реального телефона, не зі зменшеного вікна браузера.
- Спробуйте посунути сторінку вбік. Якщо вона їздить — є елемент ширший за екран.
- Прочитайте текст без зуму. Довелося збільшувати — шрифт замалий.
- Натисніть головну кнопку пальцем, не нігтем і не прицілюючись.
- Заповніть форму до кінця й надішліть. Половина проблем виявляється саме тут.
- Відкрийте меню й перейдіть у два-три розділи.
- Переверніть телефон горизонтально — верстка не має розсипатись.
- Перевірте на другому телефоні з іншим розміром екрана, бажано старішому.
- Вимкніть Wi-Fi і відкрийте сайт на мобільному інтернеті.
- Пройдіть увесь шлях до цілі: від головної до заявки чи оформлення замовлення.
Якщо на будь-якому кроці ви відчули незручність — її відчують і клієнти, просто вони не напишуть вам про це, а закриють вкладку.
Що вимагати від виконавця
- Пропишіть адаптивність у ТЗ явно. Не «сайт має бути зручним», а «макети й верстка під мобільний, планшет і десктоп».
- Вимагайте мобільні макети на етапі дизайну, а не після верстки. Інакше мобільний вигляд вигадуватиметься наспіх.
- Домовтесь про перелік пристроїв, на яких перевіряється результат.
- Перевірте самі перед оплатою за чеклістом вище — це частина приймання роботи.
- Уточніть, що буде з новим контентом. Довга назва товару чи широка таблиця не мають ламати сторінку.
- Не сприймайте адаптив як безкоштовний бонус. Це реальна робота, яка входить у вартість, — і вона має бути названа в пропозиції.
Типові помилки
- Перевіряти адаптивність зменшенням вікна браузера. Наближено, але не показує проблем із натисканням і клавіатурою.
- Дивитись тільки на своєму телефоні. Ваш екран — не єдиний існуючий.
- Дизайн тільки під десктоп. Мобільний вигляд у результаті виходить випадковим.
- Ставити на мобільному все те саме, що й на десктопі. Пріоритети на маленькому екрані інші.
- Ігнорувати вагу зображень. Найдешевша й найпоширеніша причина повільного сайту.
- Забути про форми. Найчастіше місце втрати заявок на мобільному.
- Розраховувати на наведення. На телефоні його немає.
- Не перевіряти після додавання контенту. Верстка ламається саме тоді, коли в неї потрапляють реальні тексти й фото.
Головне коротко
- Адаптивність — це перебудова структури під екран, а не зменшення сторінки.
- Горизонтальна прокрутка майже завжди означає один елемент, ширший за екран.
- Мобільний — не зменшений десктоп: інший порядок блоків, палець замість курсора, немає наведення.
- Правильний порядок роботи — спочатку мобільний макет, потім десктоп.
- Швидкість — частина адаптивності: важкі зображення вбивають сайт на мобільному інтернеті.
- Перевіряти треба на реальних пристроях і на мобільній мережі, а не в зменшеному вікні браузера.
- Адаптивність має бути явно прописана в ТЗ — інакше це джерело суперечки на здачі.
- Окрема мобільна версія сьогодні майже завжди зайва.
FAQ
Чому сайт нормально виглядає на комп'ютері й «повзе» на телефоні?
Тому що верстка розрахована на широкий екран: розміри задані фіксовано, блоки не перебудовуються, а меню й форми не мають мобільного варіанту. Найчастіша конкретна причина горизонтальної прокрутки — один елемент, ширший за екран: зображення, таблиця, блок із фіксованою шириною або довге слово чи посилання без переносу.
Що таке адаптивна верстка простими словами?
Це коли сайт сам змінює структуру під розмір екрана: колонки перебудовуються в одну, меню згортається в кнопку, шрифти й відступи підлаштовуються. Головне тут — саме перебудова структури, а не масштабування сторінки: якщо сторінку просто зменшили, щоб вона вмістилась, це не адаптивність, а її імітація.
Чи потрібна окрема мобільна версія сайту?
Зазвичай ні. Сучасний стандарт — один адаптивний сайт, який працює на всіх екранах. Окрема мобільна версія на іншій адресі означає два сайти, які треба підтримувати паралельно й які з часом розходяться за вмістом. Виняток — випадки, коли мобільний сценарій принципово інший, і навіть тоді частіше роблять застосунок.
Як перевірити, чи адаптивний мій сайт?
Відкрийте його з реального телефона й пройдіть весь шлях до цілі: спробуйте посунути сторінку вбік, прочитайте текст без зуму, натисніть головну кнопку пальцем, заповніть і надішліть форму, відкрийте меню, переверніть телефон. Окремо перевірте на мобільному інтернеті без Wi-Fi і, якщо є змога, на другому телефоні з іншим екраном.
Що робити далі
Пройдіть десять кроків перевірки зі свого телефона — це десять хвилин, які дадуть конкретний список проблем замість відчуття «щось не так». Кожен пункт із цього списку — уже сформульована задача для виконавця.
Якщо сайт тільки планується, впишіть адаптивність у ТЗ і вимагайте мобільні макети на етапі дизайну: це дешевше, ніж переробляти верстку потім. Знайти фахівця можна в каталозі спеціалістів, а базові терміни, які прозвучать у розмові, зібрані в статті «Домен, хостинг, CMS, API і Git простими словами».
Готові діяти?
- Знайдіть виконавця в каталозі: https://searchtalent.dev/uk/talents
- Перегляньте проєкти фахівців: https://searchtalent.dev/uk/projects
- Каталог навичок і технологій: https://searchtalent.dev/uk/talents/skill
- Більше статей: https://searchtalent.dev/uk/articles
