Горизонтальный скролл становится модным. Разберемся в этом
В последнее время все более популярным становится подход в проектировании сайтов с использованием горизонтального скролла. Нас очень беспокоит целесообразность и юзабилити данного подхода. Чтобы разобраться в этом вопросе, мы перевели статью посвященную горизонтальному скроллу. Предлагаем ознакомиться с материалом и обсудить данную тему в комментариях…
Оригинальное название публикации: “Иск против горизонтального скролла”…
Время от времени всё переосмысливается. А значит нет ничего удивительного в том, что сайты с горизонтальным расположением контента становятся модными. Это смелая и впечатляющая дизайнерская инновация, так как в настоящее время в интернете подавляющее большинством веб-сайтов используют вертикальную прокрутку.
Причина популярности подхода с вертикальной прокруткой очевидна — его проще реализовать, он привычен и чаще используется. Сайты с вертикальной прокруткой считаются также и более эффективными. Так как это мнение большинства, то использование горизонтального скроллинга становится еще более девиантным и смелым.
Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.
(http://www.guillaumejuvenet.com/)
Горизонтальные сайты — это заявление о собственной уникальности и нежелании вписываться в общественные рамки. В результате, торговая марка, использующая такую конструкцию сайта, часто зарабатывает себе репутацию «причудливой» и «ушлой».
Почему некоторые используют горизонтальный скролл
Так как прокручивание сайтов вверх-вниз стало негласным правилом, многим и в голову не придет, что может быть как-то иначе. Компьютерные мыши с колесиком прокрутки, скроллы в тачпадах на ноутбуках — еще больше укоренили эту идею. Веб-сайты, использующие горизонтальную прокрутку, явно пренебрегают нормами стандартных веб-сайтов, заявляя о своей индивидуальности.
Ставка на мобильные устройства может быть не такой удачной идеей
Основная причина этого уже была высказана выше. Люди не знают о том, что можно просматривать контент, просто прокручивая его как-то по-другому.
Поскольку экраны мобильных телефонов или планшетов и экраны десктопов считаются достаточно специфичными относительно друг друга, сходство здесь не применимо. Нельзя использовать горизонтальное пролистывание на настольном компьютере, просто потому что оно распространено на планшетах и телефонах.
Здесь за основу берется принцип того, что люди используют эти устройства с различным подходом в мышлении, и изменение принятого положения вещей может привести к некоторому недопониманию, оставив пользователей вне их зоны комфорта.
Основным же недостатком в реализации горизонтальной прокрутки является то, что пользователи предпочитают не уникальные механики просмотра контента на странице, а единообразие в веб-интерфейсах.
Продуктивное использование вертикального пространства для контентной области
В вертикальном макете, весь контент вне зависимости от степени его важности, идёт друг за другом. Ключевую информацию можно выделить только оформлением, а не позиционированием на странице. Единственное что может дизайнер — разместить ключевую информацию в начале страницы.
В отличие от популярных вертикально-ориентированных макетов, горизонтальные макеты имеют одно преимущество. Они аккуратно предоставляют лишь небольшую часть информации в области горизонтального скролла. А ключевую информацию можно закрепить в вертикальном пространстве, обратив на неё внимание пользователей не только оформлением, но и позиционированием.
Когда стоит использовать горизонтальный скроллинг, если вы это точно хотите
(http://qandhlondon.com/)
Cайты с горизонтальным расположением контента больше всего подходят для ситуаций, когда необходимо единовременно отображать несколько объектов: графических изображений, небольших информационных блоков, групп иконок или превью, ссылающиеся на более подробное описание.
Мобильные версии “десктопных” сайтов, или веб-сайты, рассчитанные на просмотр с мобильных устройств — вот сфера применения, где горизонтальный скролл полностью уместен. Однако, он также хорошо подходит и ряду других сайтов, позволяя им отображать большое количество информации простым и выгодным способом.
Проблема юзабилити
(http://movingislands.com/en)
Хотя множеству пользователей сегодня знакомо и даже привычно горизонтальное пролистывание (когда меняется всё наполнение страницы), горизонтальную прокрутку (с плавной подгрузкой контента) многие по-прежнему осуждают. Она продолжает получать отрицательные отзывы от многих пользователей, и поэтому применять ее следует с осторожностью. Ее, как правило, используют, чтобы проявить индивидуальность, например, заявить о торговой марке. Но даже при таком использовании, многим людям это непривычно.
Пользователи игнорируют блоки сайтов с горизонтальной прокруткой
Одна из основных реакций, которую вызывает горизонтальный скроллинг, заключается в игнорировании разделов с ним. Так как это провоцирует выход пользователя из его зоны комфорта.
Люди, как правило, не замечают даже явные подсказки, касающиеся навигации по веб-сайту с горизонтальной прокруткой, часто оставляя большие стрелки и другие элементы горизонтальной навигации незамеченными и нетронутыми.
(http://www.lorenzobocchi.com/)
Главным образом так происходит, потому что такая форма использования не соответствует ожидаемой схеме функционирования и в результате не является приемлемой или значимой.
Нередко сайты, где перелистываются страница полностью (аналогично бумажным книгам и журналам), вызывают у пользователей высокие ожидания, но в последствии, люди часто оказываются разочарованы предоставленным контентом. Таким образом, неплохое решение для одного (те самые бумажные книги и журналы), может оказать для другого медвежью услугу.
Как же правильно?
(http://www.themobileplaybook.com/en-us/#/overview)
Добавьте в механику горизонтального скроллинга меню, которое позволит не только перемещаться от одного раздела к следующему, но также перескакивать некоторые разделы совсем. Это принесет гибкости и воодушевит большее количество пользователей просматривать интересующие их разделы.
Горизонтальный скролл-бар также является обязательным, чтобы показывать, сколько еще осталось не просмотренного контента. Иногда это мотивирует людей прочитать немного больше, когда они уже собрались покинуть сайт.
Что следует принимать во внимание
(http://www.richard-hill.org.uk/)
Хотя отношение к использованию горизонтальной прокрутки медленно меняется с приходом новых технологий, таких как сенсорные экраны, планшеты, ПК в форм-факторе моноблоков с тачскрином и т.д., данный метод все еще не доминирует.
В аналоговых клавиатурах легче манипулировать клавишами «вверх/вниз», чем «вправо/влево». А вот на тачпаде добавление новых жестов будет более удобным при реализации горизонтального скролла.
Скорость прокрутки также должна быть оптимизирована. Слишком быстрый скроллинг может вызвать головную боль, а слишком медленный может сильно раздражать.
Несмотря на тот факт, что мы привыкли читать слева направо, медленно прокручивая страницу вниз, эта привычка сейчас меняется. С появлением электронных книг и различных приложений для смартфонов, планшетов и тачпада, люди постепенно привыкают и к перелистыванию при чтении. Однако, всегда важно принимать во внимание, то с чем пользователи могут столкнуться при внедрении новых концепций в повседневную жизнь.
В заключение
(http://www.archi-graphi.fr/)
Раз горизонтальная прокрутка пришлась кстати на мобильных устройствах с тачскринами, это не значит, что она будет столь же популярной на десктопах. Не стоит «выходить за рамки» только для того, чтобы выделиться из толпы, но пробуйте, если действительно верите в такой подход. Однако даже в этом случае не упускайте из внимания комфорт пользователей, ибо это вы зависите от них, а не наоборот.
Если вы намерены применить относительно новый метод для просмотра вашего сайта, постарайтесь не усложнить жизнь его посетителей. Вместо совершенно нового дизайна привнесите нечто знакомое и в то же время реализованное по новой концепции, чтобы пользователь смог оценить и удобство сайта, и вашу изобретательность.
Переводчик: Аня, тестировщик Mockup editor SletchBuilder
overflow-x | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.5+ | 3.0+ | 1.5+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | visible |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-box/#overflow-x |
Версии CSS
Описание
Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.
Синтаксис
overflow-x: auto | hidden | scroll | visible
Значения
- visible
- Отображается все содержание элемента, даже за пределами установленной ширины.
- hidden
- Отображается только область внутри элемента, остальное будет скрыто.
- scroll
- Всегда добавляется горизонтальная полоса прокрутки.
- auto
- В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.
Пример
HTML5CSS 2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>overflow-x</title> <style> .layer { overflow-x: scroll; /* Добавляем полосу прокрутки */ width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ white-space: nowrap; /* Запрещаем перенос строк */ } </style> </head> <body> <div> <h3>Duis te feugifacilisi</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-x
Объектная модель
[window.]document.getElementById(«elementID»).style.overflowX
реализуем горизонтальную прокрутку секции на Flexbox
В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.
Давайте разберёмся с этим более детально.
Каркас
Взгляните на эту разметку. Это простой блок section с несколькими вложенными div:
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>Стили
Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}Сперва мы явно задаём ширину и высоту корневых элементов равной 100%. Затем мы определяем цвет фона, убираем отступ у body и центрируем вложенный в него элемент.
Для наглядности применим стили к этому элементу <section>:
.card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
}С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px. Вот, что получилось на данном этапе:
Поместим все блоки card--content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:
.card {display: flex}Затем займёмся .card--content:
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px, всё остальное просто и понятно. Вот результат:
Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.
Исправим это так:
.card {
overflow-x: auto;
}И теперь прокручивается только секция:
Неплохо!
Прячем полосу прокрутки
Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:
.card::-webkit-scrollbar {
display: none;
}Согласитесь, так страничка выглядит лучше.
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
Ваша собственная версия Instagram:
Простая доска для заметок:
Перевод статьи «How to create horizontally scrollable sections with Flexbox»
HTML: горизонтальная прокрутка без scollbar
Разделение переполнения в x и y — это только недавнее соглашение, до этого не было никакого способа отключить полосы прокрутки по отдельности. Однако у вас было несколько вариантов:
- Скройте любую полосу прокрутки, используя другой слой, вы должны были угадать размеры на OS.
- Обрежьте полосу прокрутки, используя внешний родительский элемент обертки с
overflow: hiddenилиclip:rect(). Опять же угадывание размеров, а не идеал.
Судя по всему, на самом деле вам не нужна ни одна полоса прокрутки, так что у вас есть еще несколько вариантов:
Использованияoverflow: hidden.- Используйте
<iframe />сscrolling="no".
Переполнение
В вашем случае использование `overflow: hidden` изменяет способ распространения ваших элементов по горизонтали. Чтобы обойти это, вам нужно вычислить сумму Ширин элементов, которые вы хотите показать в строке, и установить ее как ширину родительского элемента обертки.
Похоже, что скрытие переполнения на самом деле предотвращает появление свитка what-so-ever, моя память, должно быть, подводит меня в старости. Могу поклясться, что я использовал его раньше, я думаю, что я полагался на JavaScript более сильно, чем я думал.
Таким образом, вместо использования overflow: hidden вы можете использовать первый пункт, который я упоминаю, который использует overflow: auto , но вы обрезаете полосы прокрутки. Это все еще может потребовать необходимости вычисления размеров горизонтального родителя:
Значение:
[ [ 101px ] + [ 101px ] + [ 101px ] <-- wrapping parent would be 303px ]
Но включает в себя небольшую модификацию того, что я написал раньше:
CSS:
.viewport-clip {
width: 100px;
height: 100px;
overflow: hidden;
}
.viewport {
width: 100px;
height: 130px;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
}
.horizontal {
width: 303px;
height: 130px;
}
.item {
width: 100px;
float: left;
background: blue;
margin-right: 1px;
height: 100px;
}
Markup:
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
.viewport-clip используется для скрытия нежелательных полос прокрутки. Мы даем .viewport чрезмерную дополнительную высоту +30px , так что горизонтальные полосы будут убраны независимо от OS —, было бы странно OS иметь полосы прокрутки такой толщины. Это означает, что вы должны быть уверены, что придаете своему прокручиваемому контенту точную высоту, вы не можете полагаться ни на какие проценты высоты или что-то еще.
Как и прежде, вы все еще используете элемент .viewport для ограничения области просмотра, и его все еще можно прокручивать с помощью JavaScript:
document.getElementById('viewport').scrollLeft = <pixel value here>
Пользователь определенно сможет использовать любые устройства человеческого интерфейса, которые у него есть, то есть колесо мыши, сенсорное устройство; так как область-это просто обычный прокручиваемый div. Однако вы всегда должны предоставлять некоторые UI для прокрутки на тот случай, если у пользователя нет этой опции.
Плавающие фреймы
Другой подход заключается в использовании iframe, где вы используете scrolling="no" для отключения баров. Это имеет то преимущество, что вам не нужно знать размеры вашего контента, но приходится иметь дело с iframe.
<iframe src="contents-to-be-scrolled.html" scrolling="no" />
Обновление
Мои последние модификации можно найти в этом fiddle.
http://jsfiddle.net/kdRJ7/
лучшие практики — CMS Magazine
В июле 2014 года в интернете уже насчитывалось 996 миллионов сайтов. Часть из них составляет прямую конкуренцию вашему ресурсу: пытается выйти на рынок или увеличить имеющуюся долю за ваш счёт. Они пытаются привлечь тех же пользователей, что и вы. Или, что еще хуже, они пытаются откусить кусок от вашего пирога или пользовательской базы. Разумеется, точное количество конкурентов зависит от направления деятельности, целевой аудитории, масштаба компании — регионального, национального или международного — и многих других факторов.
Но после семи лет работы в SEO я могу вас заверить, что конкуренция есть на любом рынке. Да, в некоторых отраслях она выше, и они развиваются быстрее. Очевидно, что в интернете, где конкуренция предельно высока, бренды особенно жаждут выделиться. Вопрос только в том, как это сделать.
Сильный выразительный веб-дизайн — один из лучших способов обратить на себя внимание. Ведь нам нужно, чтобы сайт «зацепил» пользователей уже в первые секунды — прежде чем они заскучают и отправятся смотреть свежее видео с котиками.
Больше не нужно искать и обзванивать каждое диджитал-агентствоСоздайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →Как горизонтальный скроллинг помогает привлечь внимание
Горизонтальный скроллинг (он же горизонтальная навигация) всегда был предметом для споров веб-дизайнеров и довольно долго считался провальным ходом. Как бы то ни было, он появился ещё на заре интернета и иногда становится трендом — причём настолько мощным, что какое-то время (правда, недолго) считается самым популярным и современным решением.
Развитие сенсорных устройств и освоение пользователями свайпинга спровоцировали возвращение горизонтального скроллинга. Может быть, именно благодаря пролистывающему движению они стали привыкать к горизонтальной навигации. Хорошо продуманный сайт с горизонтальной прокруткой способен привлечь внимание пользователей, заставить их задержаться на нём подольше и запомниться. Как же этого добиться?
Один из самых известных сайтов с горизонтальным скроллингом после редизайна — MySpace Спросите себя: действительно ли мне нужен горизонтальный скроллинг?Прочитав этот вопрос в статье о лучших практиках горизонтальной прокрутки вы, должно быть, удивитесь. Тем не менее, вопрос вполне оправдан. Учитывая спорное отношение к горизонтальному скроллингу со стороны дизайнеров и UX-специалистов, стоит всерьёз задуматься о том, нет ли других способов привлечь к себе внимание. Согласно исследованию UX-гуру Якоба Нильсена, информацию, скрытую за боковыми «полями» страницы, находит только 1% пользователей. С другой стороны, правильный подход к горизонтальному скроллингу может сделать пользовательский опыт интересным. Рассмотрим несколько примеров выразительного сочетания горизонтальной прокрутки с параллакс-эффектом. В конце концов, эта статья посвящена именно тому, как, используя горизонталь, добиться отличного UX.
Правильный горизонтальный скроллинг: художник С.Л. Холлоуэй (C.L. Holloway) использует его, чтобы имитировать прогулку по картинной галерее с его работами Когда горизонтальный скроллинг — лучшее решение c точки зрения UXПо мнению Демиена Риса (Damian Rees), есть 4 случая, когда горизонтальная прокрутка делает пользовательский опыт лучше:
- На сайте много картинок (например, сайт о фотографии или сайт-портфолио)
- Сайт содержит визуальный контент крупного формата, который не воспринимается быстро (например, карта)
- Структура ресурса представляет собой несколько разделов или слайдов в приложении
- Крупный каталог товаров, где должно быть удобно просматривать различные категории
Любой веб-дизайнер знает, что всё начинается с планирования. Однако спустя некоторое время многие расслабляются и начинают перепрыгивать эту ступеньку. Сайт с горизонтальным скроллингом требует особо тщательного планирования, создания бумажных прототипов и макетов. Вы должны заранее продумать, что и как будет работать на сайте. Придётся учесть множество моментов и, поскольку большинство дизайнеров и пользователей не так часто сталкиваются с подобными решениями, планирование горизонтального сайта может показаться сложнее, чем планирование вертикального.
Горизонтальная навигацияВот то, но что чаще всего жалуются пользователи горизонтальных сайтов. Может случиться, что самая красивая навигация покажется им неудобной и заставит их уйти и найти сайт попроще.
Навигация должна быть привлекательной и понятной с первого взгляда. Всё должно выглядеть и работать так, как этого ожидают пользователи. Они не хотят кликать и перетаскивать ползунок горизонтального скроллбара. Большинство из них листает страницы с помощью мыши или стрелок на клавиатуре и забывает, что можно передвигать ползунок. Они используют скроллбар как маркер своего положения на странице. Особенно это касается молодого поколения, для которого, скорее всего, и предназначается ваш сайт.
Навигация должна быть простой и располагаться на виду. Она должна быть интуитивно понятной — чтобы пользователи могли сразу догадаться, как попасть туда, куда им надо.
Основная навигацияГоризонтальный скроллинг не отменяет главной цели любого сайта — донести информацию до пользователей. Поэтому принципы хорошей навигации здесь так же актуальны. Убедитесь, что с помошью простого и всегда заметного меню посетители легко доберутся до нужной страницы, особенно до главной. Так они смогут полюбоваться уникальным дизайном, а затем узнать о вашей компании и продуктах, которые вы предлагаете.
Сайт фотографа Алекса Фуэраса (Alex Fueras Photography) — отличный пример простой основной навигации в боковом меню и футере, которая обеспечивает быстрый доступ ко всем страницам. Используйте подсказкиВажно понимать, что горизонтальные сайты не настолько интуитивно понятны пользователям, как вертикальные, которые они видят каждый день по многу раз. У них могут возникнуть трудности с пониманием того, как работает тот или иной элемент. Ипользуйте подсказки. Даже если вам всё кажется предельно ясно, пользователи могут воспринимать это иначе, и случайному кликанью по элементу они наверняка предпочтут подсказку.
Кому понравится чувствовать растерянность и гадать, как же работает эта штука, когда можно просто прочитать немного текста? Я готов повторять это снова и снова: если посетители не сумеют разобраться во всём достаточно быстро, они просто уйдут.
Чтобы показать пользователям, что сайт скроллится горизонтально, HereDesign использует простые стрелки. Не пренебрегайте контентомПри работе над горизонтальным сайтом дизайн нередко превращается в самоцель. Чаще всего такая угроза существует на трендовых сайтах, богатых визуальным контентом. Не стоит забывать о настоящей цели сайта, которая только в очень редких случаях звучит как «чтобы пользователи просто смотрели все эти крутые картинки». Убедитесь, что на сайте присутствует информация о бизнесе, продуктах и услугах, контактная информация, формы заказа и т.д.
Помните: горизонтальная ориентация сайта не делает его контент менее значимым, чем контент вертикальных сайтов. Если вы хотите, чтобы пользователи снова и снова возвращались на ресурс, позаботьтесь окачестве контента.
Один из лучших горизонтальных сайтов, которые я когда-либо видел. Своевременные подсказки и простая навигация помогают организовать уйму контента так, что вам хочется посмотреть буквально каждую страницу. Программирование
Кажется, здесь всё просто, но это не так. Сложность программирования горизонтального сайта легко недооценить, поэтому я хочу обратить на это особое внимание. Веб-программирование заточено под вертикальные сайты — как самые привычные, удобные и привлекательные на взгляд большинства людей. Поэтому написать горизонтальный сайт может оказаться сложнее, чем вы думали. Возможно, вы не знаете с чего начать?
Здесь существует несколько подходов.Вот отличный урок, из которого вы узнаете, как создать отличный и функциональный сайт с помощью базовых элементов HTML и CSS. Это только один способ, кроме него существуют и другие.
Последнее предупреждение (Да, ещё одно!)Горизонтальный сайт может привлечь внимание пользователей и заставить их побродить по нему подольше, но когда дойдёт до дела, они захотят быстро получить то, что им нужно и так же быстро уйти. Если вы попытаетесь удержать их, сделав сайт похожим на лабиринт, они просто закроют страницу. Помните, пользователям намного проще пролистывать сайт вертикально, при помощи колёсика мыши.
Горизонтальный скроллинг требует от пользователей больших усилий: надо наводить курсор мыши на определённые объекты, перетаскивать ползунок зажатой кнопкой мыши или постоянно нажимать на неё. Кроме того, иногда горизонтальная прокрутка происходит рывками, и это тоже плохо сказывается на пользовательском опыте. Наконец, помните, что посетители сайта привыкли не только пролистывать, но и просматривать страницы по вертикали. Горизонтальная прокрутка — неудачное решение для страниц, где много текста.
Если вы по-прежнему уверены, что на вашем сайте горизонтальный скроллинг придётся очень кстати — вперёд! Гавное — всегда думайте о пользователях. Сайт должен быть не просто красивым, но и удобным — чтобы люди могли быстро найти нужную им информацию и захотели приходить за ней снова и снова.
Скроллинги бывают разные. Мало придумать отличную идею, важно еще ее эффектно воплотить в жизнь.
Ищете команду, способную не только выдавать высококлассный креатив, но и качественно его реализовывать? Обязательно воспользуйтесь рейтингом креативности веб-студий.
Во-первых, он независимый и объективный.
Во-вторых, вы сможете сразу изучить карточки или сайты его участников.
В-третьих, помимо общего зачета, в рейтинге креативности разработчиков сайтов было сформировано несколько подрейтингов относительно количества побед в каждом из 6 конкурсов: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards, а также FWA.
Оригинал: http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/
Таблица с горизонтальной прокруткой
Уменьшайте ширину окна, чтобы увидеть результат.
Цена восстановления и заправки картриджей SAMSUNG
| Тип | Наименование | Восст. | Запр. |
|---|---|---|---|
| MLTD108S | Samsung №MLTD108S ML-1640/1641/1645/2240/2241 (MLTD108S) | 1100 | 700 |
| MLTD109S | Samsung №MLTD109S SCX-4300 прошитый (MLTD109S) | 800 | 350 |
| MLTD111S | Samsung №MLTD111S M2020/М2022/М2070 (MLTD111S) | 700 | 300 |
Исходный код этого примера:
<style>
.table-box {
max-width: 1024px;
}
.table-box p {
font-size: larger;
font-weight: bold;
}
table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
thead {
border: 1px solid #ccc;
}
th, td {
border-left: 1px solid #ccc;
white-space: nowrap;
padding: 5px;
}
td:nth-last-child(-n+2) {
text-align: right;
}
@media screen and (max-width: 640px) {
.table-box {
overflow-x: scroll;
}
}
</style>
<div>
<p>Цена восстановления и заправки картриджей SAMSUNG</p>
<table>
<thead>
<tr>
<th>Тип</th>
<th>Наименование</th>
<th>Восст.</th>
<th>Запр.</th>
</tr>
</thead>
<tbody>
<tr>
<td>MLTD108S</td>
<td>Samsung №MLTD108S ML-1640/1641/1645/2240/2241 (MLTD108S)</td>
<td>1100</td>
<td>700</td>
</tr>
<tr>
<td>MLTD109S</td>
<td>Samsung №MLTD109S SCX-4300 прошитый (MLTD109S)</td>
<td>800</td>
<td>350</td>
</tr>
<tr>
<td>MLTD111S</td>
<td>Samsung №MLTD111S M2020/М2022/М2070 (MLTD111S)</td>
<td>700</td>
<td>300</td>
</tr>
</tbody>
</table>
</div>
Прокрутка по горизонтали на мобильном телефоне
I have a div with 100% width containing a table. Table width depending on cell width and must be greater than div width.
<div>
<table>
<tr><td></td><td></td></tr>
</table>
</div>
For example the width of row could be 300px (because of 100%), and the fixed width of a td could be 200px.
In this case I need the full table scroll horizontally inside div area.
Writing this
.row {
overflow-x: scroll;
}
make all work on pc (scrolling with touchpad horizontally). But when i make access from a mobile browser is not possible to scroll.
I’ve also tried -webkit-overflow-scrolling: touch but seems to be not recognized by browsers (both chrome and opera).
Any idea on how to solve?
Also I put below some head informations that can be usefull for solving
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
Thanks in advance
У меня есть div со 100% шириной, содержащей таблицу. Ширина таблицы зависит от ширины ячейки и должна быть больше ширины div.
<div>
<table>
<tr><td></td><td></td></tr>
</table>
</div>
Например, ширина строки может быть 300px (из-за 100%), и фиксированной ширины тд может быть 200px.
В этом случае мне нужна полная таблица прокрутки по горизонтали внутри области div.
написания этой
.row {
overflow-x: scroll;
}
загаданного все работы на компьютере (прокрутка с сенсорной панелью по горизонтали). Но когда я делаю доступ из мобильного браузера, прокручивание невозможно.
Я также пробовал -webkit-overflow-scrolling: touch, но, похоже, не распознается браузерами (как хром, так и опера).
Любая идея о том, как ее решить?
Также я ставлю ниже некоторую информацию головы, которая может быть полезна для решения
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
Заранее спасибо
html css mobile touch horizontal-scrolling1,990
Горизонтальная прокрутка в веб-дизайне: стоит ли ее использовать?
Когда вы думаете о «прокрутке» веб-сайтов и приложений, в первую очередь, вероятно, приходит на ум одно направление: вниз.
В этом есть смысл — практически каждая веб-страница структурирует свое содержимое по вертикали. Чтобы увидеть больше, просто прокрутите вниз с помощью мыши, трекпада или клавиатуры. Некоторые веб-сайты могут попытаться улучшить взаимодействие с пользователем с помощью анимированных всплывающих элементов или эффектов параллакса. Даже в этом случае ориентация прокрутки почти всегда остается вертикальной.Вертикальная прокрутка работает нормально … но как насчет ее аналога по оси X, горизонтальной прокрутки ? Вы могли подумать о добавлении этой более редкой функции на свой сайт. Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше вертикальной прокрутки? И как это может обогатить ваш UX?
В этом посте я отвечу на все эти вопросы, а затем покажу вам, как создать базовую горизонтальную прокрутку с помощью пользовательского HTML и CSS, если вы считаете, что это хорошо подходит для вашего сайта.
Что такое горизонтальная прокрутка?
Горизонтальная прокрутка — это метод навигации по страницам, при котором пользователь прокручивает влево и вправо, чтобы открыть содержимое по бокам окна или контейнера. Горизонтальную прокрутку можно выполнить, щелкнув и перетащив горизонтальную полосу прокрутки, проведя вбок на сенсорной панели настольного компьютера или мыши трекпада, нажав клавиши со стрелками влево и вправо или проведя пальцем в сторону на сенсорном экране.
В то время как вертикальная навигация является основой подавляющего большинства веб-сайтов, мы видим горизонтальную гораздо реже.Это связано с тем, что горизонтальная прокрутка широко рассматривается как неэффективный и устаревший метод пользовательского интерфейса, практически не имеющий практического применения.
Это может показаться немного резким, поэтому давайте расширим его и обсудим, почему вы, вероятно, не слишком часто прокручиваете в сторону.
Недостатки горизонтальной прокрутки
Мнения о горизонтальной прокрутке искажаются как среди веб-дизайнеров, так и среди веб-пользователей. Даже я сам не очень этим увлекаюсь по нескольким причинам:
Это противоречит ожиданиям пользователей.
Вертикальная прокрутка — это норма навигации. За исключением редких стилистических украшений, каждая веб-страница структурирует свое содержимое по вертикали. Поэтому, естественно, пользователи будут ожидать прокрутки таким образом, а не слева направо.
Это нормально — время от времени нарушать правила дизайна, чтобы добавить визуального чутья и изюминки. Но игнорирование этой конкретной конвенции без четкой цели смутит и расстроит посетителей больше, чем увлечет. И многие просто подумают, что ваша страница / элемент страницы сломан.
А как насчет сенсорных экранов? В то время как появление интеллектуальных мобильных технологий нормализовало жесты бокового смахивания (глядя на вас, Tinder), пользователи, естественно, будут прокручивать мобильный веб-сайт вниз без подсказки. Поэтому обычно лучше использовать вертикальную прокрутку как на настольных, так и на мобильных сайтах.
Обладает высокой стоимостью взаимодействия.
С точки зрения UX, стоимость взаимодействия — это количество усилий, которые требуется пользователю для выполнения действия, такого как взаимодействие с элементом страницы.Стоимость взаимодействия состоит из (1) того, насколько усердно мы должны думать о задаче и (2) физических усилий, необходимых для выполнения задачи.
Вертикальная прокрутка имеет низкую стоимость взаимодействия. Опять же, мы этого ожидаем, поэтому нам не нужно думать, чтобы это сделать. Кроме того, с точки зрения эргономики можно выполнять вертикальную прокрутку с помощью колеса мыши, трекпада или клавиш со стрелками.
Горизонтальная прокрутка, напротив, имеет гораздо более высокую стоимость взаимодействия.
Мысленно мы должны приспособиться к новой ориентации прокрутки и обрабатывать ввод контента с нового направления экрана.Мы не привыкли к дополнительной когнитивной нагрузке, и это негативно сказывается на наших впечатлениях от просмотра. Пользователи, которым нужна горизонтальная полоса прокрутки, также должны найти этот элемент, что требует дополнительной работы.
Горизонтальная прокрутка также более требовательна к пользователям. Пользователи трекпада и мобильных устройств могут проводить пальцем в сторону, чтобы открыть контент, но это невозможно для пользователей настольных компьютеров, оснащенных стандартной мышью. Эти пользователи должны либо перейти к клавишам со стрелками, либо щелкнуть и перетащить полосу прокрутки.
Его легко упустить или проигнорировать.
Эта проблема возникает из-за отсутствия ожиданий — если пользователи не знают, что на веб-странице появляется горизонтальная навигация, они не будут ее искать, упуская из виду потенциально релевантный контент.
Четкие визуальные подсказки для горизонтальной навигации, такие как значки стрелок или информационный текст, могут частично решить эту проблему. Но есть вероятность, что пользователи его упустят. Если они действительно замечают реплики, им все равно может быть непонятно, что на самом деле представляет собой скрытый контент.В этом сценарии большинство просто не будет беспокоиться о взаимодействии с контентом за пределами области просмотра.
Это создает проблемы для доступности.
Дополнительный размер прокрутки усложняет простую вертикальную прокрутку, особенно когда оба используются одновременно. Элемент страницы с горизонтальной и вертикальной прокруткой может дезориентировать, и его трудно использовать людям с двигательными нарушениями.
Для людей с физическими ограничениями, умственными ограничениями или просто меньшим опытом работы с технологиями горизонтальная прокрутка часто является ненужным препятствием, которого можно избежать с помощью лучшего дизайна.
Когда работает горизонтальная прокрутка
Учитывая проблемы с горизонтальной прокруткой, вы можете задаться вопросом, будет ли когда-нибудь такая функция полезной.
Но пока не исключаю этого. Есть несколько случаев, когда горизонтальная прокрутка может быть эффективной, если ее реализовать осторожно и точно. Теперь рассмотрим его наиболее распространенное использование:
Чтобы скрыть вторичное содержимое
На любом веб-сайте вы хотите свести к минимуму количество прокруток, которые пользователи должны выполнять, чтобы достичь желаемого контента.Здесь может пригодиться горизонтальная прокрутка: вы можете сэкономить вертикальное пространство страницы, разместив специальный элемент, который показывает связанный контент из горизонтальной прокрутки.
Большинство реализаций этого метода четко указывают на функцию прокрутки и предлагают альтернативный метод навигации, такой как нажатие кнопки, для отображения большего количества содержимого. Например, пользователи могут горизонтально прокручивать галерею изображений или ссылки на миниатюры на сообщения в блогах или новостные статьи.
Для отображения предложений по категориям
Кстати, контейнеры с горизонтальной прокруткой полезны для сегментирования контента по категориям.Пользователи прокручивают по вертикали, чтобы найти интересующую их категорию, а затем вбок, чтобы найти конкретный продукт, видео, статью или другой тип элемента в этой категории.
сайтов электронной торговли используют этот метод для разделения своего каталога на типы товаров. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:
Источник изображения
Также обратите внимание, что в этом примере предлагается альтернатива прокрутки — кнопки со стрелками.
Для навигации по большому изображению или визуальному элементу
Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите уместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, — все это представляет собой проблему дизайна. Чтобы помочь пользователям ориентироваться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.
Однако обратите внимание, что в настоящее время метод перетаскивания более распространен, чем двойная вертикальная и горизонтальная прокрутка.Пользовательское тестирование полезно для определения того, какой подход лучше всего подходит для вашего конкретного экземпляра. В любом случае, эти большие визуальные элементы должны быть доступны для навигации с помощью клавиатуры.
Рекомендации по горизонтальной навигации
- Избегайте горизонтальной прокрутки на полных веб-страницах.
- Включить другие методы взаимодействия.
- Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
- Сделайте горизонтальную прокрутку визуально заметной.
Итак, вы думаете, что горизонтальная навигация имеет место на вашем веб-сайте? Вот несколько рекомендаций, о которых следует помнить:
1. Избегайте горизонтальной прокрутки на полных веб-страницах.
Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на всей веб-странице. Нарушение этого правила оттолкнет большинство пользователей.
Если вы хотите, чтобы разные разделы вашей главной страницы переходили по горизонтали, рассмотрите возможность запуска горизонтальной анимации с вертикальной прокруткой, как показано на этом впечатляющем веб-сайте дизайнерского агентства:
Источник изображения
В этом примере пользователь выполняет прокрутку вниз.Поначалу появление СМИ справа неожиданно, но вы быстро улавливаете, что происходит.
2. Включите другие методы взаимодействия.
Даже если на вашей странице отображается горизонтальная прокрутка, мы рекомендуем предоставить пользователям настольных компьютеров еще один способ раскрытия скрытого содержимого. Кнопка со стрелкой может иметь ту же функцию:
Источник изображения
Мобильные пользователи будут испытывать меньше проблем с боковым смахиванием, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.
3. Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
На рабочем столе горизонтальные полосы прокрутки должны быть доступны в своих контейнерах. Горизонтальные полосы прокрутки должны выглядеть и функционировать так же, как их вертикальные аналоги, для единообразия дизайна. Избегайте нестандартных стилей полос прокрутки, так как они помогают и не должны отвлекать внимание
Есть несколько исключений для размещения видимых полос прокрутки. Если с обеих сторон контейнера есть кнопки, которые позволяют пользователям выполнять прокрутку, пользователи могут щелкать по ним вместо того, чтобы перетаскивать полосу прокрутки.Кроме того, не показывайте полосу прокрутки, если содержимое контейнера возвращается к началу в конце потока содержимого.
4. Сделайте горизонтальную прокрутку визуально заметной.
Обязательно минимизируйте вероятность того, что посетители пропустят ваш контент, сигнализируя о возможности горизонтальной прокрутки.
В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить свои прокручиваемые контейнеры так, чтобы при наведении курсора мыши появлялась горизонтальная полоса прокрутки.
Или попробуйте показать фрагмент скрытого содержимого в прокручиваемом контейнере.Сайты электронной коммерции, такие как Patagonia, делают это для списков продуктов — обратите внимание на миниатюры продуктов, торчащие с обеих сторон контейнера для дисплея:
Источник изображения
Наконец, можно использовать текст с инструкциями, например «Прокрутите, чтобы узнать больше». Попробуйте все эти реализации при создании прототипов и тестировании.
Как создавать контейнеры с горизонтальной прокруткой в HTML и CSS
Когда элемент HTML — скажем,
Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x . Если присвоить значение scroll свойству overflow-x элемента-контейнера, браузер скроет содержимое, переполненное по горизонтали, и сделает его доступным с помощью горизонтальной прокрутки. Чтобы это работало, необходимо указать ширину как элемента контейнера, так и дочернего элемента (элемента в контейнере).
В этом примере я создал контейнерный элемент
с установленной шириной 1000 пикселей. Поскольку ширина
превышает ширину
Вот HTML-код моего примера:
(Ваш текст находится здесь.Кроме того, вы можете размещать другие элементы в этом родительском div.