Адаптивний дизайн сайтів для desktop, tablet та mobile

Що таке адаптивний дизайн сайту

Адаптивний дизайн — це підхід, за якого інтерфейс сайту змінює структуру та подачу залежно від розміру екрана.

Одна й та сама сторінка на desktop, tablet і smartphone не повинна виглядати як механічно зменшена копія. На різних екранах змінюються:

• ширина контенту;
• кількість колонок;
• розміри блоків;
• порядок елементів;
• навігація;
• фільтри;
• таблиці;
• картки;
• форми;
• CTA;
• зображення;
• інші компоненти.

Задача дизайнера — визначити, як кожний елемент повинен трансформуватися, а не залишити це рішення frontend-розробнику вже на етапі верстки.

Desktop, tablet та mobile

Найчастіше дизайн проєкту опрацьовується щонайменше для декількох основних станів:

• desktop — великі екрани ноутбуків і моніторів;
• tablet — планшети та проміжні розміри;
• mobile — смартфони.

Конкретна кількість макетів залежить від складності проєкту. Простому корпоративному сайту може бути достатньо desktop + mobile, тоді як e-commerce, SaaS або B2B-системи часто потребують окремого tablet-рішення та додаткових проміжних станів.

Чому mobile не можна просто зменшити з desktop

На desktop дизайнер має значно більше горизонтального простору. На mobile той самий інтерфейс може стати перевантаженим або взагалі непридатним для використання.

Наприклад:

• чотири картки в ряд перетворюються на одну або дві;
• велике меню стає mobile navigation;
• sidebar із фільтрами переходить у drawer або bottom sheet;
• таблиця трансформується в cards або горизонтальний scroll;
• двоколонкова форма стає одноколонковою;
• CTA може стати sticky;
• частина другорядної інформації переноситься нижче.

Ці рішення повинні бути спроєктовані заздалегідь.

Responsive Web Design

Responsive Web Design означає, що інтерфейс не прив’язаний до одного фіксованого розміру.

Дизайн створюється так, щоб frontend міг адаптувати сторінку між основними breakpoints без різких або нелогічних змін.

Для цього визначаємо:

• max-width контейнерів;
• grid;
• gaps;
• відступи;
• поведінку колонок;
• розміри тексту;
• масштабування зображень;
• поведінку компонентів.

Breakpoints

Breakpoint — це ширина екрана, на якій структура інтерфейсу змінюється.

У проєкті можуть бути передбачені окремі стани для:

• large desktop;
• desktop;
• small laptop;
• tablet landscape;
• tablet portrait;
• mobile;
• small mobile.

Не обов’язково малювати окремий повний макет під кожну ширину. Дизайнер визначає ключові стани та правила адаптації між ними.

Адаптивна сітка

Grid є основою responsive design.

На різних екранах можуть змінюватися:

• кількість колонок;
• ширина container;
• gutter;
• horizontal padding;
• vertical spacing;
• максимальна ширина контенту.

Системний grid допомагає frontend-команді відтворити адаптив без необхідності приймати дизайнерські рішення під час верстки.

Адаптивна типографіка

Заголовок, який добре виглядає на desktop, може займати п’ять рядків на смартфоні.

Тому окремо визначаємо mobile і tablet значення для:

• H1;
• H2;
• H3;
• body text;
• buttons;
• labels;
• captions;
• line-height.

Адаптивний header

Header є одним із компонентів, який найсильніше змінюється між desktop і mobile.

Desktop може містити:

• logo;
• повне меню;
• dropdown;
• мови;
• пошук;
• кабінет;
• CTA.

На mobile частина цих елементів переноситься в окреме меню або спрощується.

Mobile Menu

Мобільне меню повинно залишатися зрозумілим навіть для великого багаторівневого сайту.

Можна передбачити:

• burger menu;
• full-screen navigation;
• accordion для підрозділів;
• back navigation;
• контакти;
• мови;
• пошук;
• CTA.

Mega Menu на mobile

Desktop mega menu не можна просто стиснути до ширини смартфона.

На mobile воно може трансформуватися в:

• послідовні рівні;
• accordion;
• окремі category screens;
• інші компактні navigation patterns.

Адаптивний Hero

