Mobile First: що в імені твоєму?

Що міг робити мобільний телефон 20 років тому? Дзвонити, відправляти і отримувати SMS, всього дві основні функції.

А що змінилося за 10 років? Користувачі могли слухати музику за допомогою плеєра, фотографувати і навіть заходити в Інтернет, точніше в його примітивну версію (WAP).

Перенесемося в наші дні. У нас вже не просто телефони, а повноцінні комп'ютери з можливостями, доступними раніше лише на стаціонарному ПК. Можна і з електронною поштою впоратись, і новини почитати на улюбленому ресурсі, і фільм подивитися, і з документами попрацювати...

Смартфони і планшетні комп'ютери все більше витісняють системні блоки та ноутбуки. Але з зручністю «мінікомп'ютера» з'являються і нові проблеми, наприклад, відносно малий екран. Якщо ж ваш телефон не схожий на ігровий системний блок, то сайти з мобільного будуть завантажуватися набагато повільніше, ніж хотілося. А якщо ваш доступ в інтернет йде не через публічну Wi-Fi точку доступу, а через 3G або ж LTE, значить робите зайві витрати для свого гаманця.

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

Саме тому, багато сучасних сайтів спочатку створюються тільки під роздільну здатність екранів  мобільних телефонів. Технологія «Mobile First» дозволяє створити сайт, не використовуючи початкову desktop-версію. Вона спрощує шлях створення сайту під певну аудиторію користувачів, які будуть користуватися сервісом тільки зі смартфона.

Термін «Mobile First» вперше був використаний в квітні 2009 на «Web 2.0 Expo» Марком Девісом (Marc Davis), що працював тоді в корпорації «Yahoo!».

Він нагадав публіці, що їх мобільний телефон давно вже перестав бути просто «дзвонилкою», і перетворився на потужний мультимедійний пристрій. І цю потужність треба правильно використовувати. Те, що є правильним і зрозумілим на екрані монітора, не обов'язково має бути істиною в абсолюті для меншого дисплея. Йому потрібен абсолютно інший підхід.

Таким чином, базуючись на специфіці мобільних пристроїв, ми розробляємо вже другорядне для «старших» — ноутбуків і ПК.

У центрі уваги — сам користувач, і його зручність при роботі з сайтом. Ніяких більше зайвих ефектів — все повинно бути максимально компактно і логічно. Адже ми маємо справу далеко не завжди навіть з 5 дюймами! Можливі й 4 і навіть 3.6 дюймів. У таких крихітних габаритах майже нереально розмістити красивий, функціональний слайдер. Картинки на ньому будуть занадто маленькі. А його завантаження може бути досить проблемною задачею для не особливо потужного пристрою.

У 2015 році Google запустив новий алгоритм мобільної видачі «Mobilegeddon». В результаті цього, на перші позиції при пошуку потрапляли сторінки з мобільним дизайном. І тільки потім йшли звичайні сайти. Справедливості заради, оновлення зачіпало лише мобільну частину пристроїв. На комп'ютерах все залишилося без змін. На захист «корпорації добра» стає факт: на скільки, згідно з графіком, збільшилася кількість користувачів мобільних пристроїв:

Пропонуємо трохи більш детально розглянути принципи, згідно з якими працює Mobile First.

Спочатку поглянемо на звичний всім підхід Desktop-First. Він являє собою підхід виробництва «від складного до простого»:

У Mobile First все навпаки:

Здавалося б  — все те ж саме, різниці ніякої. Просто елементи на ілюстрації йдуть у зворотному порядку. Але підходи до розробки абсолютно різні.
Плюс дизайну Mobile first полягає в тому, що він не конкурує з адаптивним. Річ у тому, що адаптив спочатку передбачає перегляд на великому екрані. Потім, якщо вхід здійснюється з мобільного пристрою, частина контенту ховається.
Верстка такого продукту викликає додаткові ускладнення через необхідність доступності прихованого контенту, доведеться застосовувати ajax запити, наприклад, дотримуватися реалізації LazyLoad для підключення картинок.

Процес верстки нічим не відрізняється. Єдина відмінність в тому, що ми спочатку створюємо мобільну версію.

Для адаптації найкраще застосувати медіа-запити:

Також, в залежності від проекту, нам можуть стати в пригоді і такі варіанти:

Не варто забувати про підтримку в різних браузерах.

Якщо як значення елемента «width» в метатегу «viewport» вказується «device-width», це значення оновлюється в разі, якщо користувач змінює орієнтацію екрану смартфона або планшета.

Також може стати в пригодіі JavaScript бібліотека для визначення пристрою. Їх досить багато. Можете використовувати, наприклад, device.js.

Що стосується поділу стилів в різні файли, то це одне із суперечливих питань. Можливий такий спосіб:

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

Цього треба уникати, оскільки при збільшенні екрану потрібно збільшувати кількість контенту, а не розтягувати його. Завжди пам'ятайте про принцип верстки по контенту, а не по ширині пристрою.

В кінці нашої статті, хочемо нагадати, що ви можете поставити нам питання в наших групах в соц.мережах. Постараємося відповісти кожному.

Всім іншим бажаємо чистого коду і красивого дизайну :)