Кейс: адаптивний веб-дизайн
Ще трохи теорії
Отже, метою адаптивного веб-дизайну є універсальність відображення вмісту веб-сайту для різних пристроїв.
Очевидно, що поява та розвиток цього напряму пов’язана з впровадженням мобільних пристроїв у наше життя.
Сучасний користувач хоче отримати інформацію тут і зараз, а не лише за екраном ПК.
Розвиток мобільних пристроїв дало величезний поштовх до розвитку адаптивного веб-дизайну та революції у сфері мобільних сайтів.
На сьогоднішній день для того, щоб веб-сайт був зручним для різних
дозволів дисплеїв вже не потрібно створювати окремі версії сайту для окремих видів пристроїв. Один сайт може працювати на смартфоні, планшеті, ноутбуці та ПК.
Є інший підхід: під час використання мобільного телефону показувати користувачеві пропозицію перейти на мобільну версію або переводити її автоматично. З таким підходом ви напевно стикалися:
Втім, на сьогоднішній день ця технологія вважається застарілою. Вона підходить для великих порталів, соціальних мереж, проте нераціональна більшість комерційних сайтів. Такий сайт не вважається адаптивним, несе у собі суттєві ризики для пошукового просування, та й не завжди зручний для користувачів.
Виходячи з усіх вищезгаданих причин, ми створюємо адаптивні сайти – зручні на всіх екранах, практичні та добре зрозумілі роботам пошукових систем.
Адаптивний веб-дизайн на прикладі: «шапка» сайту
Як ми вже згадували раніше, основним завданням адаптивного веб-дизайну є коректне та правильне відображення на різних пристроях із збереженням усіх основних функцій. Давайте реалізацію такого підходу на прикладі одного великого інтернет-магазину, з яким ми працюємо з 2017 року.
Ми протестуємо його відображення на різних дозволах – від 1920 до 320 пікселів, – і продемонструємо, як автоматично змінюється вигляд сторінок для зручного перегляду на тому чи іншому екрані.
Десктоп (широкий екран)
Як базовий візьмемо стандартну роздільну здатність для персональних комп’ютерів – 1920 пікселів завширшки:
Ноутбук
Стандартна роздільна здатність для екранів ноутбуків – 1280 пікселів завширшки. Як бачимо всі елементи залишилися дома, змінився лише простір між елементами. Сторінка стала трохи компактнішою без шкоди для читабельності, при цьому розташування основних елементів все те ж.Планшет
Смартфон (480 пикс.)
- прибрано підписи до кнопок у верхній панелі (виводяться інтуїтивно зрозумілі іконки);
- перенесена кнопка пошуку;
- меню не виводиться за замовчуванням, а розгортається на кліку на спеціальну кнопку (так званий «гамбургер»);
- інше, більш компактне відображення іконок товарів на головній сторінці.
Смартфон (320 пикс.)
Мобільна роздільна здатність шириною екрана від 320пх до 475пх. Тут немає нічого зайвого, всі значки інтуїтивно зрозумілі, кнопки великі, тексти добре читаються. Дизайн «шапки» вкрай лаконічний, але при цьому легко вміщується на один екран, не вимагає збільшення на екрані смартфона, сенс кожного елемента легко вловлюється і без написів, що пояснюють.
Комментарии