Перший екран часто має складну композицію з текстом, CTA, графікою або фотографією.

На mobile потрібно визначити:

• порядок тексту та зображення;
• розмір H1;
• кількість CTA;
• висоту блоку;
• cropping зображення;
• положення decorative elements.

Адаптивні контентні блоки

Блоки з двома або трьома колонками на desktop часто переходять у вертикальний формат.

При цьому важливо визначити:

• що показується першим;
• де знаходиться зображення;
• як змінюються відступи;
• чи потрібен carousel;
• чи залишається весь контент видимим.

Адаптивні картки

Картки використовуються в послугах, кейсах, товарах, командах, відгуках та інших блоках.

На різних екранах може змінюватися:

• кількість карток у ряд;
• співвідношення зображення;
• padding;
• розмір заголовка;
• кількість видимого тексту;
• розташування CTA.

Grid або Slider на mobile

Не кожний desktop grid обов’язково потрібно перетворювати на довгий список.

Для окремих блоків можна використовувати horizontal carousel, якщо це не погіршує доступність контенту.

Рішення залежить від важливості елементів і контексту сторінки.

Адаптивні зображення

Desktop і mobile мають різні пропорції екрана, тому одна фотографія може потребувати іншого cropping.

У дизайні визначаємо:

• aspect ratio;
• crop;
• position;
• розмір;
• background behavior;
• mobile alternative, якщо вона потрібна.

Адаптивні банери

Горизонтальний desktop banner часто непридатний для smartphone.

Для mobile можна:

• змінити композицію;
• перенести текст;
• використати інше зображення;
• змінити aspect ratio;
• зменшити кількість декоративних елементів.

Адаптивний дизайн корпоративного сайту

Для корпоративного сайту окремо адаптуємо:

• header;
• hero;
• послуги;
• галузі;
• кейси;
• команду;
• відгуки;
• форми;
• footer.

Головна задача — зберегти візуальний характер desktop-версії, але зробити сторінки комфортними для читання та взаємодії зі смартфона.

Адаптивний дизайн інтернет-магазину

E-commerce має значно більше складних mobile-сценаріїв, ніж звичайний корпоративний сайт.

Окремо адаптуємо:

• головну;
• категорії;
• каталог;
• filters;
• sorting;
• product card;
• gallery;
• variations;
• cart;
• checkout;
• cabinet.

Адаптивний каталог

На desktop каталог може містити sidebar, великий grid і значну кількість controls.

На mobile структура зазвичай змінюється:

• sidebar зникає;
• filters відкриваються окремо;
• sorting стає компактнішим;
• товари відображаються по одній або дві картки;
• частина інформації в картці скорочується.

Mobile Filters

Фільтри є класичним прикладом компонента, який потребує окремого mobile-рішення.

Можуть використовуватися:

• full-screen panel;
• drawer;
• bottom sheet;
• accordion;
• filter chips;
• sticky Apply button.

Адаптивна картка товару

На desktop product page може одночасно показувати велику gallery, характеристики, ціну, варіації та delivery.

На mobile ці блоки вибудовуються у пріоритетній послідовності.

Наприклад:

1. gallery;
2. назва;
3. ціна;
4. варіації;
5. CTA;
6. доставка;
7. характеристики;
8. опис;
9. відгуки.

Mobile Gallery

Для товарів, нерухомості, HoReCa та інших візуальних проєктів gallery на smartphone потребує окремої поведінки.

Можна передбачити:

• swipe;
• pagination indicators;
• fullscreen mode;
• zoom;
• video;
• thumbnails там, де вони доцільні.

Mobile Cart

Кошик повинен залишатися компактним, але не приховувати критичну інформацію.

Користувач повинен бачити:

• товар;
• variation;
• quantity;
• price;
• discount;
• total;
• CTA checkout.

Mobile Checkout

Checkout часто має найбільшу кількість form-elements, тому його не можна залишати без окремого mobile-макета.

Опрацьовуємо:

• контактні дані;
• delivery;
• address;
• payment;
• promo;
• summary;
• CTA;
• validation;
• success.

Sticky CTA на mobile

Для комерційних сторінок основна дія може залишатися доступною під час scroll.

Наприклад:

