Що таке підхід mobile-first, чим він відрізняється від адаптивного дизайну й як спроєктувати та створити сайт від маленького екрана до великого: вміст, макет, швидкість і перевірки.
Адаптивний дизайн означає, що макет одного сайту змінюється відповідно до розміру екрана. Mobile-first — це порядок проєктування й написання коду: починають із малого екрана та додають макети для більших. Сайт mobile-first адаптивний, але адаптивний сайт, створений спершу для комп’ютера, часто має тісну й незручну мобільну версію, зроблену в останню чергу.
Google використовує індексацію з пріоритетом мобільної версії: для індексування й ранжування переважно бере вміст мобільної сторінки. Якщо на телефоні відсутні текст, заголовки, структуровані дані чи посилання, Google може їх не побачити.
Нехай рішення підказує вміст: розширюйте вікно, доки макет не стане надто розтягнутим, і саме там додавайте точку перелому. Поширені початкові значення — близько 640 px, 768 px, 1024 px і 1280 px; такі значення є в багатьох CSS-фреймворках і записуються як медіазапити min-width.
WCAG 2.2 задає мінімальний розмір цілі 24 на 24 CSS-пікселі для рівня AA і рекомендує 44 на 44 для AAA. Рекомендації Apple використовують 44 пункти, а Google Material — 48 dp. Для основних кнопок і посилань меню орієнтуйтеся приблизно на 44–48 пікселів.
Використовуйте спільний шаблон і окрему сторінку кожного закладу франшизи. На ній мають бути кнопка дзвінка, маршрут, години роботи й дія для запису чи замовлення саме в цій точці. Люди, що шукають «поруч», хочуть діяти одразу, тож пошук закладу й головна дія мають працювати одним пальцем.
Коротко: mobile-first означає, що ви спочатку проєктуєте й створюєте версію сторінки для телефона, а потім додаєте макет для планшетів і комп’ютерів у міру збільшення екрана. У коді базові стилі CSS задають мобільний вигляд, а медіазапити min-width його розширюють. Такий підхід змушує визначити найважливіше на кожній сторінці й відповідає способу, яким Google індексує сайти сьогодні.
Ці терміни часто вживають як синоніми, але вони відповідають на різні запитання.
| Адаптивний дизайн | Mobile-first дизайн | |
|---|---|---|
| Що це | Один сайт, макет якого змінюється за розміром екрана | Процес: почати з малого екрана й поступово розширювати |
| Стиль CSS | max-width (звуження комп’ютерного макета) або min-width | min-width (розширення мобільного макета) |
| Пріоритет вмісту | Часто визначається для комп’ютера й потім стискається | Визначається для найменшого екрана |
| Типовий недолік | Прихований вміст, малі кнопки, важкі сторінки | На комп’ютері макет може здаватися порожнім без додаткового опрацювання |
Обмежений екран допомагає вирішити, що справді потрібно відвідувачам. На телефоні важливі читабельний текст, пріоритетний вміст, помітна основна дія, прості форми й швидке завантаження. Якщо спочатку створити складний комп’ютерний макет, згодом його часто доводиться стискати, ховати розділи чи переробляти навігацію.
Google переважно індексує мобільну версію. Переконайтеся, що на ній є ті самі важливі тексти, заголовки, посилання й структуровані дані, що й на комп’ютерній.
Зробіть кнопки й посилання меню заввишки щонайменше 44–48 px із проміжками. Мінімум WCAG 2.2 — 24 × 24 CSS px, це нижня межа, а не ціль. Розмір основного тексту 16 px — поширений мінімум, який також запобігає збільшенню форми в iOS Safari. Для основного тексту підтримуйте контраст не менше 4.5:1 (WCAG AA).
Використовуйте метатег viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Почніть із однієї колонки, а на ширших екранах додавайте сітку:
``css .services { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } } ``
Застосовуйте гнучкий розмір шрифтів і відступів через clamp(), наприклад font-size: clamp(1.75rem, 5vw, 3rem), щоб зменшити кількість точок перелому. Flexbox і Grid з auto-fit, як-от grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)), автоматично створюють стільки колонок, скільки вміщується.
Поширені початкові точки — приблизно 640 px, 768 px, 1024 px і 1280 px. Це орієнтири, а не вимога. Змініть ширину вікна й додайте медіазапит там, де поточний макет уже не читається. Пишіть правила від меншого до більшого екрана, наприклад базові стилі, а потім @media (min-width: 768px).
WCAG 2.2 визначає ціль щонайменше 24 × 24 CSS px для рівня AA й рекомендує 44 × 44 для рівня AAA. Apple радить 44 пункти, а Google Material — 48 dp. Для головних кнопок і пунктів меню цільтеся приблизно в 44–48 пікселів, а поруч розміщуйте достатньо вільного простору. Перевірте контраст, видимий фокус клавіатури й підписи полів.
Перевірте швидкість на реальному телефоні й мобільному з’єднанні, а потім доповніть макет для планшета й комп’ютера. Перевіряйте як відвідувач: у режимі пристрою інструментів розробника для ширини 360 px, 390 px і 414 px; на справжніх Android та iPhone, адже емулятор може не показати особливості прокручування, клавіатуру поверх полів і повільний процесор. Запустіть Lighthouse у Chrome DevTools та PageSpeed Insights (за достатнього трафіку він показує реальні польові дані Chrome). Переверніть телефон горизонтально й перевірте, чи закріплені панелі не закривають половину екрана. Виконайте основну дію — запис, купівлю чи дзвінок — однією рукою на мобільному інтернеті. Після запуску перевірте мобільні проблеми в Search Console; пояснення є в нашому посібнику Google Search Console.
У We.Inc перевірте готову сторінку на телефоні й комп’ютері перед публікацією.
Mobile-first — це насамперед спосіб приймати рішення: почніть із найменшого екрана й найважливіших потреб відвідувача, а потім додавайте можливості для більшого простору. Так ви отримаєте сайт, який працює на телефоні й природно розширюється для планшетів і комп’ютерів.
Почати безкоштовно · Банківська картка не потрібна