Як веб навчився дихати: історія responsive design

Смартфон, планшет, ноутбук і широкоформатний монітор поряд — той самий сайт, що адаптується до кожного розміру екрану

У січні 2007 року Стів Джобс підняв над сценою перший iPhone і сказав, що на ньому буде "справжній інтернет, а не WAP-версія". Веб, щойно почувши це, мав би з гордістю випростатися. Замість цього він тихо зламався: сайти, розраховані на 1024-піксельний монітор, розтягнулись, потім стиснулись у нечитабельну кашу. Мобільний Safari мусив брехати, що ширина вікна — 980 пікселів, а потім вручну зменшувати картинку, щоб хоча б щось було видно.

Через три роки один чоловік на конференції у Сіетлі сказав три слова, які змінили веб назавжди: responsive web design. Це його історія. Історія про те, як веб 20 років не розумів, що він — не папір, а потім навчився приймати форму будь-якого екрану, як вода приймає форму ємності.

Акт 1. Веб, який не знав, що таке екран (1994–2009)

У 1994 році, коли Гакон Віум Лі (той самий, що створив CSS) писав свою першу пропозицію для Каскадних Таблиць Стилів, він уже думав про медіа-запити. У документі була ідея: різні стилі для різних екранів, принтерів, проекторів. Але коли у 1996 CSS1 став офіційним стандартом W3C, medіa queries туди не потрапили. Надто рано. Надто складно. Повернемося до цього пізніше.

А веб тим часом жив у епоху "Best viewed in 800×600" — маленьких підписів внизу сайтів, які ввічливо просили відвідувачів налаштувати свій монітор під сайт. Це не жарт: у 2001-му це була повсякденна норма. Фіксована верстка на таблицях, width="760", центрований контент, два порожні стовпчики з боків. Веб не адаптувався до користувача — користувач мав адаптуватися до вебу.

Dao, який випередив свій час

7 квітня 2000 року австралієць на ім'я John Allsopp опублікував у журналі A List Apart статтю з дивною назвою — A Dao of Web Design. Це не був технічний мануал. Це був філософський маніфест. Allsopp писав:

The web's greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility.

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

Стаття вийшла — і майже нічого не сталося. IE6 ще не існував. Веб-стандарти були у зачатку. Про гнучкість мало хто хотів слухати. Але через 10 років саме ця стаття стане фундаментом, на якому побудують responsive design. У 2015 році A List Apart перевидає її під заголовком "15 Years of Dao" — і відзначить, що жодне слово не застаріло.

W3C повільно рухається, Apple винаходить костиль

Тим часом W3C теж працював. Травень 2001: перший публічний Working Draft CSS3 Media Queries (автори — той самий Гакон Лі з Opera і Tantek Çelik). Липень 2002: Candidate Recommendation. Браузери... переважно ігнорували специфікацію. Media queries існували як ідея, але написати @media (max-width: 600px) і очікувати, що це спрацює — ні, не в 2005 році.

А далі стався 9 січня 2007 року. iPhone. Повноцінний Safari у кишені. Веб раптом мусив жити на екрані 320 пікселів — на екрані, розмір якого розробники навіть уявити не могли, коли писали свої 960-піксельні макети.

Apple вирішила проблему "тут і зараз" у найбільш хакерський спосіб: мобільний Safari прикидався, що ширина вікна — 980 пікселів. Рендерив сайт як звичайний, а потім зменшував результат до розміру екрану. Текст ставав мікроскопічним, юзер пінчав пальцями, щоб збільшити. Не ідеально — але принаймні не ламалось.

Щоб розробники могли сказати браузеру правду — Apple винайшла тег, якого немає у жодній W3C-специфікації, бо це був пожежний костиль:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

"Гей, браузере, не бреши. Використовуй справжню ширину пристрою". Цей тег ніхто ніколи не стандартизував формально — він став де-факто стандартом тому, що розв'язав критичний біль. Android, Windows Phone, Opera Mobile — всі скопіювали поведінку Apple. І досі, у 2026 році, цей рядок — перше, що ти додаєш у <head> будь-якого сайту.