• Купити;
• Замовити;
• Забронювати;
• Залишити заявку;
• Перейти до checkout.

Sticky-блок не повинен займати надто велику частину екрана або перекривати content.

Адаптивні форми

Desktop form може містити декілька колонок. На smartphone поля найчастіше переходять в один вертикальний потік.

Окремо враховуємо:

• field width;
• spacing;
• labels;
• hints;
• error messages;
• buttons;
• upload;
• mobile keyboard.

Адаптивні таблиці

Широка desktop table є одним із найскладніших елементів responsive design.

Залежно від задачі на mobile можна використовувати:

• horizontal scroll;
• cards;
• скорочений набір колонок;
• expandable rows;
• detail screen;
• перемикання режимів.

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

Адаптивний B2B-інтерфейс

B2B-сайти часто містять технічні таблиці, специфікації та складні форми.

У mobile-версії необхідно зберегти доступ до важливої інформації, але змінити її подачу.

Можна адаптувати:

• technical tables;
• RFQ forms;
• product specifications;
• documents;
• downloads;
• catalog navigation.

Адаптивний SaaS

Для web application mobile-версія часто потребує значно більшої перебудови, ніж маркетинговий сайт.

Особливо це стосується:

• sidebar navigation;
• dashboard;
• tables;
• charts;
• filters;
• bulk actions;
• settings;
• modals.

Не всі desktop-функції обов’язково мають бути однаково представлені на mobile. Пріоритет визначається реальними сценаріями.

Адаптивний особистий кабінет

У cabinet mobile design окремо опрацьовуємо:

• navigation;
• profile;
• orders;
• documents;
• notifications;
• payments;
• settings;
• tables;
• filters.

Sidebar на mobile

Desktop sidebar часто використовується в кабінетах, SaaS та каталогах.

На smartphone він може перетворюватися на:

• drawer;
• top selector;
• bottom navigation;
• full-screen menu;
• інші compact patterns.

Адаптивні модальні вікна

Modal, який добре працює на desktop, може не поміщатися на smartphone.

На mobile можна використовувати:

• full-screen modal;
• bottom sheet;
• окремий screen;
• scrollable modal.

Tablet дизайн

Tablet не завжди можна залишати повністю на автоматичну адаптацію між desktop і mobile.

Це особливо актуально для:

• e-commerce;
• dashboard;
• B2B;
• portal;
• catalog;
• complex navigation;
• tables.

На планшеті може бути недостатньо місця для desktop layout, але занадто багато для mobile layout. Тому потрібен окремий проміжний стан.

Tablet Portrait та Landscape

Планшет може використовуватися як вертикально, так і горизонтально.

У складних проєктах потрібно визначити:

• коли sidebar залишається;
• скільки колонок показується;
• як працює navigation;
• як адаптується catalog;
• як поводяться tables.

Large Desktop

Responsive design повинен враховувати не лише mobile, а й великі монітори.

Контент не повинен безконтрольно розтягуватися на всю ширину.

Для large desktop визначаємо:

• max-width container;
• ширину текстових блоків;
• розмір hero;
• grid;
• spacing;
• поведінку background.

Small Laptop

Інтерфейс, створений для широкого desktop, може мати проблеми на компактному ноутбуці.

Тому перевіряємо:

• navigation;
• header;
• tables;
• sidebars;
• multi-column blocks;
• hero;
• forms.

Touch Interaction

На mobile і tablet користувач працює пальцем, а не курсором.

Тому interactive elements повинні враховувати:

• достатній розмір;
• відстань між елементами;
• відсутність hover-only функцій;
• swipe;
• tap feedback;
• scroll behavior.

Hover та mobile

Desktop може використовувати hover для secondary actions або preview.

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

Для mobile передбачаємо окремий спосіб взаємодії.

Responsive states

Необхідно адаптувати не лише стандартний екран, а й системні стани.

Наприклад:

• loading;
• empty;
• error;
• success;
• disabled;
• open menu;
• open filters;
• modal;
• validation.

Mobile Empty State

Empty state на smartphone часто має іншу композицію через обмежену висоту екрана.

Необхідно правильно розмістити:

• icon або illustration;
• title;
• description;
• CTA.

Responsive Footer

Великий desktop footer може містити декілька колонок із десятками посилань.

