Поєднуємо адаптивний дизайн і мобільні шаблони

12

Від автора: вашого сайту потрібен мобільний вид. Вам доведеться вибирати: адаптивний дизайн або спеціальний мобільний сайт, вірно? Може, і немає. Може бути, вдасться поєднувати і доповнити одну версію інший?

Кожен день я і наша команда працюємо над CodePen. Але нас троє. Наша мобільна стратегія полягає в тому, щоб зменшити все якомога краще, так як у нас 1) є час і 2) відмінне уявлення про те, як впоратися з цим завданням.

Приклад адаптивного шаблону

Візьмемо сторінку Recent Activity. Вона настільки проста, що найкраще рішення – написати пару медиазапросов для перетасовки елементів і трохи JavaScript’а для перемикання фільтрів:

Поєднуємо адаптивний дизайн і мобільні шаблони

Приклад спеціального мобільного шаблону

Тепер подивіться нашу сторінку Details на настільному комп’ютері:

Поєднуємо адаптивний дизайн і мобільні шаблони

Ця сторінка набагато складніше. Вона розділяє розмітку вигляду сторінки, як візуальний редактор. Область попереднього перегляду можна вибрати і потягти, щоб зробити її більше або менше. Тут є і команди з клавіатури. Залишати її в розмірі десктопа незручно, так як текст мікроскопічний. Після застосування потрібних метатэгов і завантаження в мобільному розмірі вийшла дуже незграбна розмітка і прокручування там, де вони взагалі були можливі.

З усього сайту цей мобільний вид був найжахливішим.

Поєднуємо адаптивний дизайн і мобільні шаблони

За підтримки CSS я міг би оголосити цього виду війну і привів би його в порядок. Але якщо так зробити, при цьому завантажується досить багато JavaScript’а, що не має більше ніякого сенсу. Замість цього я вирішив обрати спеціальний мобільний шаблон. Таким чином, мені вдалося взяти HTML, CSS і JavaScript під повний контроль і завантажити тільки необхідне. Я зміг багаторазово застосувати майже всі, так як добився всього, підійшовши з перспективи модулів. Я зміг підібрати HTML-складові, модулі JS і скомпонувати новий файл CSS з тих фрагментів, які були потрібні – написавши «з нуля» дуже небагато.

Тепер вигляд сторінки Details став набагато зручніше, не кажучи вже про швидкість.

Поєднуємо адаптивний дизайн і мобільні шаблони

Для тих, кому цікаво, ми застосовуємо browser gem і вибираємо шаблон для формування зображення на рівні регулятора. Це – аналізатор користувальницького агента, не ідеальний, але, принаймні, на серверній стороні, і заснований на проекті з відкритим вихідним кодом, весь час усовершенствующемся.

if browser.mobile?
render :template => ‘details/mobile’, :layout => «mobile-pages»
else
render :template => ‘details/index’, :layout => «pages»
end

Також запам’ятайте, що не існує нічого, чого не можна зробити в мобільній версії, але можна на десктопі.

Приклад вигляду сторінки Uhm-Not-Quite-Ready

Поки ще не всі види сторінок CodePen відмінно виглядають на маленькому екрані. Сторінка Editor – мабуть, найважливіша в додатку – не користується ні адаптивним дизайном, ні мобільним шаблоном.

Поєднуємо адаптивний дизайн і мобільні шаблони

Вона досить добре працює на ipad е і великих «таблетках», але на маленьких екранах виглядає неідеально. Цей вид не можна залишити непродуманим. Кинути розробку дизайну на розмірах десктопа можна, поки не з’явиться хороша ідея, і ми зможемо за нього взятися. Найімовірніше, це буде спеціальний мобільний шаблон.

Приклад спеціальних мобільних компонентів в адаптивному шаблоні

Подивіться вигляд сторінки Profile:

Поєднуємо адаптивний дизайн і мобільні шаблони

Це – адаптивний шаблон. Я вважаю, що він відмінно працює, за винятком області «закладок», де розбивається на два рядки. Це незручно і не буде масштабуватися, коли ми станемо потенційно додавати додаткову навігацію. Замість того, виключно в це місце ми подаємо іншу складову, яка замість закладок виводить навігацію меню select.

Поєднуємо адаптивний дизайн і мобільні шаблони

У будь-якому випадку вже краще.

Це процес

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

Не потрібно ніяких окремих доменів/url’ов, ніяких окремих сховищ/баз вихідних кодів, ніяких окремих команд розробників. Всі разом, як один величезний монстр. Як, думаю, і повинно бути.

Пов’язано:

RESS: Адаптивний дизайн + Компоненти серверної сторони