Мистецтво адаптивного веб-дизайну

inweb-design

Короткий підсумок

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

Ключові принципи адаптивного веб-дизайну

Ідея адаптивного веб-дизайну з'явилася завдяки Ітану Маркотту в 2010 році. Він написав статтю, де взяв три речі, які веб-дизайнери вже використовували – гнучкі макети, зображення, які могли змінювати розмір, та медіа-запити CSS – і об'єднав їх разом. Він назвав цей принцип "адаптивним веб-дизайном", і це змінило спосіб, яким ми створюємо веб-сайти.

  1. Гнучкі сітки: Використовуйте відносні одиниці, такі як відсотки, замість фіксованих пікселів для створення макетів, які автоматично адаптуються до різних розмірів екранів, забезпечуючи плавне розміщення контенту на різних пристроях.

  2. Гнучкі зображення: Реалізуйте зображення, які можуть масштабуватися, обрізатися або динамічно змінювати свій розмір, щоб відповідати різним розмірам екранів, запобігаючи переповненню та зберігаючи візуальну привабливість на різних пристроях. Це також відоме як Art Direction.

  3. Медіа-запити: Використовуйте правила CSS для зміни вигляду вашого веб-сайту на різних пристроях. Це допомагає створювати макети, які добре працюють на телефонах, планшетах та комп'ютерах, забезпечуючи хороший досвід для всіх, незалежно від того, яким пристроєм вони користуються.

Я б особисто додав до цього списку Адаптивну типографіку та Адаптивну навігацію.

"Mobile-First" підхід у веб-дизайні

Підхід "Mobile-First"

Коли адаптивний веб-дизайн вперше з'явився, дизайнери зазвичай починали з фіксованого макету для настільних комп'ютерів, а потім адаптували його для менших екранів. Однак з часом цей підхід еволюціонував. Дизайнери зрозуміли, що починати з мобільних дизайнів, а потім розширювати їх для більших екранів призводить до кращих результатів. Ця стратегія "Mobile-First" покращила дизайн, управління контентом та розробку для всіх розмірів пристроїв.

Чому починати з мобільних?

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

  • Легше масштабуватися. Дизайн для маленького екрану змушує нас зосередитися на найважливішому. Якщо ми починаємо з мобільних, ми вчимося зберігати простоту. Коли ми розширюємо дизайн для більших екранів, ми додаємо функції, але основний контент залишається чистим і сфокусованим.

  • Краща швидкість. Веб-сайт, розроблений спочатку для мобільних, зазвичай завантажується швидше, оскільки він простіший за дизайном. Швидке завантаження важливе для задоволення користувачів, особливо тих, хто користується повільнішими мережами.

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

Реалізація підходу "Mobile-First"

  1. Почніть з малого екрану. Розробіть макет для мобільного екрану (шириною близько 320 пікселів). Додайте лише найважливіший контент, який користувачам потрібен найбільше.

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

Ось простий приклад підходу з використанням CSS. Я використовую SCSS, оскільки він дозволяє вкладати медіа-запити безпосередньо в селектори, що робить код організованим і читабельним.

.container {
  /* Стилі для мобільних (за замовчуванням) */
  max-width: 60rem;
  padding: 1rem;
 
  /* Стилі для планшетів */
  @media screen and (min-width: 48rem) {
    padding: 2rem;
  }
 
  /* Стилі для настільних комп'ютерів */
  @media screen and (min-width: 64rem) {
    padding: 0;
    margin: 0 auto;
  }
}

Або альтернативно, використовуючи Tailwind CSS:

example.html
<div class="max-w-5xl px-4 md:px-8 lg:px-0 lg:mx-auto">
  <!-- Контент розміщується тут -->
</div>
  1. Прогресивне покращення. Додавайте більше функцій при збільшенні розміру екрану. Почніть з чистого і простого макету для мобільних, потім покращуйте досвід для більших екранів. Наприклад, на настільному комп'ютері ви можете додати ефекти при наведенні або більше зображень, які не так добре працюватимуть на мобільних.

Fluid та Responsive сітки

Найкращі макети у веб-дизайні є одночасно гнучкими та адаптивними

