Переклад з англійської версії статті мого Медіум блогу
📐 Responsive design
Ітан Маркотт ввів термін гнучкого веб-дизайну у 2010 році. Це швидкість реагування веб-сторінок на зміну розміщення елементів на сторінці відповідно до розмірів пристрою.
За найпростішим визначенням, гнучкий дизайн використовує лише один макет веб-сторінки і «гнучко» змінюється так, щоб краще відповідати екрану користувача, будь то настільний комп’ютер, ноутбук, планшет чи мобільний телефон.
Якщо дивитися з більш технічного боку, то гнучкі веб-сторінки використовують CSS медіазапити та маркери розмірів (breakpoints; далі брейкпоінт) для коригування масштабу зображень, переносу (а також масштабування) тексту та інших елементів.
📎 Adaptive design
Загалом вважається, що адаптивний дизайн — це фіксовані макети, які адаптуються до певних розмірів екрану. Коротко кажучи, у вас є кілька версій веб-сторінки, які відповідають якомусь пристрою, на відміну від однієї, статичної сторінки, яка виглядає однаково і змінює порядок (чи змінює розмір вмісту) на всіх пристроях.
Представлений у 2011 році, веб-дизайнером Аароном Густафсоном, адаптивний дизайн використовує чіткі макети для різних розмірів екрану. В адаптивному дизайні прийнято розробляти UI-макети для 6 найпоширеніших ширин екрану: 320, 480, 760, 960, 1200 і 1600 пікселів.
Знову подивимось з технічної сторони:
веб-сайти, створені з адаптивним дизайном, містять медіазапити CSS, а також удосконалюються за допомогою JavaScript, щоб змінити розмітку HTML-сайту під специфіку конкретного пристрою. Цей процес відомий як «поступове вдосконалення» (progressive enhancement).
Адаптивний дизайн не означає, що вам потрібні два окремі сайти. Він все ще дозволяє зберігати весь ваш вміст в одному місці та ділитися одним і тим же вмістом з усіма відвідувачами сайту. Адаптивні веб-сайти використовують шаблони, приготовані для кожного пристрою.
Які конкретні брейкпоінти слід використовувати?
У більшості проєктів вам необхідно буде створювати макети для персональних комп’ютерів (ПК), планшетів та мобільних пристроїв. Ви можете перевірити популярні фреймворки, щоб зрозуміти якого підходу слід дотримуватися.
Bootstrap має наступні брейкпоінти:
small : 0px to 576px
medium : 576px to 768px
large :768px to 992px
extra large : 992px to 1200px
Extra extra large : 1200px to 1400px
Foundation в основному має брейкпоінти:
small : 0px to 640px
medium : 640px to 1024px
large : 1024px and above
У Bulma :
mobile: up to 768px
tablet: from 769px
desktop: from 1024px
widescreen: from 1216px
fullhd: from 1408px
Кожен з них має різні брейкпоінти, але є і одна спільна риса — це увага до мобільних пристроїв. Ви можете використовувати один з цих брейкпоінтів як відправну точку, або придумати власну систему, беручи за основу розміри найпопулярніших девайсів серед ваших користувачів.
Час порівняти основні відмінності:
🔸 Складність реалізації (Difficulties)
Що складніше створити: декілька макетів для різних пристроїв чи один універсальний?
Хоча гнучкий дизайн має лише один макет на всіх пристроях, він вимагає більше зусиль і часу наперед. Це передбачає додаткову увагу до CSS та організації вашого сайту, щоб забезпечити його повну функціональність на всіх розмірах екрану.
🔸 Розмітка макету (Layout)
Гнучкий дизайн (Responsive) макетів визначається безпосередньо браузером користувача.
Адаптивний (Adaptive layout) макет визначається на внутрішньому сервері, використовуючи такі фактори, як тип пристрою та операційна система, щоб надіслати правильний макет.
🔸SEO оптимізація
Google рекомендує та відзначає сайти, які використовують гнучкий (responsive) дизайн. Веб-сайт, зручний для мобільних пристроїв, займає вищу позицію на сторінках результатів пошуку. Адаптивний (Adaptive) дизайн може зіткнутися зі складнощами SEO просування.
🔸 Універсальність до змін (Flexibility)
Адаптивний дизайн вважається менш універсальним, оскільки кожен новий пристрій із специфічним розміром екрану, потребує впровадження нових макетів.
У довгостроковій перспективі гнучкий (responsive) макет вимагатиме менше обслуговування. Гнучкі сайти більш універсальні, щоб за замовчуванням добре працювати самостійно, навіть якщо на ринку з’явився новий пристрій або розмір екрану.
Переваги та недоліки
➕ Переваги Responsive design
Схожий досвід використання (незалежно від типу пристрою) настільного, мобільного тощо — відвідувачі отримають однаковий, бездоганний досвід.
Менша потреба з технічного обслуговування — гнучкий (responsive) дизайн скоротить час та зусилля, які ви витратите на оновлення свого сайту.
Більш зручний для пошукових систем — Google надає перевагу веб-сайтам, зручним для мобільних пристроїв.
Покращення ефективності сканування та індексування — пошукові системи індексують більше вмісту вашого сайту з гнучкими макетами.
➖ Недоліки Responsive design
Обмеження дизайну: розробка для різних розмірів екрану та пристроїв може вимагати компромісів і адаптації макета відповідно до різних розмірів екрану. Це може обмежити творчі можливості та можливості налаштування порівняно з розробкою спеціально для окремих типів пристроїв.
Вищі витрати на розробку та підтримку: розробка та підтримка адаптивного веб-сайту може бути дорожчою порівняно з альтернативами.
Обмежена оптимізація для певних пристроїв: респонсів дизайн має на меті забезпечити узгоджену роботу на різних пристроях, що може призвести до компромісів щодо оптимізованих макетів і взаємодії для певних розмірів екрана або типів пристроїв.
➕ Переваги Adaptive design
Оптимізація під користувача — оптимізувавши роботу окремих пристроїв, ви гарантуєте, що кожен відвідувач отримає позитивний досвід користувача.
Кращій перфоманс: розробляючи спеціально для цільових типів пристроїв, адаптивний дизайн може оптимізувати продуктивність, надаючи лише необхідні ресурси та вміст для кожного пристрою.
Спрощене обслуговування та оновлення: завдяки адаптивному дизайну оновлення та обслуговування можуть бути простішими, оскільки кожен макет розробляється та змінюється окремо.
➖ Недоліки Adaptive design
Складність розробки — адаптивний дизайн набагато більш трудомісткий через кількість технічних аспектів, які слід враховувати.
Складніше в обслуговуванні — оскільки у вас є кілька версій веб-сайту, кожну версію потрібно оновлювати окремо.
Вартість — крім того, що адаптивний веб-дизайн вимагає багато часу, потрібна велика команда розробників. А це завжди додаткові витрати на розробку, обслуговування та підтримку сайту.
Тож коли використовувати той чи інший підхід?
📐 Responsive design:
ідеально підходить для малих і середніх компаній, яким потрібно оновити свої існуючі сайти
ідеально підходить для нових підприємств, яким потрібно створити абсолютно новий сайт
рекомендується для галузей сфери послуг, оскільки вони в основному складаються з тексту та зображень
коли ваш бюджет обмежений
ви маєте простий чистий дизайн та функціональні можливості без необхідності адаптувати його до різних потреб
ви прагнете збільшити швидкість та простоту обслуговування та процес оновлення вашого веб-сайту.
📎 Adaptive design:
найкраще підходить для існуючих складних веб-сайтів, яким потрібна мобільна версія
ідеально підходить для тих, кому потрібен більший контроль над тим, як їх сайт відображається різним кластерам користувачів, а також у залежності від пристрою
у вас є певні специфічні функції або UI-елементи (наприклад, таблиці, інформаційні панелі, діаграми тощо)
адаптивний дизайн добре підходить для складних або інтерактивних веб-додатків, які вимагають тонкого керування інтерфейсом і функціями користувача
адаптивний дизайн може бути доцільним вибором, якщо націлено на обмежений діапазон пристроїв із відомими розмірами екрана та можливостями
Як ми вже побачили, остаточний вибір буде залежати від багатьох факторів. Обидва підходи мають як переваги, так і недоліки. Головне — це розуміння та планування ваших потреб, цілей та бюджету — зараз і в майбутньому.
