Сайти з горизонтальною прокруткою Частина 1: Теорія

Розбираємось з горизонтальними сайтами, кидаємо виклик користувацькому досвіду

Вперед!

Сайти з горизонтальною прокруткою

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

Скажу відверто, це фактично одна з штуковин, яка потрапивши мені на очі викликала зацікавлення роботою веб розробника. Дуже довгий час сайти і веб додатки мною сприймались "по замовчуванню" як належне. Але з прийняттям нових специфікацій, розробники отримали дуже потужні технології з широкими можливостями. Горизонтальні сайти, діагональні сайти, лейаути а-ля глянцеві журнали, параллакс-скроллінг з анімаціями, адаптивність - все це дозволило вебу заграти новими барвами. Звісно, деякі з цих рішень не відповідають проектам з прагматичним підходом, але це авангард, реклама можливостей, експеримент чи як можна сказати виклик. Тож незвичний користувацький досвід мені імпонує і я не упускаю можливості з ним поекспериментувати.

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

горизонтальний сайт
Сайт - візитівка екскурсовода

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

І так першою працею в цьому напрямку, на яку варто звернути увагу www.thinkingforaliving.org Горизонталізм і читабельність. Тут розглянуті аспекти користувацього досвіду горизонтальних сайтів, та й сама сторінка (як і формат проекту) виконана в відповідній техніці. Якщо коротко - в дослідженні приводиться аналог з старовинними манускриптами, що читались гоиризонтально, але забезпечувалось це "мульти колонками".

Зауважу, користувач зайшовши на сторінку і традиційно скориставшись коліщатком прокрутки отримає бажане в певній мірі - прокрутить сторінку вгору-вниз. Навігація зі сторони в сторону реалізована вже клікабельними стрілками. Запам'ятаємо цей хід до нього повернемось пізніше.

Не оминемо увагою дану статтю, де шукається відповідь на питання чи горизонтальні сайти являються бестактністю по відношенню до користувацього досвіду чи просто треба виважено підійти до подібних розробок http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/ Бачимо що певних деталях стаття перегукується з попередньою.

Далі пошукаємо реалізації горизонтальної прокрутки: гадаю підійде топік з цсс трікс , адже як в статті так і в коментарях зібрано достатню кількість технік реалізації http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
Окремо, забігаючи наперед додам, що реалізувавши саму розкладку, в якій скроллбар буде лише гризонтальним, а вертикально контент буде адаптуватись, ми маємо вирішити головне завдання - прокрутку. Тут шляхи розділяються і до прикладу є декілька способів:

  • Плагін скролінгу коліщатком миші https://github.com/brandonaaron/jquery-mousewheel з вказанням напрямку прокрутки. Урок тут
  • Конвертер прокрутки з вертикальної в горизонтальну на рівні "подій миші" https://github.com/koggdal/scroll-converter Тобто повністю перетворює вертикальну прокрутку коліщатком в горизонтальну
  • А також інверт покрутки http://www.pixxelfactory.net/jInvertScroll/ що залишає вертикальний скролл, але інлайновими стилями змінює позицію контенту. Цікавий хід тим що дозволяє вирішити одну проблемку, яку саме - розглянемо згодом.
  • Листання сайту за допомогою навігації, як то стрілки: тут два варіанти, або прокрутка буде здійснюватись на певний проміжок, або цілим "екраном" накшталт мобільним пристроям. Наприклад http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ Або перший сайт з колоночним леайутом і гортанням вбік на певний проміжок.
  • Комбінований метод: горизонтальна прокрутка сторінки (посту) коліщатком, міжсторінкова навігація - стрілки. Яскравий приклад: http://stephensaucier.com/portfolio/

Отже тут ми не багато-не мало проглянули інформації по сайтам з горизонтальною прокруткою і маємо наступні висновки:

  • Горизонтальні сайти підходять більш для презентаційних цілей, як візитки, промо-сторінки, галереї, портфоліо, ніж для подачі значних інформаційних масивів. В той же час успіх таких рішень залежить від якості проробки навігації і подачі контенту.
  • Треба звернути увагу на розміщення контенту зважаючи на читабельність при горизонтальній прокрутці.
  • При створенні горизонтального сайту обов'язково має бути прокрутка коліщатком миші, стрілками клавіатури або клікабельна навігація вправо-вліво. Залишати все на відкуп скроллбару - моветон.

    UPD: Хоч ми і встановлюємо горизонтальний скролл коліщатком, все ж приховувати скроллбар не варто, адже накшталт вертикальним сайтам скроллбар с першої миті показує чи має сторінка глибину і чи варто продовжувати скролити далі, інтуітивна і корисна деталь інтерфейсу, скористаймось цим.

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

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


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям