Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Кейс: адаптивний веб-дизайн

Адаптивний дизайн веб-сторінок – це дизайн, при якому сайт відображається зручно та функціонально на пристроях з різним розміром екрану. Адаптивні сторінки динамічно підлаштовуються під розміри вікна браузера та добре читаються без збільшення (приближення), горизонтального перегортання та інших маніпуляцій на екрані смартфона.

Ще трохи теорії

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

На сьогоднішній день для того, щоб веб-сайт був зручним для різних 
дозволів
дисплеїв вже не потрібно створювати окремі версії сайту для окремих видів пристроїв. Один сайт може працювати на смартфоні, планшеті, ноутбуці та ПК.

Є інший підхід: під час використання мобільного телефону показувати користувачеві пропозицію перейти на мобільну версію або переводити її автоматично. З таким підходом ви напевно стикалися:

Banner

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

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

Адаптивний веб-дизайн на прикладі: «шапка» сайту

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

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

Десктоп (широкий екран)

Як базовий візьмемо стандартну роздільну здатність для персональних комп’ютерів – 1920 пікселів завширшки:

Ноутбук

Стандартна роздільна здатність для екранів ноутбуків – 1280 пікселів завширшки. Як бачимо всі елементи залишилися дома, змінився лише простір між елементами. Сторінка стала трохи компактнішою без шкоди для читабельності, при цьому розташування основних елементів все те ж.

Планшет

Далі розглянемо роздільну здатність для планшета – 991 піксель завширшки. Така ширина зажадала від нас зробити деякі зміни в «шапці» сайту. А саме: приховано слово «Приєднуйтесь» у блоці соцмереж, а основні елементи розташовані у 2 рівні. Усі кнопки, написи та зображення не заважають одна одній, а функціональність збереглася на 100%.

Смартфон (480 пикс.)

Наступною роздільною здатністю буде мобільна роздільна здатність – 476 пікселів. Тут зміни вже помітніші:
  • прибрано підписи до кнопок у верхній панелі (виводяться інтуїтивно зрозумілі іконки);
  • перенесена кнопка пошуку;
  • меню не виводиться за замовчуванням, а розгортається на кліку на спеціальну кнопку (так званий «гамбургер»);
  • інше, більш компактне відображення іконок товарів на головній сторінці.

Смартфон (320 пикс.)

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

Резюме

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

Бажаєте обговорити проект?

Залишіть ваш номер телефону і наш менеджер зв'яжеться з вами найближчим часом

Над кейсом работали