Відмінності в дизайні мобільної та настільної версій вебсайту

Сьогодні ми розуміємо під поняттям «смартфон» пристрій з великим екраном, що сприймає дотики — сенсорний екран. Першим подібним пристроєм, що набув широкого визнання та популярності став iPhone. 

Його представили у 2007 році. І саме поява смартфонів з сенсорними екранами та якісним доступом до інтернету спричинила своєрідну революцію — як в галузі мобільних застосунків, так і в царині вебдизайну.

Звісно, до появи iPhone існували і смартфони, і мобільні версії сайтів. Але маленькі екрани смартфонів, повільний та дорогий мобільний інтернет, а також велика кількість різних мобільних браузерів призводили до того, що в більшості сайтів на початку 2000-х не було мобільної версії.

Окремо існували спеціальні сайти, розроблені саме під мобільні пристрої. Вони називались мобільними сайтами, мобільними інтернет-порталами або WAP-сайтами (не хибодрук, саме «WAP-сайти» — від назви протоколу з’єднання WAP, тобто Wireless Application Protocol). Їхній дизайн був навмисне спрощений, позбавлений складних композиційних рішень чи ілюстрацій, щоб сайт відображався максимально коректно у будь-якому мобільному браузері.

Виглядали вони так:

Поява iPhone, а згодом і смартфонів на основі операційної системи Android призвела до того, що поступово позиція мобільних вебсайтів змінювалась від маргінальної (себто такої, що є важливою для малої частини користувачів) до беззаперечно важливої. Цьому сприяє і зростання кількості мобільних користувачів (сьогодні понад 50% відвідувачів вебсайтів переглядають їх на смартфонах) і певні рішення великих компаній, таких як Google, що прямо зазначають про важливість мобільної версії.

При цьому мобільні вебсайти за композицією, механікою взаємодії та особливостями сприйняття сильно відрізняються від версій вебсайтів для комп’ютерів.

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

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

Ключові розбіжності мобільних та комп’ютерних версій

Розмір

Звісно, однією з найочевидніших відмінностей є те, що розмір екранів у комп’ютерів та смартфонів суттєво відрізняється. Смартфони — це саме мобільні пристрої, інформацію на яких ви можете переглядати де завгодно: в громадському транспорті, в кімнаті, на вулиці, в таксі, під час подорожі поїздом чи у літаку. Комп’ютери (навіть ноутбуки) використовуються здебільшого для роботи, сидячи або стоячи за столом.

Отже, відмінними є і фізичний розмір екранів смартфонів і комп’ютерів, і їхня роздільна здатність. Для прикладу, зменшена модель iPhone 12 має діагональ 5,4 дюйма (2340x1080 пікселів), а базова версія — 6,1 дюйма (2532 x 1170 пікселів).

Ноутбук MacBook Pro має діагональ 13,3 дюйма та підтримує роздільну здатність до 2560х1600 пікселів.

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

Пропорція

На додачу до розмірів екрана, відмінною є базова пропорція.

Наприклад, в екранів комп’ютерів і ноутбуків Apple базовим співвідношенням сторін є, вже багато років, пропорція 16:10.

Але в нових смартфонів iPhone 12 базове співвідношення сторін: 19.5:9.

Зауважимо, що пропорція формату завжди впливає і на пропорцію композиції, що розміщується в цьому форматі.

Базова орієнтація екрана

Орієнтація екранів комп’ютерів — горизонтальна. А в смартфонів базовою є вертикальна орієнтація.

Слід зауважити, що в комп’ютерній версії сайту немає такого поняття як «альтернативна орієнтація», а в мобільній версії — є. Адже попри те, що зазвичай користувачі передивляються сайти у вертикальній версії, для перегляду відео вони перевертають смартфон.

Відмінності в дизайн-композиції

Описані відмінності суттєво впливають на композиційні особливості сайтів:

Кількість елементів на екрані — через меншу композиційну площу екранів смартфонів на них, як правило, набагато менше об’єктів.

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

Довжину рядків — стандартний текстовий рядок на комп’ютері як правило в три-чотири рази довший.

Деталізацію елементів (зокрема іконок) — ви могли звертати увагу, що часто в мобільній версії інтерфейсів іконки виглядають менш деталізованими, ніж в комп’ютерній версії. Це пов’язано з тим, що на вужчих екранах з меншою площею ілюстрації та іконки гірше сприймаються, якщо не спростити їхній дизайн.

Можливості взаємодії

В смартфонах і комп’ютерах принципово різні засоби введення інформації. В комп’ютерах ви працюєте з мишкою (рідше — з тачпадом чи планшетом), а в смартфонах — з сенсорним екраном.

В комп’ютерній версії сайту з’являється стан наведення курсора миші та можливість використання клавіш клавіатури для деяких функцій сайту. В смартфоні ці можливості відсутні.

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

Швидкість з’єднання та вартість трафіку

Попри те, що швидкість мобільного інтернету щороку збільшується, а на горизонті вже майорить впровадження стандарту 5G, все ж слід зазначити, що за замовчуванням мобільний інтернет є повільнішим, ніж інтернет в стаціонарних комп’ютерах і в мережах Wi-Fi. Відтак, розміри растрових зображень в мобільних версіях сайтів (особливо при створенні адаптивної версії сайту) зменшують.

Навігація

У переліку відмінностей мобільних версій сайту від комп’ютерних слід виокремити базову навігацію. Хоча структура сайту може бути ідентичною, структура меню та його візуальне представлення в цих версіях буде суттєво відрізнятися.

Ось ключові розбіжності:

Меню в комп’ютерній версії сайту як правило є за замовчуванням показаним, а в мобільній версії — прихованим за іконкою, яку ще часто на жаргоні називають «бургером».

В мобільній версії не існує стану наведення, а отже і випадаючих меню ви тут не зустрінете.

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

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

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

На завершення

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

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

Спробуймо з’ясувати це в наступному матеріалі!

·
4798
·
3
·
goodsuper 75
Наступна стаття
Стратегії розробки вебсайту: «спочатку мобільні» та «спочатку комп'ютери»
995
Головна