Ера m.example.com

З 2007-го по 2010-й індустрія намагалася впоратися з мобільними по-іншому: дві окремі версії сайту. example.com для десктопу і m.example.com для мобільних. Сервер дивився на User-Agent і редиректив.

Desktop chrome → example.com/products/42
iPhone Safari  → m.example.com/products/42

Це працювало. І це був SEO-кошмар: дві URL для однієї сторінки, подвійна робота для редакторів, два окремі шаблони, постійна розсинхронізація. А ще — розмір екрану не ділиться на дві категорії "телефон" і "не телефон". Що робити з iPad, який вийшов у квітні 2010? Показувати йому мобільну версію? Десктопну? Жодна не підходила.

Індустрія зайшла в глухий кут. Потрібна була нова ідея.

Акт 2. Момент, який усе змінив (2009–2010)

Luke Wroblewski і Mobile First

3 листопада 2009 року, за півроку до того, як веб узагалі почув слово "responsive", колишній Head of Design у Yahoo Luke Wroblewski публікує у своєму блозі пост із назвою, яка стане заклинанням наступного десятиліття: Mobile First.

Його аргумент був не технічний, а бізнесовий. AT&T тоді повідомила, що мобільний дата-трафік у їхній мережі зріс на 4 932% за три роки. Lue казав: якщо ви проектуєте сайт з десктопа, а потім "адаптуєте" його для мобільного — ви починаєте з того, що додаєте зайве, а потім болісно вирізаєте. А якщо проектувати з мобільного — маленький екран змушує тримати тільки найважливіше. Обмеження стають редактором.

"Mobile First" — це не про min-width у CSS. Це про порядок мислення: спочатку вирішіть, без чого ваш продукт не має сенсу. Все інше — доповнення.

6 квітня 2010: Ethan Marcotte виходить на сцену

На конференції An Event Apart Seattle 6 квітня 2010 року дизайнер на ім'я Ethan Marcotte вийшов з доповіддю "A Dao of Flexibility" (так, назва — привіт Allsopp'у). І вперше вголос публічно вимовив словосполучення responsive web design.

Через сім тижнів, 25 травня 2010, у тому ж самому A List Apart, де колись вийшов Dao, Маркотт опублікував статтю Responsive Web Design — яку сьогодні вважають документом, що переломив історію фронтенду.

Маркотт запропонував три стовпи:

1. Fluid grids — відсотки замість пікселів, сітка, яка тягнеться
2. Flexible images — max-width: 100%, щоб картинки не вилазили за край
3. Media queries — CSS, що реагує на ширину вікна

Звідки він узяв слово "responsive"? З архітектури. У 2000-х була школа "responsive architecture" — будівлі, які реагували на людей навколо: датчики, адаптивне освітлення, стіни, що змінюють форму. Маркотту здалося, що веб має робити те саме: не підлаштовуватись під одну "ціль", а реагувати на контекст користувача.

Канонічний приклад з тієї статті виглядав приблизно так:

