Сайты с горизонтальной прокруткой Часть 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: Хоть мы и устанавливаем горизонтальный скролл колесиком, все же скрывать скроллбар не стоит, ведь вроде в вертикальных сайтах скроллбар с первого мгновения показывает имеет ли страница глубину и стоит ли продолжать скролить дальше, интуитивная и полезная деталь интерфейса так что воспользуемся этим.

  • Стоит также заранее продумывать масштабирования проекта, а именно добавление новых разделов и выбирать соответствующие реализации. Некоторые техники работают на фиксированной ширине страницы, заметьте это.

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


Поделиться в соцсетях

Понравился пост? — расскажите о нём своим друзьям