Комбінування адаптивної верстки та шаблонів для мобільних
Стаття є перекладом відмінного, надихаючого, хоч і невеликого посту Mixing Responsive Design and Mobile Templates від одного із творців CodePen, Кріса Койєра.
Отже, ви зайняті стратегічним опрацюванням поведінки свого сайту для мобільних пристроїв. По ідеї вам треба вибрати щось одне - або адаптивний дизайн, або створення окремого сайту для мобільних. Що ж, мабуть, це не так. Можливо, вам вдасться поєднувати відразу кілька стратегій.
Щодня ми з командою розробників CodePen ударно працюємо. Але нас лише троє. Розробка нашої мобільної стратегії - просто з останніх сил доробити проект, коли 1) на це знаходиться час і 2) з'являються хороші ідеї, як з усім цим розібратися.
Приклад адаптивного шаблону
Приклад спеціального шаблону для мобільних
Тепер погляньмо на сторінку Details на настільному комп'ютері:
Це була наша найстрашніша сторінка для мобільних.
Ось тепер сторінка Details стала набагато зручнішою для сприйняття, не кажучи вже про швидкість завантаження.
Якщо цікаво, ми використовуємо браузерний гем для вибору, який шаблон запускати для рендеру на рівні контролера. По суті, це відстеження User-Agent, що не дуже добре, але принаймні це все відбувається на сервері і працює на регулярно оновлюваному open-source ПЗ.
На замітку: все, що можна зробити у десктопному браузері, можна зробити й у мобільному.
Приклад «нуууу-не-зовсім-готової» сторінки
Поки не всі шаблони CodePen достатньо адаптовані для маленьких екранів. Наприклад, сторінка Редактора – можливо, найважливіша частина всього додатка – взагалі не має ні адаптивного дизайну, ні мобільної версії.
Вона цілком нормально виглядає на iPad та інших великих планшетах, але на маленькому екрані вона виглядає далеко не ідеально. Це не та сторінка, яку ми хотіли б залишити кривобокою, так що ми залишаємо її тільки в десктопному варіанті, поки не з'явиться достатньо хорошої ідеї для вирішення цієї проблеми. Швидше за все, це буде реалізовано у вигляді окремого шаблону для мобільних.
Приклад використання фрагментів темплейтів для мобільних в адаптивному дизайні
Подивіться на сторінку профілю користувача:
Це адаптивний шаблон. По-моєму, він відмінно пророблений у всьому, крім зони вкладок, яка роз'їжджається на два рядки. Виглядає вона неважливо, та й масштабуватись нормально не буде, якщо нам доведеться додати ще кілька пунктів. Тому для навігації в Профілі ми в цьому місці замінюємо вкладки на список, що випадає.
Це вже явно краще виглядає.
Все в процесі
Я все це розповідаю зовсім не для того, щоб представити вам CodePen як світло дизайну для мобільних. Він явно поки що не тягне на цю роль. Але я впевнений, що було б цікаво замислитись над гібірдним та ітераційним підходом у дизайні веб-додатків для мобільних.
Не потрібні жодні окремі домени та URL, жодних окремих репозитаріїв та движків, не потрібно розділяти розробників на окремі команди. Просто одна ціла знатна звірюга. Правильно, я вважаю.
Хардкорна конфа за С++. Ми запрошуємо лише профі.