/* Базова "широка" розкладка */
.page {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar { float: left; width: 30%; }
.content { float: right; width: 65%; }

/* А ось і магія: коли екран вужче 768px — розкладка перебудовується */
@media screen and (max-width: 768px) {
  .sidebar, .content {
    float: none;
    width: 100%;
  }
}

Чотири рядки в кінці файлу. І раптом сайт перестав бути окремо-для-мобільного і окремо-для-десктопу. Один HTML. Один CSS. Одна URL. Одне джерело правди. Ідея настільки проста, що виникає питання: чому її не придумали раніше? Відповідь: придумали. Але треба було, щоб Allsopp написав філософію, щоб з'явився iPhone, щоб Wroblewski сказав "mobile first", і щоб W3C нарешті довів специфікацію до придатності для життя.

Серпень 2011: Bootstrap робить responsive мейнстрімом

У серпні 2011 року двоє розробників Twitter, Mark Otto і Jacob Thornton, відкривають внутрішній проект "Twitter Blueprint" як open source. Він отримує нове ім'я — Bootstrap. Через рік половина стартапів Кремнієвої долини користується ним. Через два роки col-md-6 col-sm-12 знає кожен frontend-джуніор. Bootstrap не винайшов responsive — він зробив його непереборним. Якщо ти хотів швидко зверстати сайт, ти автоматично отримував media queries у подарунок.

Акт 3. Стандарт і перемога мобайлу (2012–2016)

19 червня 2012 року — дата, на яку чекали 18 років. CSS3 Media Queries Level 3 офіційно стають W3C Recommendation. Це був лише четвертий CSS3-модуль, що дістався цього статусу. Тепер @media — не експеримент, не префіксована фіча, а повноцінний стандарт, який зобов'язаний підтримувати кожен сучасний браузер.

2013-й Mashable охрестив "Роком Responsive Web Design". Великі сайти переробляли себе один за одним. BBC, Time, The Boston Globe (один з найвідоміших ранніх responsive-релізів) — усі переходили на одну кодову базу.

А далі настав момент, якого чекали Wroblewski та компанія. Четвертий квартал 2016 року: за даними StatCounter, глобальний мобільний трафік уперше в історії перевершив десктопний — 50.77% проти 49.23%. Світ офіційно став mobile-first не лише у дизайн-методології, а й у реальності.

Того ж листопада 2016 Google оголошує про початок mobile-first indexing — з цього моменту пошуковий гігант індексуватиме мобільну версію сайту як основну. Якщо твій сайт працює кепсько на телефоні — Google почне опускати його в результатах пошуку.

Наскільки це було великою справою? Google переводив сайти на нову систему майже сім років. Оголосили листопад 2016 — повністю завершили 31 жовтня 2023. Сім років тихої перебудови всього інтернету. І уяви собі: у 2025 році мобільний трафік досяг 64.35% глобального вебу. Більше ніж три десктопи з п'яти візитів — це телефони.

Акт 4. Інтринсична ера (2017–сьогодні)

Коли базовий responsive став повсюдним, спільнота почала думати глибше. Media queries відповідали на питання "який у користувача розмір екрану?" — але для доступності цього було мало. Людина може хворіти на вестибулярний розлад і ненавидіти анімації. Людина може бути далекозорою і збільшувати шрифт на 200%. Людина може пересуватись у метро і не хотіти темної теми. Дизайн має реагувати не тільки на екран, а й на людину.

User Preference Queries

Березень 2017, Safari 10.1: з'являється prefers-reduced-motion. Це саме разом з фічею macOS Sierra "Reduce Motion" в налаштуваннях доступності. Якщо користувач увімкнув цю опцію в ОС — CSS дізнається про це і може вимкнути анімації.

Березень 2019, Safari 12.1: prefers-color-scheme. Dark mode нарешті стає стандартом, а не витребенькою. Два роки — і всі браузери підтримують.

/* Автоматичний dark mode — реагує на системні налаштування користувача */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e8e8e8;
  }
}

/* Повага до людей, які вимкнули анімації у системі */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Це вже не просто responsive. Це adaptive. CSS починає розуміти людину, а не тільки пристрій.

Container Queries — тиха революція 2022-го

Є річ, на яку frontend-спільнота скаржилася з 2011 року. Уяви компонент "картка" — з картинкою, заголовком, описом. Якщо картка стоїть у hero-секції на всю ширину — хочеться мати велику горизонтальну розкладку. Якщо та сама картка стоїть у вузькому sidebar — потрібна вертикальна. Media queries тут не допоможуть, бо вони знають тільки про вікно браузера. А розмір самого sidebar? Невідомо.

13 років спільнота просила: дайте нам media queries для елементів. І нарешті у серпні 2022 в Chrome 105 і Safari 16 приземлились Container Queries. У лютому 2023 Firefox 110 закриває baseline — технологія доступна всюди.

