Стратегія Mobile First

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

Основні принципи стратегії "Mobile First":

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

2. Оптимізація для швидкості та продуктивності: Мобільні пристрої мають обмежені ресурси, тому потрібно ретельно вибирати зображення, скрипти та інші ресурси для оптимізації завантаження сторінок.

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

4. Прогресивне вдосконалення: Поступове додавання більш складної функціональності для більших екранів та потужніших пристроїв. Це дозволяє оптимізувати взаємодію користувачів з сайтом на різних пристроях.

5. Зосередженість на користувачі: Зосередженість на користувачах та їхніх потребах, врахування їхніх можливостей та обмежень на мобільних пристроях.

Переваги стратегії "Mobile First":

1. Один веб-сайт. Для всіх пристроїв створюється тільки один проєкт, який адаптується під різні ширини екранів. Такий підхід скорочує необхідну кількість розробників.

2. Зручність інтерфейсу. Користувачі отримають важливий зміст сторінки (особливо на мобільних пристроях).

3. Швидкість завантаження. Сторінка завантажуватиметься швидше на мобільних пристроях. Переважно на мобільній версії верстки кількість ресурсів буде меншою.

4. Рейтинг в пошуку. Пошуковики віддають перевагу сайтам, які оптимізовані для мобільних пристроїв, і швидше завантажують сторінки.

Mobile-first CSS

Ідея реалізації Mobile First:

1. Стилі для мобільних пристроїв - це базові стилі за межами медіа-запитів.

2. Для кожної нової точки перелому додається медіа-запит в якому перевизначаються необхідні базові стилі або стилі з попереднього медіа-запиту. Також можуть додаватися нові стилі.

3. В медіа-запитах переважно використовують медіа-функцію min-width.

.element {
  /* Базові стилі, зокрема для телефона */
  
 @media screen and (min-width: ширина-планшета) { 
    /* Стилі для планшета */
  } 
 
  @media screen and (min-width: ширина-десктопа) { 
    /* Стилі для десктопа */ 
  }      
}

або

.element {
  /* Базові стилі, зокрема для телефона */
}

@media screen and (min-width: ширина-планшета) {
  .element {
    /* Стилі для планшета */
  }
}

@media screen and (min-width: ширина-десктопа) {
  .element {
    /* Стилі для десктопа */
  }
}

Ідея такого підходу, що спочатку створюється легка версія стилів для мобільного телефону. Потім по наростанню точок перелому перевизначаються стилі всередині відповідних медіа-запитів. При цьому HTML-розмітка не змінюється (окрім деяких рідкісних випадків).

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

Наприклад є три точки перелому: 768px, 1024px і 1280px. В CSS буде прописуватись для кожної точки новий медіа-запит.

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

.container{
  padding: 10px;
  width: 100%;
  
  @media (min-width: 768px) {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  } 
}

Ширина самих блоків на різних ширинах також окремо розраховується в медіа запиті в залежності від того скільки елементів у стовпчик ми хочемо розмістити.

.box {
  width: 100%;
  
 @media (min-width: 768px) {
  width: calc((100% - 10px)/2);
  }  
  
  @media (min-width: 1024px) {
  width: calc((100% - 20px)/3);
  } 
  
  @media (min-width: 1280px) {
  width: calc((100% - 50px)/6);
  }  
}

Щоб побачити цей ефект в дії відкрийте приклад CodePen в окремому вікні натиснувши Edit on Codepen і міняйте ширину вікна. На 768px, 1024px та 1280px ви побачите зміну верстки елементів.

Переваги такого підходу у визначенні стилів:

• Чистий базовий CSS-код.

• Використання стандартного потоку документу для позиціювання у базовому CSS-коді.

• Наслідування стилів від базового стилю і до попередніх медіа-запитів.

• Легке і мінімальне перевизначення стилів позиціювання.

Медіа-функція max-width

У переважній більшості випадків для перевизначення стилів достатньо медіа-функції min-width. Але бувають випадки, коли варто використовувати медіа-функцію max-width. Це роблять, щоб зробити код чистішим і уникнути зайвих перевизначень стилів.

Наприклад на екранах до 767px (включно) потрібно додати скруглення кутів, а на екранах від 768px до 1023px (включно) потрібно додати рамку.

Розглянемо варіант скруглення кутів. Якщо використовувати медіа-функцію min-width, то спочатку потрібно скруглити кути, а на першому медіа-запиті скасувати скруглення кутів.

.box { 
  border-radius: 20px;
  
 @media (min-width: 768px) {
  border-radius: 0;
  } 
}

В такому разі достатньо додати скруглення кутів у медіа-запиті max-width і після його закінчення, скруглення кутів скинеться до дефолтних значень і перевизначати стиль не потрібно буде.

.box { 
  @media (max-width: 767px) {
  border-radius: 20px;
  }  
} 

Тепер розглянемо варіант з додаванням рамки. Якщо використовувати тільки медіа-функцію min-width, то на ширині вʼюпорту 768px потрібно додати рамку, а на 1024px - її прибрати.

.box {  
 @media (min-width: 768px) {
  border: 3px solid black;
  }  
  
  @media (min-width: 1024px) {
  border: none;
  }  
}

А можна прописати додавання і прибирання рамки тільки в одному медіа-запиті з використанням медіа-функції max-width.

.box {
  @media (min-width: 768px) and (max-width: 1023px) {
  border: 3px solid black;
  } 
} 

Щоб побачити цей ефект в дії відкрийте приклад CodePen в окремому вікні натиснувши Edit on Codepen і міняйте ширину вікна. На 768px та 1024px та 1280px ви побачите зміну верстки елементів.

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