Основні відмінності між гнучкими(Fluid) та адаптивними(Responsive) сітками:

  1. Гнучкість: Fluid завжди еластичні, адаптивні змінюються у встановлених брейкпоінтах
  2. Breakpoints: Гнучким вони не потрібні, адаптивні на них покладаються
  3. Зміни макету: Гнучкі зберігають макет, адаптивні можуть повністю його змінювати
  4. Контроль: Адаптивні пропонують більше контролю над різними розмірами екранів

Коли використовувати кожен підхід:

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

Гнучкі сітки

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

Замість використання фіксованих ширин у пікселях, гнучкі сітки використовують ширини на основі відсотків. Це дозволяє макету плавно адаптуватися до різних розмірів екранів.

Ось простий приклад гнучкої сітки з використанням CSS:

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

Для створення адаптивної сітки ви можете використовувати CSS Flexbox або CSS Grid. Ці техніки дозволяють створювати більш складні макети, які адаптуються до різних розмірів екранів.

Техніки адаптивної типографіки

CSS Clamp

Спочатку давайте подивимося, як працює ця функція. Відкрийте codepen у новій вкладці і спробуйте змінити ширину вікна result:

CSS Clamp - це функція, яка встановлює значення між мінімальним і максимальним.

Є кілька причин, чому ви можете використовувати Clamp:

  • Економить час: Менше коду для написання
  • Працює на всіх розмірах екранів
  • Зберігає хороший вигляд дизайну
  • Легко налаштовувати та підтримувати

Clamp приймає три значення: Мінімальний розмір, Бажаний розмір, Максимальний розмір.

Ось приклад CSS, пов'язаний з розміром шрифту:

/* Найменший розмір шрифту - 1rem
Бажаний розмір шрифту - 1rem + 1vw
Найбільший розмір шрифту - 2rem
 */
 
font-size: clamp(1rem, 1rem + 1vw, 2rem);

Функція повертає бажане значення, якщо воно не виходить за межі діапазону min-max. Якщо нижче мінімуму, він повертає мінімум. Якщо вище максимуму, він повертає максимум.

Демонстрація інших технік

Для більш просунутих технік адаптивної типографіки перегляньте цей та інші Codepen від Mike Riethmuller

Адаптивна навігація: Створення зручних меню

Поширені типи адаптивних меню:

  1. Меню-гамбургер : Кнопка, яка показує/приховує меню на маленьких екранах.
  2. Нижня мобільна навігація: Меню внизу екрану на мобільних пристроях.
  3. Пріоритетна навігація: Показує основні пункти і приховує інші в меню "Ще".
  4. Випадаюче меню: Розгортається, щоб показати більше опцій при кліку або наведенні.