/* Оголошуємо, що елемент може бути "контейнером" */
.card-wrapper {
  container-type: inline-size;
}

/* А тепер картка адаптується до ширини СВОГО контейнера, а не вікна */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Це звучить як маленька зміна — а насправді змінило ментальну модель повністю. До container queries компоненти залежали від глобального контексту: "якщо вікно ширше 768px, покажи так". Після container queries — компонент автономний, він адаптується до простору, який йому виділили, байдуже де він стоїть.

Intrinsic Web Design — наступний крок

У 2018 році Jen Simmons (тоді дизайнер-евангеліст у Mozilla) запропонувала термін "Intrinsic Web Design" — і заявила, що responsive був першим кроком, а наступний — взагалі обходитися без breakpoints там, де це можливо.

Ключовий інструмент — функція clamp():

/* Fluid typography — шрифт росте плавно від 1rem до 2rem,
   без жодного media query */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* Падінг, який "дихає" разом з екраном */
.section {
  padding: clamp(1rem, 5vw, 4rem);
}

clamp(мін, ідеал, макс) — CSS сам обчислює значення залежно від розміру вікна, між двома межами. Одна властивість замінює три media queries і виглядає набагато елегантніше.

А ще з'явилися нові одиниці виміру — dvh, svh, lvh ("dynamic/small/large viewport height"). Пам'ятаєш старий баг, коли height: 100vh на iOS ховався під адресну стрічку Safari? Тепер є dvh, який реагує на появу/зникнення мобільного UI. Маленькі перемоги, яких веб чекав роками.

Акт 5. Куди все йде

Сучасний responsive design у 2026 році — це вже не про те, щоб підставити @media (max-width: 768px) наприкінці CSS-файлу. Це інший спосіб думання про верстку:

• Breakpoints ставлять там, де ламається контент, а не під iPhone 14 Pro. Останні роки індустрія активно відходить від "магічних чисел" 768/1024/1440. Якщо твоя карточка виглядає криво при 620px — ось тобі breakpoint. Пристрій тут ні до чого.
• Компоненти автономні через container queries. Картка не питає "яка ширина вікна" — вона питає "яка ширина моєї коробки".
• Дизайн реагує на людину, а не тільки на екран: prefers-color-scheme, prefers-reduced-motion, prefers-contrast.
• Там, де можна без breakpoints — обходимось без них: clamp(), min(), max(), grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Intrinsic sizing — це коли сітка сама знає, як їй себе впорядкувати.
• Mobile-first — не мода, а здоровий глузд: 64% трафіку — мобільний. Якщо твій сайт починається з десктопа, ти починаєш з меншини.

Через 26 років після того, як John Allsopp попросив нас перестати боротися з гнучкістю вебу, ми нарешті почули його. Веб — не папір. Він — вода. І приймає форму того, хто його читає.

Що з цього винести

Responsive web design — це не список CSS-хаків. Це зміна мислення. Ти не контролюєш, як користувач побачить твій сайт. У нього свій пристрій, свій браузер, свій розмір шрифту, свої налаштування доступності, свій контекст. Твоя робота — не нав'язати йому свою версію правди, а дати гнучку структуру, яка сама знайде оптимум.

Саме про це писав Allsopp у 2000-му. Саме це формалізував Marcotte у 2010-му. Саме це розширюють container queries і intrinsic design сьогодні. Один безперервний рух — від контролю до довіри.

Якщо хочеш одразу перейти від теорії до практики і почати писати @media власними руками — подивись наш урок про Responsive Design та анімації у блоці CSS. А якщо ще не знайомий з Flexbox і Grid, з яких починається сучасна responsive верстка — стартуй з уроку про Flexbox і уроку про CSS Grid. Разом ці три уроки — майже все, що треба, щоб зверстати сучасний сайт, який працюватиме від смартфона до 4K-монітора.