На smartphone можна використовувати:

• accordion;
• послідовний список;
• скорочену структуру;
• окремий contact block;
• social links;
• language selector.

Mobile Search

Пошук на smartphone часто відкривається як окремий full-screen state.

Можна передбачити:

• search field;
• suggestions;
• recent queries;
• popular queries;
• results;
• empty state.

Breadcrumbs на mobile

Довгі breadcrumbs можуть займати багато місця на вузькому екрані.

Залежно від структури їх можна:

• скоротити;
• зробити horizontally scrollable;
• показати лише частину шляху;
• замінити окремим Back-сценарієм там, де це виправдано.

Tabs на mobile

Якщо tabs не поміщаються в один ряд, можна використовувати:

• horizontal scroll;
• dropdown;
• segmented control;
• accordion;
• інші patterns.

Responsive pricing tables

Pricing із декількома тарифами часто добре працює на desktop, але складно читається на смартфоні.

На mobile тарифи можна:

• розташувати вертикально;
• використати carousel;
• створити компактне порівняння;
• винести детальні характеристики в accordion.

Responsive FAQ

FAQ зазвичай добре адаптується через accordion, але необхідно перевірити:

• розмір tap area;
• відступи;
• довжину тексту;
• стан open/closed;
• иконку.

Responsive Maps

Карта на desktop може бути широким блоком із sidebar. На mobile інтерфейс може змінюватися.

Наприклад:

• full-screen map;
• bottom sheet;
• cards поверх карти;
• перемикання List / Map.

Responsive Charts

Великі dashboard charts потрібно адаптувати до вузьких екранів.

Можуть змінюватися:

• кількість labels;
• legend;
• діапазон;
• деталізація;
• orientation;
• спосіб interaction.

Mobile readability

Довгі текстові сторінки повинні залишатися комфортними для читання зі смартфона.

Контролюємо:

• font size;
• line-height;
• довжину рядка;
• відступи;
• розмір заголовків;
• списки;
• контраст.

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

Mobile-версія не повинна втрачати важливий контент лише заради компактності.

Особливо контролюємо:

• H1-H3;
• основний текст;
• категорії;
• внутрішні посилання;
• FAQ;
• breadcrumbs;
• важливі navigation links.

Другорядний контент можна подавати компактніше, але критичні SEO та бізнес-елементи не повинні просто зникати.

Mobile-first і Desktop-first

Не існує одного правильного підходу для всіх проєктів.

Mobile-first доцільний, коли основна аудиторія працює зі смартфонів.

Desktop-first може бути практичнішим для складних B2B, SaaS, admin або data-heavy систем.

У будь-якому випадку фінальний дизайн повинен бути повноцінно опрацьований для всіх основних пристроїв.

Адаптація готового desktop-дизайну

Promodex може виконати окрему задачу, якщо desktop-макети вже створені іншою командою.

У такому випадку аналізуємо:

• структуру;
• components;
• grid;
• типографіку;
• navigation;
• forms;
• tables;
• catalog;
• інші складні блоки.

Після цього створюємо mobile і, за необхідності, tablet states у стилі існуючого дизайну.

Адаптація старого сайту під mobile

Якщо існуючий сайт створювався без повноцінного адаптиву, можна спочатку спроєктувати responsive design, а після цього оновити frontend.

У такому проєкті визначаємо:

• що можна залишити;
• що потрібно перебудувати;
• як зміниться navigation;
• як поводитимуться tables;
• як адаптуються forms;
• які компоненти потрібно створити заново.

Редизайн мобільної версії

Іноді desktop-сайт працює добре, а mobile-версія створює проблеми.

У такому випадку можна провести окремий mobile redesign.

Аналізуємо:

• header;
• menu;
• first screen;
• CTA;
• forms;
• catalog;
• filters;
• tables;
• checkout;
• page speed implications для майбутнього frontend.

Figma та adaptive layouts

Адаптивні макети готуємо у Figma.

У файлі можуть бути:

• desktop frames;
• tablet frames;
• mobile frames;
• components;
• variants;
• responsive states;
• grid;
• typography;
• developer notes.

Auto Layout

Для системних компонентів у Figma можна використовувати Auto Layout, щоб краще показати, як елементи змінюються при різній кількості контенту.