Поради для кращої навігації:

  • Використовуйте чіткі позначення
  • Обмежте кількість основних пунктів меню (5-7 - добре)
  • Зробіть цілі для дотику достатньо великими (принаймні 44x44 пікселі)
  • Забезпечте візуальний відгук (наприклад, ефекти при наведенні на настільних комп'ютерах)
  • Зберігайте послідовність на всіх сторінках

Чого слід уникати:

  • Не приховуйте важливі посилання(links)
  • Уникайте довгих випадаючих меню на мобільних пристроях
  • Не змушуйте користувачів прокручувати екран, щоб побачити все меню

Оптимізація зображень для різних розмірів екранів

Перш за все, ця тема має багато деталей та нюансів. Якщо ви хочете глибоко зануритися в адаптивні зображення та оптимізацію зображень і оволодіти цим, я б рекомендував прочитати книгу Image optimization від Addy Osmani.

Зображення, яке швидко завантажується, краще, ніж тисяча слів

Чому ми оптимізуємо зображення?

  • Це робить ваш сайт швидшим
  • Економить трафік для мобільних користувачів
  • Виглядає добре на всіх екранах
  • Допомагає з SEO

Як оптимізувати зображення?

  1. Використовуйте адаптивні зображення різного розміру: Дозвольте браузеру автоматичновибрати правильний
  2. Стискайте зображення: Зменшуйте розміри файлів
  3. Використовуйте правильні формати: JPG для фотографій, PNG для графіки, WebP для сучасних браузерів
  4. Використовуйте lazy loading: Завантажуйте зображення тільки коли вони потрібні

Базова техніка адаптивних зображень

Ось простий спосіб використання адаптивних зображень:

<!-- атрибут srcset дає браузеру вибір різних розмірів зображень -->
<!-- атрибут sizes вказує браузеру, як змінювати розмір зображення залежно від розміру екрану -->
 
<img
  src="small.jpg"
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
  sizes="(max-width: 320px) 100vw,
            (max-width: 640px) 50vw,
            33vw"
  alt="опис вашого зображення"
/>

Поради щодо оптимізації зображень

  • Використовуйте сучасні формати, такі як WebP, коли це можливо
  • Використовуйте інструменти, такі як ImageOptim, TinyPNG або Squoosh для стиснення зображень
  • Змінюйте розмір зображень перед завантаженням на сервер
  • Не забувайте про альтернативний текст(alt) для доступності

Поширені помилки, яких слід уникати

  • Не використовуйте величезні зображення для маленьких екранів
  • Не забувайте стискати зображення
  • Не покладайтеся на CSS для зміни розміру великих зображень

Арт-дирекція

Іноді вам можуть знадобитися різні зображення для різних екранів. Тут на допомогу приходить елемент <picture />.

Ось приклад:

example.html
<!-- Це показує:
Одне зображення на мобільних
Інше зображення на настільних комп'ютерах
За замовчуванням для старих браузерів -->
 
<picture>
  <source media="(max-width: 1023px)" srcset="mobile-image.jpg" />
  <source media="(min-width: 1024px)" srcset="desktop-image.jpg" />
  <img src="default-image.jpg" alt="Опис зображення" />
</picture>

Більше прикладів та деталей про техніки про Art Direction в MDN responsive images.

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

Я використовую Next.js для своїх проектів, і він має чудову підтримку адаптивних зображень з коробки, використовуючи компонент Image. Тому я можу зосередитися на дійсно важливих речах і дозволити фреймворку виконувати оптимізацію зображень.

Ключові особливості компонента Image:

  • Автоматична оптимізація: Next.js змінює розмір зображень для різних пристроїв.
  • Lazy loading: Зображення завантажуються тільки коли вони наближаються до області перегляду.
  • Запобігає зсуву макету(Layout Shift): Зберігає стабільність вашої сторінки під час завантаження зображень, що покращує користувацький досвід і також допомагає з SEO.

Ось простий приклад:

example.jsx
import Image from "next/image";
import myImage from "./my-image.jpg";
 
<Image
  src={myImage}
  // Next.js автоматично виконує оптимізацію для srcset за мене
  alt="опис вашого зображення" // або порожній рядок, якщо зображення декоративне
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 
  // Ширина і висота обов'язкові, крім статично імпортованих зображень або зображень з fill
  // width={1200}
  // height={800}
/>;

Тестування та налагодження адаптивних макетів

Якщо ви не тестуєте, то ви гадаєте. - Мудрість веб-розробника

Методи тестування адаптивних макетів

  • Інструменти розробника браузера: Використовуйте вбудовані мобільні перегляди
  • Реальні пристрої: Тестуйте на справжніх телефонах і планшетах
  • Онлайн-інструменти: Використовуйте онлайн-сервіси, такі як BrowserStack
  • Режим адаптивного дизайну: Доступний у Firefox та Safari

Прості кроки для тестування:

  • Змінюйте розмір вікна браузера
  • Перевіряйте найпоширеніші Breakpoints (наприклад, 320px, 768px, 1024px)
  • Тестуйте як в портретному(portrait), так і в ландшафтному(landscape) режимах
  • Перевіряйте сенсорні(touch) взаємодії на мобільних пристроях

Корисні функції інструментів розробника браузера:

  • Емуляція пристроїв: Імітуйте різні пристрої
  • Обмеження мережі(Network throttling): Імітуйте повільні умови мережі
  • Емуляція дотику: Тестуйте сенсорні взаємодії

Поширені проблеми, на які слід звернути увагу:

  • Елементи, що перекриваються
  • Текст, який занадто малий для читання
  • Кнопки, які важко натиснути
  • Горизонтальна прокрутка на мобільних
  • Зображення, які не вміщаються на екрані

Додаткова інформація

Статті

Книги