Це особливо корисно для:

• buttons;
• cards;
• forms;
• navigation;
• lists;
• table elements;
• CTA blocks.

Handoff frontend-команді

Задача адаптивного дизайну — дати frontend-розробнику достатньо інформації для реалізації responsive behavior.

У handoff передаємо:

• основні breakpoints;
• desktop layouts;
• tablet layouts;
• mobile layouts;
• component behavior;
• spacing;
• grid;
• states;
• assets;
• коментарі до складних трансформацій.

Дизайн та responsive frontend — різні етапи

Адаптивний дизайн визначає, як сайт повинен виглядати та поводитися на різних ширинах. Frontend-розробник реалізує цю логіку через HTML, CSS, JavaScript та відповідні технології проєкту.

Тому створення mobile/tablet макетів і responsive frontend є окремими роботами та оцінюються окремо.

Чи потрібно малювати кожну сторінку в трьох версіях

Не завжди. Якщо сайт має багато однотипних сторінок, немає сенсу механічно дублювати кожну з них у desktop, tablet і mobile.

Замість цього можна:

• визначити унікальні шаблони;
• намалювати ключові adaptive states;
• створити системні компоненти;
• описати поведінку повторюваних блоків.

Це скорочує зайву роботу без втрати якості handoff.

Коли потрібен окремий tablet-макет

Tablet доцільно малювати окремо, якщо між desktop і mobile відбувається суттєва перебудова.

Наприклад, якщо:

• велике меню вже не поміщається;
• sidebar потрібно приховувати;
• таблиця змінює структуру;
• grid переходить із чотирьох колонок у дві;
• dashboard потребує іншого layout;
• каталог має складні filters.

Від чого залежить вартість адаптивного дизайну

Вартість залежить не лише від кількості сторінок.

На оцінку впливають:

• кількість унікальних шаблонів;
• кількість breakpoints;
• складність navigation;
• e-commerce функціональність;
• filters;
• tables;
• forms;
• dashboards;
• особисті кабінети;
• кількість responsive states;
• складність компонентів.

Чому mobile-адаптив не можна рахувати як «зменшити макет»

Для простої сторінки mobile adaptation може бути відносно швидкою. Але для e-commerce, SaaS або B2B одна desktop-сторінка може потребувати значної кількості окремих responsive-рішень.

Наприклад, потрібно окремо спроєктувати:

• mobile menu;
• filters;
• table;
• modal;
• sticky actions;
• forms;
• карточки;
• system states.

Тому адаптив оцінюється за реальною складністю інтерфейсу.

Як проходить робота над адаптивним дизайном

1. Аналіз desktop-дизайну — визначаємо структуру, компоненти та найбільш складні responsive-зони.
2. Breakpoints — погоджуємо основні desktop, tablet та mobile стани.
3. Grid — визначаємо ширини, колонки, margins і gaps.
4. Navigation — адаптуємо header, menu, sidebar та secondary navigation.
5. Key pages — створюємо mobile/tablet макети для основних шаблонів.
6. Components — адаптуємо cards, forms, tables, filters, tabs та інші елементи.
7. System states — опрацьовуємо loading, error, empty, modal та інші стани.
8. Content check — перевіряємо довгі тексти, назви, зображення й реальний контент.
9. Consistency — перевіряємо однакові правила адаптації між сторінками.
10. Handoff — готуємо Figma-макети та пояснення для frontend-команди.

Чому Promodex для адаптивного дизайну

Promodex працює з веб-розробкою та digital-проєктами з 2012 року. Тому ми розглядаємо adaptive design не як додатковий mobile frame після завершення desktop, а як частину повноцінного web-проєкту.

Наші дизайнери враховують, як макети будуть реалізовані frontend-командою: як перебудовуватиметься grid, як трансформується menu, що відбувається з tables, filters, checkout, каталогом та іншими складними компонентами.

Для простого корпоративного сайту це може бути desktop + mobile адаптація основних шаблонів, а для e-commerce, SaaS, portal або B2B-платформи — окремі desktop, tablet і mobile states для складних сторінок та компонентів. У результаті frontend-команда отримує не припущення, а зрозумілу систему responsive behavior.