Сайт

Горизонтальный сайт: 17 потрясающих примеров сайтов с горизонтальным скроллингом

09.04.1970

Содержание

17 потрясающих примеров сайтов с горизонтальным скроллингом

Интуитивно понятная навигация — один из ключевых элементов веб-дизайна. То, как мы переходим от одного раздела сайта к другому, и как мы просматриваем контент, может сильно повлиять на наш пользовательский опыт. 

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

Макет с боковой прокруткой — привлекательный и практичный выбор, особенно для сайтов-портфолио, каталогов, карт и т. д… Открывать проекты, исследовать города и посещать онлайн-галереи гораздо интереснее благодаря горизонтальному скроллингу. Если все сделано правильно, горизонтальная прокрутка может сделать веб-сайт более привлекательным, увлекательным и запоминающимся, что прекрасно иллюстрируют веб-сайты в нашем списке. Вот несколько уникальных примеров, которые представляют собой идеальный синтез яркого контента и четкой горизонтальной навигации:

Square

Веб-сайт Squareподарит вам незабываемые впечатления. Это онлайн-платформа, где люди могут выставлять свои работы, и она выполнена очень необычно. С самого начала вас приглашают исследовать сайт с Let’s Rock! Это кнопка, при нажатии на которую открывается врата веб-империи, где вас приветствуют контрастные цвета, популярные анимированные GIF-файлы, изображения в стиле 90-хи синтезаторные мелодии. И все это происходит еще до того, как вы получите доступ к основному контенту.

Чтобы увидеть работы художников, сначала нужно перетащить мышью квадрат, пока он не достигнет финишной черты, обозначенной красной точкой. Когда вы катитесь по квадрату, появляются известные иллюстрированные персонажи, которые составляют вам компанию, такие как Супер Марио, Дарт Вейдер, Эрик Картман, Бендер из Футурамы и т. д… Только после того, как вы завершите эту мини-игру, вы сможете увидеть избранные проекты.

На главной странице вы увидите слово Square,написанное огромными заглавными буквами на экране, и, в зависимости от того, как вы перемещаете указатель мыши, буквы будут наклоняться в том же направлении. Это действие также влияет на то, как вы перемещаетесь по сайту. Если вы переместите курсор в любом направлении, ваше плавание во вселенной Square начнется. Вы можете выбрать, хотите ли вы исследовать его по горизонтали, вертикали или даже случайным образом.

Home Société

Home Société — это бренд, который производит роскошную мебель для дома и открытых пространств. Их веб-сайт был разработан известным агентством Locomotive, поэтому неудивительно, что он выглядит таким креативным и интересным от самого первого до последнего экрана. Это одностраничная страница с гладкой горизонтальной прокруткой слева направо. Весь сайт по сути прост, но увлекателен плавными анимационными эффектами и привлекательными витринами работ компании. Основная навигация четкая и всегда видимая, она расположена в левой части экрана, поэтому вы всегда можете перейти прямо к наиболее интересному разделу. Когда вы дойдете до конца горизонтальной прокручиваемой домашней страницы, вас встречает полноэкранный раздел с большой типографикой.

D. Potfer Studio

D. Potfer Studio — французская консалтинговая и коммуникационная студия, специализирующаяся на искусстве жизни, культуре, еде и напитках. Их работы представлены в карусельной галерее с горизонтальной прокруткой. Изображения выглядят очень мягкими, мечтательными и прекрасно сочетаются с тонкой, четкой типографикой. Графика также великолепно анимирована, что делает приключение с прокруткой еще более увлекательным.

Kwok Yin Mak

Сайт Kwok Yin Mak — прекрасный оазис минимализма, который, несомненно, производит сильное впечатление на посетителей. Это еще один потрясающий пример одностраничного веб-сайта с горизонтальной прокруткой, который в данном случае работает в обоих направлениях. Как только сайт загрузится, вы можете выбрать прокрутку влево или вправо. Основная навигация скрыта в нижнем левом углу экрана. Но при наведении указателя мыши на О себе, Работаи Гостевая книга, стрелка укажет вам, в каком направлении прокручивать, чтобы добраться до этих разделов. Благодаря использованию привлекательных фотографий, отличному выбору типографики, размерам шрифтов и простым анимационным эффектам Квоку удалось создать потрясающий веб-сайт, который прекрасно демонстрирует его творческие способности и навыки.

Prevint

Prevint — это программа предотвращения межличностного насилия, цель которой — повысить осведомленность о различных типах насилия, которым люди чаще всего подвергаются. Разработчики этого сайта выбрали горизонтальную навигацию, чтобы познакомить посетителей с тем, чем занимается их организация, и поделиться тремя спектрами, которые могут быть полезны людям, подвергающимся насилию. Этот веб-сайт является отличным примером того, как работает горизонтальный скроллинг, когда вы хотите представить некоторые общие идеи своим пользователям, и при этом вам не обязательно придерживаться его на всем сайте. Фактически, здесь горизонтальная навигация исчезает в пользу эффекта прокрутки повествования, когда посетители нажимают, чтобы узнать больше о любом из спектров. Веб-сайт Prevint был неоднократно награжден и выигрывал награды CSS Design Awards, Awwwards, и The FWA.


Canals

Canals — очаровательный проект, созданный с целью рассказать историю знаменитых каналов Амстердама. Этот увлекательный веб-сайт напоминает журнал, и благодаря горизонтальной навигации мы ощущаем, что держим в руках настоящий журнал и листаем его страницы. Великолепные изображения, эффект параллакса, смелая типографика и яркие цвета мгновенно перенесут вас прямо на берег этих исторических каналов. Главное меню отображается в левой части экрана. По мере прокрутки цвет меню будет меняться в зависимости от оттенка фона слайда, на который вы смотрите.

Qode Interactive Catalog

Интерактивный каталог Qodeсоздан с целью продемонстрировать оригинальный подход к современному веб-дизайну. Каталог представляет собой тщательно подобранную подборку нескольких творческих тем, каждая из которых обладает особыми эстетическими качествами, вдохновленными различными формами искусства. В проекте реализован горизонтальный скроллинг, чтобы вызвать эффект прогулки по галерее и просмотра произведений искусства. Когда вы наводите курсор на название каждой из представленных тем, вы можете мельком увидеть ее дизайн. И нажав на заголовок, вы можете начать изучение страницы проекта темы. 

Каталог QI получил несколько наград, в том числе « Сайт дня».признание Awwwards, награда « Веб-сайт дня» от CSSDA и награда Webpicksот Communication Arts.

Christie Tang

Кристи Танг — дизайнер продуктов с замечательным сайтом-портфолио. Горизонтальная навигация позволяет нам исследовать ее последние работы, которые элегантно перемещаются из правой в левую часть экрана. Когда вы дойдете до седьмого проекта, цвет фона изменится с белого на черный, а навигация перейдет с горизонтальной на вертикальную. С каждым новым свитком вы попадаете прямо в глубины творческого мира Кристи, где представлены примеры ее мастерства и разносторонности. Главное меню всегда видно: оно находится в верхней части экрана. Когда вы наводите курсор на меню, происходит классная вещь — забавные видеоролики появляются на всем экране (в одном из них даже изображена сама Кристи, играющая в видеоигру), побуждая вас узнать больше об этом, несомненно, уникальном и вдохновляющем дизайнере.

Peak’n Film

За Peak’n Filmстоит Том Гарсин, французский фотограф и видеомейкер. Этот удивительный веб-сайт представляет собой увлекательную демонстрацию захватывающих произведений Тома. Все просто и минималистично, что позволяет его творчеству привлекать внимание. Вверху страницы есть индикатор выполнения, показывающий, как далеко вы продвинулись и сколько его изображений осталось увидеть. Горизонтальный скроллинг гладкий, работает волшебно в обоих направлениях и идеально дополняет портфолио Тома. Весь проект поразителен, отсюда и все награды, которые он получил на FWA, Awwwardsи CSS Design Awards.

Gosha Khidzhakadze

Гоша Хиджакадзе — разработчик с незатейливым веб-сайтом, который очень интересно исследовать. Изображение одноцветное, а фон нейтральный. Итак, что сразу привлекает ваше внимание, так это имя Гоши, написанное массивными оранжевыми буквами, которые медленно уходят за пределы экрана, когда вы просматриваете его работы. Когда вы наводите курсор мыши на любой проект, изображения становятся волнистыми, как если бы они наблюдались сквозь воду, и именно здесь становится очевидным опыт Гоши в анимации. Указатель принимает форму рассеянного круга, и когда вы перемещаете его по фотографии, он открывает фрагменты других изображений, представленных в выбранном проекте.

Gingko

Сайт Gingkoтакже является отличным примером горизонтальной навигации в действии. С каждым экраном вы все больше погружаетесь в манящий мир ландшафтной архитектуры Карин Гокс. Все эффекты анимации ненавязчивы и плавны, но горизонтальная гармония немного нарушена в разделе, где отображаются работы Карин — вот где вертикальная навигация берет бразды правления, пусть даже на мгновение.

Emanuele Milella

Эмануэле Милелла — креативный директор и интерактивный дизайнер с отличным сайтом-портфолио. Страницы покрыты песчаной зернистой текстурой, которая придает сайту атмосферу ретро. В разделе « Работы» появляется эффект горизонтальной прокрутки. Вы можете отслеживать, сколько проектов вы просмотрели, следя за массивными жирными цифрами, отображаемыми рядом с каждым проектом, или проверяя индикатор выполнения, расположенный под изображениями. Когда вы наводите указатель мыши на изображение, графика начинает следовать за движением курсора и поэтому искажается, хотя и не сильно. Это просто забавный элемент, который демонстрирует внимание Эмануэля к деталям.

Myles Nguyen

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

Parsons Branding

Parsons Branding — студия стратегии и дизайна бренда из Кейптауна. На их веб-сайте вы можете выбирать между бесконечной каруселью и полной сеткой проекта. Если вы выберете первое (которое установлено по умолчанию), вы сможете просматривать проекты студии, используя горизонтальную прокрутку. Как только вы найдете проект, о котором хотите узнать больше, нажмите на него, чтобы открыть кейс. И когда вы дойдете до конца исследования, загрузится еще одно, посвященное другому проекту, и так далее, поддерживая идею непрерывности, которая вездесуща на этом сайте.

Studio Björk

Веб-сайт Studio Björk — еще один яркий пример горизонтальной прокрутки, которая используется на каждой странице сайта. Этот сайт довольно минималистичный, в основном черно-белый, а более яркие цвета видны только на выставленных работах. Экран разделен на несколько частей, каждая из которых соответствует одному проекту. Под каждой картинкой есть несколько основных деталей о работе, о которой идет речь. 

Ciao Bella

Чао Беллабыл создан Netflix в честь Найроби, одного из главных героев популярного шоу La Casa de Papel. Сайт заполнен фотографиями, видео, письмами и аудиоконтентом, которые люди со всего мира отправляют своему любимому персонажу. Контент отображается на всем экране, и вы можете перемещаться по нему, перетаскивая курсор в любом направлении. Когда вы найдете что-то, что хотите посмотреть, прочитать или послушать, просто нажмите. Затем вы можете перетащить указатель мыши по горизонтали, чтобы изучить контент, представленный в той же строке, и узнать, что еще фанаты и актеры сериала сказали о Найроби.

Vogue España

Интернет-издание Vogue Españaо моде 80-х представляет собой одностраничный журнал, в котором освещаются все основные модные тенденции эпохи синти-попа. Вы можете перемещаться по графическому и текстовому контенту 80-х годов с помощью горизонтальной навигации, и именно этот эффект придает всему веб-сайту особый внешний вид.

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

Источник

 

8 сайтов с горизонтальной прокруткой, которыми нельзя не восхититься

Вертикальная прокрутка является, пожалуй, одним из наиболее привычных атрибутов интернета. Но привычный — необязательно исчерпывающий: порой, чтобы запомниться и доставить пользователю особое эстетическое удовольствие, стоит переосмыслить само понятие нормы. И если до сих пор в ваших закладках не было ни одного сайта с горизонтальным скроллингом, вот восемь поводов это исправить.


Строгий и минималистичный сайт-портфолио дизайнера из Италии, область компетенций которого простирается от работы с jQuery и брендирования до проектирования взаимодействия и рекламы. В 2014 году площадка удостоилась звания «Сайта дня» по версии CSS Winner и Awwwards. Прокрутка возможна посредством управления с клавиатуры.


Самые популярные хэштеги 2014 года — от #ICantBreathe до #Sochi2014 — собраны здесь и иллюстрированы различными художниками. Сайт является производным Hshtags.com. Скроллинг осуществляется с помощью перетаскивания специального ползунка.


Московская консалтинговая компания, действующая на территории СНГ в области охраны здоровья и труда. Основное тело сайта выполнено в технике аккордеона: каждый раздел, соответствующий одной из четырёх основных услуг организации, реагирует на движение курсора.


Ресурс для интересующихся самостоятельными путешествиями по Австралии. Интерактивная карта, функционирующая здесь, позволяет наметить оптимальный маршрут движения, заблаговременно подыскать места для ночлега, питания и восхищения достопримечательностями континента. «Сайт дня» в сентябре прошлого года на Awwwards.ru.


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


Сайт-портфолио фотографа, режиссёра, сооснователя и креативного директора Studio White Сирила Массона. На площадке представлено множество прекрасных снимков знаменитостей, а также фотографий, сделанных для Nike, Perrier, ID Parfums и других именитых организаций.


В это непросто поверить, но за крайне экстравагантным дизайном в данном случае скрывается производитель замороженных овощей из Хорватии. И горизонтальная прокрутка здесь — лишь капля в океане креативности: тут вам и анимация, и неформальные фотографии сотрудников в качестве фона, наглядные примеры «до» и «после», и многое другое.


Ещё один сайт-визитка — на этот раз от 21-летнего французского программиста Гийома Жевуне. Для навигации по площадке юноша предлагает пользователю взять под управление маленького робота, который, передвигаясь по горизонтальной плоскости, знакомит нас с личностью и деловыми качествами его создателя. Выглядит необычно, забавно и непринуждённо.

лучшие практики — 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 случая, когда горизонтальная прокрутка делает пользовательский опыт лучше:

  1. На сайте много картинок (например, сайт о фотографии или сайт-портфолио)
  2. Сайт содержит визуальный контент крупного формата, который не воспринимается быстро (например, карта)
  3. Структура ресурса представляет собой несколько разделов или слайдов в приложении
  4. Крупный каталог товаров, где должно быть удобно просматривать различные категории
Reverse Buro — отличный пример сайта-портфолио с горизонтальным скроллингом

Тщательное планирование

Любой веб-дизайнер знает, что всё начинается с планирования. Однако спустя некоторое время многие расслабляются и начинают перепрыгивать эту ступеньку. Сайт с горизонтальным скроллингом требует особо тщательного планирования, создания бумажных прототипов и макетов. Вы должны заранее продумать, что и как будет работать на сайте. Придётся учесть множество моментов и, поскольку большинство дизайнеров и пользователей не так часто сталкиваются с подобными решениями, планирование горизонтального сайта может показаться сложнее, чем планирование вертикального.

Горизонтальная навигация

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

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

Навигация должна быть простой и располагаться на виду. Она должна быть интуитивно понятной — чтобы пользователи могли сразу догадаться, как попасть туда, куда им надо.

Основная навигация

Горизонтальный скроллинг не отменяет главной цели любого сайта — донести информацию до пользователей. Поэтому принципы хорошей навигации здесь так же актуальны. Убедитесь, что с помошью простого и всегда заметного меню посетители легко доберутся до нужной страницы, особенно до главной. Так они смогут полюбоваться уникальным дизайном, а затем узнать о вашей компании и продуктах, которые вы предлагаете.

Сайт фотографа Алекса Фуэраса (Alex Fueras Photography) — отличный пример простой основной навигации в боковом меню и футере, которая обеспечивает быстрый доступ ко всем страницам.

Используйте подсказки

Важно понимать, что горизонтальные сайты не настолько интуитивно понятны пользователям, как вертикальные, которые они видят каждый день по многу раз. У них могут возникнуть трудности с пониманием того, как работает тот или иной элемент. Ипользуйте подсказки. Даже если вам всё кажется предельно ясно, пользователи могут воспринимать это иначе, и случайному кликанью по элементу они наверняка предпочтут подсказку.

Кому понравится чувствовать растерянность и гадать, как же работает эта штука, когда можно просто прочитать немного текста? Я готов повторять это снова и снова: если посетители не сумеют разобраться во всём достаточно быстро, они просто уйдут.

Чтобы показать пользователям, что сайт скроллится горизонтально, HereDesign использует простые стрелки.

Не пренебрегайте контентом

При работе над горизонтальным сайтом дизайн нередко превращается в самоцель. Чаще всего такая угроза существует на трендовых сайтах, богатых визуальным контентом. Не стоит забывать о настоящей цели сайта, которая только в очень редких случаях звучит как «чтобы пользователи просто смотрели все эти крутые картинки». Убедитесь, что на сайте присутствует информация о бизнесе, продуктах и услугах, контактная информация, формы заказа и т.д.

Помните: горизонтальная ориентация сайта не делает его контент менее значимым, чем контент вертикальных сайтов. Если вы хотите, чтобы пользователи снова и снова возвращались на ресурс, позаботьтесь окачестве контента.

 

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

Программирование

Кажется, здесь всё просто, но это не так. Сложность программирования горизонтального сайта легко недооценить, поэтому я хочу обратить на это особое внимание. Веб-программирование заточено под вертикальные сайты — как самые привычные, удобные и привлекательные на взгляд большинства людей. Поэтому написать горизонтальный сайт может оказаться сложнее, чем вы думали. Возможно, вы не знаете с чего начать?

Здесь существует несколько подходов.Вот отличный урок, из которого вы узнаете, как создать отличный и функциональный сайт с помощью базовых элементов HTML и CSS. Это только один способ, кроме него существуют и другие.

Последнее предупреждение (Да, ещё одно!)

Горизонтальный сайт может привлечь внимание пользователей и заставить их побродить по нему подольше, но когда дойдёт до дела, они захотят быстро получить то, что им нужно и так же быстро уйти. Если вы попытаетесь удержать их, сделав сайт похожим на лабиринт, они просто закроют страницу. Помните, пользователям намного проще пролистывать сайт вертикально, при помощи колёсика мыши.

Горизонтальный скроллинг требует от пользователей больших усилий: надо наводить курсор мыши на определённые объекты, перетаскивать ползунок зажатой кнопкой мыши или постоянно нажимать на неё. Кроме того, иногда горизонтальная прокрутка происходит рывками, и это тоже плохо сказывается на пользовательском опыте. Наконец, помните, что посетители сайта привыкли не только пролистывать, но и просматривать страницы по вертикали. Горизонтальная прокрутка — неудачное решение для страниц, где много текста.

Если вы по-прежнему уверены, что на вашем сайте горизонтальный скроллинг придётся очень кстати — вперёд! Гавное — всегда думайте о пользователях. Сайт должен быть не просто красивым, но и удобным — чтобы люди могли быстро найти нужную им информацию и захотели приходить за ней снова и снова.

Скроллинги бывают разные. Мало придумать отличную идею, важно еще ее эффектно воплотить в жизнь.

Ищете команду, способную не только выдавать высококлассный креатив, но и качественно его реализовывать? Обязательно воспользуйтесь рейтингом креативности веб-студий.

Во-первых, он независимый и объективный.

Во-вторых, вы сможете сразу изучить карточки или сайты его участников.

В-третьих, помимо общего зачета, в рейтинге креативности разработчиков сайтов было сформировано несколько подрейтингов относительно количества побед в каждом из 6 конкурсов: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards, а также FWA.

Оригинал: http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/

Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

  1. Главная
  2. /
  3. Блог
  4. /
  5. Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

Скроллинг — не только колёсико мыши. В более широком смысле это понятие обозначает, что содержимое информации находится в движении по вертикали или горизонтали.

Неважно, о какой форме информации идёт речь — тексте или изображении. На содержании информации скроллинг никоим образом не сказывается, но он является очень важным элементом UX. Эта аббревиатура с английских слов «User eXperience» может быть расшифрована как «Опыт взаимодействия». Речь идёт о том, что чувствует человек в том или ином случае, какой, например, у него UX, если он нечаянно наступил в лужу, какой UX , если он просматривает сайт с горизонтальным скроллингом.

Стоит ли использовать горизонтальный скроллинг на сайте?

Проблемы UX рассматриваются специалистами ИТ-технологий очень пристально. Речь идёт об успешности сайта, а сайты не делаются понапрасну. По статистике на июнь 2014 года в интернете было 996 млн.сайтов, и вряд ли найдётся хоть один, у которого нет конкурентов. Стало быть, кроме SEO-продвижения, создателю сайта надо всеми силами сделать своё детище «из ряда вон». А это непросто.Тут-то дизайнер и вспоминает про горизонтальный скроллинг. Таких сайтов немного, и значит есть шанс что сайт запомнится или привлечёт большее внимание. Но возможно и обратное. Большинство пользователей привыкли переходить со страницы на страницу с помощью мыши или стрелок на клаве, а двигать ползунок хочется не каждому. Поэтому большинство специалистов UX относится к горизонтальной прокрутке сайта с большой осторожностью, если не сказать — негативно.

Но не всё так однозначно. Успешные сайты с горизонтальной прокруткой существуют и приносят их владельцам ощутимую пользу. Эти сайты создавались не только с использованием выигрышного дизайна. Но и с тщательной предварительной проработкой всех вопросов. Восприятие горизонтального скроллинга облегчается, если на сайте есть подсказки, помогающие посетителю сориентироваться. Очень важно качество содержания сайта, хороший контент — краеугольный камень каждого сайта, с оригинальным типом прокрутки — тем более.

Есть мнение, что горизонтальный скроллинг имеет преимущества, когда сайт содержит много картин, когда на нём размещено крупное изображение, не воспринимаемое быстро, скажем, карта, когда информация построена так, что к основному материалу прилагаются отдельные приложения, картинками или текстом , когда выкладывается большой каталог товаров, содержащий многие категории. Широкое распространение сенсорных экранов даёт горизонтальному скроллингу дополнительные шансы на успех его применения.

 

Почитать о нас можно тут Узнать какие мы предоставляем услуги здесь

Остерегайтесь горизонтальной прокрутки и имитации управления жестами для десктопов

Резюме: даже сейчас, когда все больше целевых страниц и сайтов имитируют управление жестами и горизонтальную прокрутку при отображении на десктопах, пользователи таких устройств по-прежнему неохотно просматривают контент при помощи боковых движений мыши или пальцев по тачпаду.

Специалисты Nielsen Norman Group (NNG), изучая проблему веб-юзабилити, отметили любопытный феномен, наблюдающийся в течение нескольких последних лет: горизонтальная прокрутка остается проблемой для пользователей настольных компьютеров. Даже с широким внедрением мобильных устройств, где жесты используются для просмотра веб-контента методом скольжения пальца (свайпинг, от англ. swipe), пользователи десктопов в большинстве не приемлют горизонтальную прокрутку web-страниц.

В данном посте мы рассмотрим некоторые проблемы юзабилити, связанные с горизонтальным скроллингом, присущим устройствам с сенсорным экраном, при имплементации его на веб-ресурсы, отображаемые на мониторах ПК. Также мы дадим несколько советов о том,как убрать горизонтальную прокрутку на сайте или помочь пользователям перемещаться через ваш контент боковыми управляющими движениями: горизонтальным скроллингом или свайпингом.

Почему обращаются к горизонтальной прокрутке

Совместимость (адаптивность) страницы с различными типа устройств
Просмотр несущественного содержимого
Сохранение вертикального пространства экрана
Демонстрация характерного дизайна

Риски применения горизонтальной прокрутки на десктопе
Советы по имплементации горизонтальной прокрутки или свайпинга на веб-страницу для ПК

1. Не позволяйте «свайпить» первичную навигацию
2. Не заставляйте пользователей гадать, сколько еще контента осталось
3. Создайте очевидные, всегда видимые сигналы для свайпинга

Вывод

Почему обращаются к горизонтальной прокрутке

Доминирующим стандартом для перемещения по длинным лендингам или «портянкам» у пользователей настольных компьютеров является традиционный скроллинг (прокрутка по вертикали).

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

Маркетологи и веб-дизайнеры, умышленно нарушающие устоявшиеся правила, делают это по одной из следующих причин:

Совместимость (адаптивность) страницы с различными типа устройств

Те же эксперты NNG отмечают, что пользователи мобильных устройств с сенсорным экраном воспринимают горизонтальную прокрутку как нечто само собой разумеющееся.

Разработчики и маркетологи, применяющие адаптивный дизайн для своих лендингов/сайтов, используют метод горизонтального скроллинга или же свайпинга контента для всех устройств, на которых должна отображаться веб-страница, включая настольные компьютеры. Подобный подход применяется просто потому что единый дизайн, подходящий для отображения контента на различных типах дисплеев, обходится дешевле в разработке и внедрении, а также — предположительно! — предполагает максимальную совместимость лендинга со всевозможным «аппаратным парком» целевой аудитории.

Однако владельцы ПК, не привыкшие к горизонтальной прокрутке, зачастую не имеют понятия, что какую-то часть содержимого страницы они могут обнаружить с помощью свайпинга на большом мониторе. Поскольку люди взаимодействуют с мобильными и настольными устройствами абсолютно по-разному — отметим, что поведенческие паттерны для обоих случаев «прошиваются» буквально на уровне рефлексов пользователей! — то универсальный подход типа «один размер подходит всем» (one-size-fits-all) может привести к неприятным последствиям.

Ключевой момент здесь заключается в так называемой прерывности пользовательского опыта: просматривая один и тот же веб-ресурс, сперва с мобильного устройства, а затем с монитора ПК, один и тот же человек парадоксальным образом будет демонстрировать 2 различных поведенческих паттерна — пользуясь смартфоном или планшетом, он уверенно будет «свайпить» страницу по горизонтали, а устроившись у десктопа, он будет скроллить ее вертикально вниз до упора, надеясь найти продолжение контента.

Разумеется, он вспомнит недавно совершенные действия и прибегнет к горизонтальной прокрутке, но лишь потому, что уже посещал этот ресурс, пользуясь мобильным устройством.

Если же владелец ПК впервые заходит на посадочную страницу/сайт, оснащенные горизонтальной прокруткой, то он наверняка не увидит значимой части содержимого.

Просмотр несущественного содержимого

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

Убедитесь, что вы не поместили критически важный контент на горизонтальную прокрутку: не каждый посетитель обнаружит его.

Сохранение вертикального пространства экрана

Вместо того, чтобы отображать весь контент на очень длинной странице, можно воспользоваться макетом, позволяющим свайпинг для подачи информации «мелкими дозами». Горизонтальная прокрутка, дополняющая традиционный скроллинг, делает дизайн страницы очень гибким и адаптивным: контент можно добавлять, соответственно, как по горизонтали, так и по вертикали.

Hulu.com: дизайн сайта предусматривает как вертикальный, так и горизонтальный скроллинг

Демонстрация характерного дизайна

Дизайнеры, художники и разного рода цифровые агентства используют горизонтальную прокрутку на своих сайтах для того, чтобы выделиться среди всех прочих и показать потенциальным клиентам свои навыки и умения.

Если же ваш бизнес относится к какой-либо широко распространенной категории (то, что называется английским термином «mainstream»), то применение свайпинга для вас может стать роковой ошибкой.

Риски применения горизонтальной прокрутки на десктопе

Как убрать горизонтальную полосу прокрутки на сайте? Безусловно, она приемлема в некоторых ситуациях, но должна применяться с осторожностью. Судя по отчетам NNG, горизонтальная прокрутка на рабочем столе является одной из веб-интеракций, неизменно вызывающих у респондентов отрицательные реакции.

Хотя свайпинг на десктопе не вызывает такой же уровень негативации, как традиционная горизонтальная полоса прокрутки (scrollbar, скроллбар), он тоже представляет собой довольно рискованный метод взаимодействия пользователя с веб-интерфейсом.

Рассмотрим 3 главные причины, по которым горизонтальная прокрутка и свайпинг создают проблемы для владельца ПК.

1. Традиционная горизонтальная полоса прокрутки обременяет пользователя, требуя для непрерывного скроллинга постоянного внимания и больших физических усилий.

Большинство пользователей для горизонтального перемещения использует скроллбар, а не стрелки прокрутки — это, вроде бы, облегчает выполнение задачи. Тем не менее, двигаться по «узкому туннелю» полосы прокрутки трудно, потому что подобное действие требует от пользователя тщательного управления курсором мыши для движения слайдера («ползунка») по скроллбару.

Здесь мы имеем дело с частным случаем «закона вождения» (steering law), гласящего, что время, необходимое пользователю для перемещения указывающего устройства (слайдера, в нашем случае) через условный тоннель, зависит от длины и ширины тоннеля: чем он уже и длиннее, тем больше времени это займет у пользователя.

Из чего следует вывод: использование горизонтальной полосы прокрутки имеет так называемую «высокую стоимость взаимодействия» (high interaction cost), что отталкивает пользователей от завершения действия. Как заявил один из участников экспериментов по применению горизонтального скроллинга: «Мне кажется, что на прокрутку у меня ушла целая вечность!».

2. Пользователи могут игнорировать контент, доступный через горизонтальную прокрутку или свайпинг, поскольку они не ожидают его там найти.

Исследования показывают, что даже сильные визуальные сигналы, такие как стрелки, часто остаются незамеченными. Люди ожидают, что им придется скроллить по вертикали в поисках дополнительного контента, но горизонтальная прокрутка ни с чем подобным у них не ассоциируется: подобное действие противоречит ментальному шаблону восприятия веб-страницы.

Тепловая карта сеанса айтрекинга на Apple.com: пользователи не обращают внимания на стрелки прокрутки, а значит, не видят дополнительного контента

3. Даже очевидные сигналы для горизонтальной прокрутки имеют слабую информационную насыщенность.

Даже если люди замечают сигналы о горизонтальной прокрутке, они вряд ли рискнут загружать непредсказуемый контент. Содержимое, скрытое за границами полей горизонтального скроллинга, находится в заведомо невыгодном положении, потому что даже характерные визуальные знаки (стрелки) обладают слабой информационной насыщенностью: пользователь вряд ли может догадаться, что за информацию он получит, нажав на стрелку прокрутки или самоотверженно прокрутив скроллбар.

Еще выше риск разочарования для тех вариантов страницы, где вся она может «свайпиться» полностью, чтобы сделать новый контент доступным: посетитель, возможно, вытерпит длительную процедуру ожидания полной загрузки новый страницы, чтобы убедиться, что открывшийся его глазам контент абсолютно нерелевантен его интересам.

USAToday.com: пользователи не пользуются стрелками горизонтального скроллинга, потому что не знают, что откроется при нажатии

Советы по имплементации горизонтальной прокрутки или свайпинга на веб-страницу для ПК

Если вы подумываете об имплементации жеста «скольжения пальцем» или горизонтального скроллинга на страницу сайта, которая будут отображаться на мониторе настольного компьютера или ноутбука, то вот несколько полезных советов.

1. Не позволяйте «свайпить» первичную навигацию

Если вы не хотите совсем убрать горизонтальную прокрутку html, то, по крайней мере, не заставляйте посетителей непременно «свайпить» ваш контент: некоторые захотят, но многие — нет. Разрешите альтернативные способы навигации: позвольте пользователям перемещаться и с помощью меню. Меню сообщит, что есть на сайте и поможет найти необходимую информацию. Посетители полагаются на первичную навигацию, чтобы углубиться в веб-ресурс или перемещаться по категориям. Без глобальной навигации им сложнее искать дополнительный контент.

Dennys.com: такой дизайн обеспечивает очевидную глобальную навигацию в дополнение к стрелкам для свайпинга контента. При тестировании обнаружилось, что пользователь никогда не использовал стрелки. Вместо этого он полагался исключительно на глобальную навигацию и смог выполнить все задачи успешно.

2. Не заставляйте пользователей гадать, сколько еще контента осталось

Используйте полосу прокрутки с индикацией или нумерацию страниц. Это всегда хорошо — показать посетителям, где именно они находятся на вашем ресурсе, чтобы они могли лучше ориентироваться. Скажите людям, сколько еще контента им предстоит освоить: осмысленное движение вперед всегда лучше слепого блуждания без цели.

Amazon.com: нумерация страниц наглядно показывает, сколько еще вариантов офферов осталось посмотреть

3. Создайте очевидные, всегда видимые сигналы для свайпинга

Вместо того, чтобы просто убрать горизонтальную полосу прокрутки, позвольте посетителям без лишних сложностей продвигаться через ваш контент с помощью кликов мыши или клавиш клавиатуры. Если стрелки прокрутки видны только при наведении на них курсора (как на примере ниже), многие просто не догадаются, что содержимого на ресурсе гораздо больше.

Netflix.com: в обычном состоянии нет визуальных подсказок, указывающих, что доступно больше контента (вверху). Стрелки для горизонтального скроллинга появляются только при наведении курсора мыши (внизу).

Вывод

Горизонтальные прокрутка и свайпинг на мониторе десктопа относятся к совершенно другому типу пользовательского опыта, нежели при использовании их на сенсорных дисплеях планшетов и смартфонов. Перед нами наглядный пример того, почему маркетологи и веб-дизайнеры должны понимать, что люди используют мобильные телефоны, планшеты и настольные компьютеры по-разному, и почему выгодно оптимизировать дизайн ресурса под каждый вид устройств.

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

Высоких вам конверсий!

По материалам nngroup.com, image source Jatin Shah 

30-05-2014

Горизонтальный скролл становится модным. Разберемся в этом

Это перевод статьи от Design Your Way — http://www.designyourway.net/blog/inspiration/the-case-against-horizontal-scrolling-websites/, оригинальное название, публикации:

«Иск против горизонтального скролла»

Время от времени всё переосмысливается. А значит нет ничего удивительного в том, что сайты с горизонтальным расположением контента становятся модными. Это смелая и впечатляющая дизайнерская инновация, так как в настоящее время в интернете подавляющее большинством веб-сайтов используют вертикальную прокрутку.

Причина популярности подхода с вертикальной прокруткой очевидна — его проще реализовать, он привычен и чаще используется. Сайты с вертикальной прокруткой считаются также и более эффективными. Так как это мнение большинства, то использование горизонтального скроллинга становится еще более девиантным и смелым.

Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.

(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 SketchBuilder

Горизонтальный веб-сайт / однострочная таблица



В настоящее время я создаю сайт для размещения своего арт-портфолио. Для моей страницы портфолио я использую таблицу с одной строкой и хотел бы, чтобы в ней было бесконечное количество разделов столбцов в этой одной строке. К сожалению, я получаю только 4 фотографии в строке, а 5-я автоматически выталкивается ниже, как будто она пытается начать новую строку. Я не совсем уверен, как это исправить. У меня нет определенного количества фотографий, чтобы поместить их в таблицу, я буду добавлять все больше и больше, так что не может быть никакого реального ограничения на количество img, которые я хотел бы вставить в таблицу. Любая помощь будет очень признательна.

Спасибо, Стивен К.

jquery html css webpage infinite
Поделиться Источник user2980793     11 ноября 2013 в 21:31

2 ответа


  • Горизонтальный ListView

    Возможный Дубликат : Как я могу сделать горизонтальный ListView в Android? Я использовал вертикальный ListView много раз, но для определенных требований я хочу реализовать горизонтальный ListView, также элементы списка будут приходить динамически. Пожалуйста, помогите мне получить горизонтальный…

  • Таблица неправильно отображает мой сайт wordpress?

    В настоящее время я работаю на своем веб-сайте, где у меня есть таблица, и она отображается неправильно. Тексты отключены на несколько пикселей. Вот ссылка на сайт http://bit. ly/xMaBXR



1

в css году

ul.infinte{
white-space: nowrap;
overflow-x: auto;
}
ul.infinte li{
display: inline-block;
}

в html году

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
...
<li><img src="image999.jpg" /></li>
<ul>

Это должно держать ваши изображения в одном ряду. Не нужно использовать таблицу, вместо этого используйте ul>li, это проще.

Поделиться pictoru     11 ноября 2013 в 21:40



0

Вам понадобится что-то более сложное, чем просто теги, чтобы постоянно принимать и добавлять фотографии в строку таблицы. Хотя можно было бы построить таблицу с тегами, создаваемыми динамически в зависимости от того, сколько у вас фотографий, вы быстро поймете, что это не масштабируемое решение: D.

Возможно, лучше всего было бы иметь сервер изображений.

Поделиться PeonProgrammer     11 ноября 2013 в 21:39


Похожие вопросы:


Prettyphoto загружается в начале страницы горизонтальный 1 страничный сайт

В настоящее время я внедряю PrettyPhoto в горизонтальный 1-страничный веб-сайт: http://www.basenharald.nl/3d (нажмите foto & video для раздела, о котором я говорю) В каком-то смысле сценарий…


Многоязычный веб-сайт: одна таблица или несколько таблиц?

Я создаю многоязычный веб-сайт в PHP. Сначала я рассматривал возможность использования файла JSON с такой структурой, как { TEXT_CODE: { LANG_CODE: TEXT, LANG_CODE: TEXT } } Но затем, поскольку…


одна страница горизонтальный сайт не центрированный по размеру

Я разрабатываю свой первый одностраничный горизонтальный сайт с использованием jQuery и плагина scrollTo. Сайт имеет 3 экрана и начинает центрироваться (показывая средний экран). Чтобы достичь…


Горизонтальный ListView

Возможный Дубликат : Как я могу сделать горизонтальный ListView в Android? Я использовал вертикальный ListView много раз, но для определенных требований я хочу реализовать горизонтальный ListView,…


Таблица неправильно отображает мой сайт wordpress?

В настоящее время я работаю на своем веб-сайте, где у меня есть таблица, и она отображается неправильно. Тексты отключены на несколько пикселей. Вот ссылка на сайт http://bit. ly/xMaBXR


как дать горизонтальный и вертикальный заголовок фиксированным, но данные должны двигаться

Я попытался разработать таблицу с фиксированным заголовком( т. е. заголовок должен содержать-вертикальный и горизонтальный путь ). таблица должна быть прокручиваемой таблица должна иметь…


Полноэкранный адаптивный горизонтальный сайт

Я пытаюсь найти лучший метод для того, чтобы создать горизонтальный веб-сайт, полноэкранный и, если возможно, отзывчивый, минимальной ширины для планшетов. Дело в том, что мне нужна также…


Media запросов не работают (горизонтальный сайт)

Я делаю этот горизонтальный сайт, и я использую 2 экрана: один 1920×1080, один 1600×900. Это мой css, я хочу, чтобы для экранов меньше 1650px ширина элемента была 65%,, а для больших экранов 71%….


Viewport trigger css анимация (горизонтальный веб-сайт)

Я пытаюсь сделать горизонтальный сенсорный дружественный сайт, используя swiper.js … Я сделал несколько очень простых анимаций css, и я хотел бы запускать эти анимации каждый раз, когда они…


Горизонтальный дизайн прокрутки для веб-сайта

Я учусь кодировать свой путь через HTML и CSS. Сейчас я пытаюсь создать шаблон для веб-сайта (как часть моего учебного процесса). Я хочу создать веб-сайт, который прокручивается только…

Джо Эш Сакула — Портфолио

26 марта

по Джо Эш Сакула (США)

Портфолио продуктового дизайна Джо Эш Сакула.Включает проекты от Headspace, Snapchat, Fix the Mask и Rhythm Science.

  • Мобильные приложения и приложения
  • Интернет и интерактивный
  • Стартапы
  • Горизонтальная компоновка
  • Параллакс
  • Портфолио
  • Рассказ
  • Микровзаимодействия
  • Проект
  • Страница
  • HTML5
  • jQuery
  • Webflow
  • места
  • места
  • места

Sourcinn — Номинальный участник Awwwards

14 апреля

по Железный бархат (Франция)

Sourcinn — французская компания, которая создает решения для визуального мерчендайзинга и презентаций в магазинах для самых требовательных брендов.

  • Мода
  • Полноэкранный
  • Горизонтальная компоновка
  • Звук-Аудио
  • 3D
  • О странице
  • WebGL
  • GSAP Анимация
  • Три.js
  • Nuxt.js
  • места
  • места
  • места

Голосование пользователей

Подробнее

  • UPQODE из США upqode.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Int

      Инт

    8.40

  • Друхин Тарафдер из Индия dribbble.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    5.20

  • Simon из Польша
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    7.00

  • Арно Сонье из Франция marindessables.fr
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    7.00

  • Менисье Жоффри из Франция geoffrey-menissier.fr
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    8.10

  • bastien-g из Франция hellomojito.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    7.80

  • олексиифедоров из Украина oleksiifedorov.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    8.40

  • Jaffar из Объединенные Арабские Эмираты labibjaffar.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    7.40

  • datmaside из Украина
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    7.00

  • Мороз Евгений из Украина beence.net
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Главный

      Начальник

    7.60

  • tonye из Канада tonyebrown.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Племя

      Племя

    8.60

  • Барри Барис Доган из Австрия zweimillimeter.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Племя

      Племя

    8.90

  • Марина Барская из Россия beence.net
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Племя

      Племя

    7.90

  • Jordan Gilroy из Великобритания jordangilroy.com
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Племя

      Племя

    8.60

  • джоуи-зорнес
    • Проект

    • Удобство использования

    • Творчество

    • Содержимое

    • Племя

      Племя

    6.40

КРЕДИТЫ

Команда проекта

  • Железный бархат из Франция

    железный бархат.студия
    • H.M. 05

      Почётное упоминание

    • Pro

      Pro

    Подписаться

удивительных примеров веб-сайтов с горизонтальной прокруткой

Вы когда-нибудь задумывались о том, что веб-сайты с горизонтальной прокруткой будут иметь место?

С каждым годом создается все больше и больше сайтов.Каждый борется за внимание зрителей.

Что отличает веб-сайт от других и привлекает больше посетителей? Все сводится к веб-дизайну.

Дизайн веб-сайта определяет, останется ли посетитель или уйдет.

Некоторые обратились к веб-сайтам с горизонтальной прокруткой. В отличие от традиционного веб-сайта, который прокручивается вверх и вниз, горизонтальные веб-сайты прокручиваются слева направо.

Горизонтальная прокрутка интересна и может подарить пользователю незабываемые впечатления.Но не для каждого сайта это практично.

В этой статье мы обсудим, когда использовать горизонтальную прокрутку. Он также покажет вдохновляющие примеры веб-сайтов с горизонтальной прокруткой.

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

Горизонтальный макет может помочь представить содержимое изображения лучше, чем вертикальный макет. Это также улучшает взаимодействие с пользователем.

Следующие типы веб-сайтов хорошо смотрятся с горизонтальной прокруткой:

  • Веб-сайты портфолио
  • Веб-сайты каталогов
  • Интернет-галереи
  • Отображение проектов
  • Отображение интерактивных карт
  • Обеспечивает оптимальное использование пространства экрана с широкоформатными мониторами, распространенными сегодня.
  • Обеспечивает уникальный и увлекательный способ взаимодействия пользователей с веб-сайтом.
  • Обеспечивает более удобный способ повествования.
  • Хорошо работает с крупной типографикой.

Использование передовых методов дизайна может сделать веб-сайт с горизонтальной прокруткой лучше всего.Это также помогает создать отличный пользовательский опыт.

При создании сайта с горизонтальной прокруткой необходимо дополнительное планирование. Это потому, что дизайнеры менее знакомы с этим стилем навигации.

Помните об этих моментах при проектировании горизонтального участка:

  • Держите веб-сайт организованным и простым
  • Предоставьте основную информацию. Например, предоставляемые услуги или продукты и контактная информация.
  • Убедитесь, что есть видимое и понятное меню.
  • Многие пользователи не привыкли к прокрутке в сторону.

Добавьте индикаторы, сообщающие пользователям, что страница прокручивается в сторону. Индикаторы включают стрелки или показывают часть изображения, так что посетителю нужно прокрутить, чтобы увидеть остальные

  • Используйте эффекты параллакса, которые добавляют впечатлений.
  • Пользователи не хотят использовать горизонтальную полосу прокрутки. Большинство людей используют колесо мыши или клавиши со стрелками.

Для наилучшего взаимодействия с пользователем горизонтальные веб-сайты должны задействовать эти механизмы

Удивительные примеры горизонтальных веб-сайтов

Home Société

На этом веб-сайте используются стрелки и отображается часть заголовка, чтобы указать, что страница прокручивается вправо.Он также имеет видимое и понятное меню для удобства навигации.

Это хороший пример сочетания изображений и письменного контента на горизонтальном веб-сайте.

Портфолио Евгении Дюранте

На этом веб-сайте Евгении представлены письменные услуги, которые она предоставляет. Горизонтальная прокрутка хорошо подходит для большой типографики.

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

WoW ваших клиентов, создавая инновационные и стимулирующие веб-сайты
быстро, без опыта программирования.Slider Revolution
позволяет привлечь к вам поток клиентов за модным дизайном веб-сайтов.

Балерина

Ballerina использует эффекты параллакса и анимацию для создания запоминающегося веб-сайта. Горизонтальная прокрутка способствует незабываемому дизайну.

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

Эльфлеттериг

Elfletterig использует преимущества горизонтальной прокрутки для отображения множества изображений своих проектов.Эти изображения намного лучше подходят для горизонтального веб-сайта, чем для вертикального.

Alex Flueras Photography

На этом веб-сайте портфолио используется горизонтальный макет для отображения большого количества визуального контента. Меню помогает пользователям легко ориентироваться в нем.

Пользователи могут использовать горизонтальную полосу прокрутки или клавиши со стрелками на клавиатуре для прокрутки.

Шесть носков Студия

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

Великие армяне

Великие армяне — это галерея ста армян, изменивших мир.

Веб-сайт использует горизонтальную и вертикальную прокрутку, чтобы направить посетителей в путешествие. Кнопка «вернуться к началу» полезна для тех, кто не хочет снова пролистывать весь контент.

Группа Немезиды

Веб-сайт Nemesis — отличный пример организованного и чистого горизонтального веб-сайта.Он использует крупную типографику и пробелы таким образом, чтобы это было приятно для глаз.

Еще одна особенность, достойная подражания, — это меню, которое всегда отображается вверху страницы.

Д. Потфер Студия

В этом сайте-портфолио используется горизонтальный дизайн для отображения яркого графического содержания.

Deepondé

Этот сайт приветствует посетителей видео. Используя колесо мыши, посетители могут прокручивать товары на сайте.

Zand.tech

Этот сайт имеет несколько хороших элементов дизайна, которые делают его привлекательным. Одним из элементов является полоса прокрутки, которая указывает, где находится пользователь на веб-сайте.

Другая — стрелка, которая сообщает пользователям, что нужно прокручивать влево. На сайте также есть постоянное меню вверху страницы.

Джейсон Лав

Джейсон Лав отображает интерактивный контент, который хорошо работает с горизонтальной прокруткой. Посетители могут прокручивать влево и вправо, и это включает в себя развлекательные и уникальные элементы.

Виртуальная выставка SSDC2020

Этот веб-сайт с горизонтальной прокруткой содержит много видеоконтента, который хорошо выглядит в горизонтальном формате. Дизайн привлекательный и чистый, с использованием сплошного цвета фона с белым акцентом.

Меценат Студия

Maecenas Studio сочетает в себе вертикальную и горизонтальную прокрутку. Он представляет свои проекты так, как будто посетитель перелистывает страницы книги.

Bbb.cat

Художники приветствовали открытие студии созданием плакатов.Пользователи могут просматривать плакаты на этой веб-странице.

Вообан

На каждой странице Vooban.com есть ползунки с горизонтальной прокруткой. Добавление скользящих элементов — отличный способ включить больше контента, не перегружая пространство.

Квок Инь Мак

Квок Инь Мак рассказывает историю своей работы в области графического дизайна. Сайт организован, но содержит много информации.

Принципы типографики

Этот веб-сайт посвящен типографике и подчеркивает принципы шрифтов с примерами.

Газнор

Gasnor использует горизонтальный ползунок на своем вертикальном сайте для отображения данных. Этот ползунок помогает передать идею движения вперед во времени и увеличивает вес сообщения.

Museo de la desinformación

Этот сайт отображает уникальную дизайнерскую идею для хлебного меню на горизонтальных веб-страницах. Это линия из точек, представляющая каждый раздел веб-страницы.

Точки превращаются в галочки после того, как пользователь заходит в этот раздел.

Peak’n Film

Peak’n Film — классический пример использования горизонтального веб-сайта. Макет позволяет посетителям сосредоточить все свое внимание на потрясающих изображениях.

Belward Tree Films

Belward Tree Films наилучшим образом использует экранную площадь для отображения своих фотографий и видео.

Участок Стаса Яручина

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

Buildinamsterdam

Этот веб-сайт с горизонтальной прокруткой отличается яркими цветами изображений, эффектами параллакса и стрелкой навигации.

Spiritus

Spiritus сохраняет чистый и простой вид, который привлекает посетителей. Он имеет постоянное навигационное меню и включает интерактивные элементы.

Цифровая выставка Foam Talent

На этом веб-сайте с горизонтальной прокруткой представлены фотовыставки девятнадцати разных художников.

Битва

Rumble демонстрирует свои проекты по звуковому дизайну и музыкальной композиции. Интересные элементы включают в себя стрелку навигации, которая служит панировочными сухарями, и меню, которое прокручивается по горизонтали, как веб-сайт.

Кристи Тан

Веб-страница портфолио Кристи Танг позволяет пользователям быстро просматривать ее последние проекты. После седьмого проекта прокрутка переключается с горизонтальной на вертикальную.

Мы стреляем по бутылкам

Эта британская группа специализируется на фотографировании бутылок.Эта короткая веб-страница демонстрирует их работы.

Studio — BA®

Studio-Ba включает в себя множество параллаксных, интерактивных и анимированных эффектов, чтобы удивить своих гостей.

Завершение мыслей об этих примерах веб-сайтов с горизонтальной прокруткой

При хорошем дизайне горизонтальная прокрутка может сделать веб-сайт интересным. Это также создаст хороший пользовательский опыт.

Это практичный дизайн для изображений и видеоконтента, поскольку он оптимально использует пространство экрана.Кроме того, это обеспечивает определенный поток истории.

Хотя это не для каждой веб-страницы, горизонтальная прокрутка может быть полезной. В некоторых случаях это самый идеальный вариант оформления.

Почему бы не проверить свои творческие способности и не попробовать веб-сайт с горизонтальной прокруткой?

Если вам понравилось читать эту статью о веб-сайтах с горизонтальной прокруткой, вам следует ознакомиться с этой статьей с самым чистым дизайном веб-сайтов.

Мы также писали на похожие темы, такие как дизайн одностраничного веб-сайта, современный дизайн веб-сайта, дизайн страниц, которые скоро появятся, анимация веб-сайта и цветовые схемы веб-сайта.

И это еще не все.

Нам очень нравится дизайн, поэтому мы также создали статьи о параллаксной прокрутке, минималистичных веб-сайтах, нижнем и верхнем колонтитулах веб-сайтов, о дизайне страниц для связи и креативных примерах веб-сайтов.

Как это сделать хорошо

Когда вы думаете о «прокрутке» веб-сайтов и приложений, в первую очередь, вероятно, приходит на ум одно направление: вниз.

В этом есть смысл — практически каждая веб-страница структурирует свое содержимое по вертикали.Чтобы увидеть больше, просто прокрутите вниз с помощью мыши, трекпада или клавиатуры. Некоторые веб-сайты могут попытаться улучшить взаимодействие с пользователем с помощью анимированных всплывающих элементов или эффектов параллакса. Даже в этом случае ориентация прокрутки почти всегда остается вертикальной.

Вертикальная прокрутка работает нормально … но как насчет ее аналога по оси X, горизонтальной прокрутки ? Вы могли подумать о добавлении этой более редкой функции на свой сайт. Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше вертикальной прокрутки? И как это может обогатить ваш UX?

В этом посте я отвечу на все эти вопросы, а затем покажу вам, как создать базовую горизонтальную прокрутку с помощью пользовательского HTML и CSS, если вы считаете, что это хорошо подходит для вашего сайта.

Что такое горизонтальная прокрутка?

Горизонтальная прокрутка — это метод навигации по страницам, при котором пользователь прокручивает влево и вправо, чтобы открыть содержимое по бокам окна или контейнера. Горизонтальную прокрутку можно выполнить, щелкнув и перетащив горизонтальную полосу прокрутки, проведя вбок на трекпаде рабочего стола или мышью трекпада, нажав клавиши со стрелками влево и вправо или проведя пальцем в сторону на сенсорном экране.

Другими словами, колесо прокрутки заставляет страницу перемещаться по экрану горизонтально, а не вертикально.Вот пример вертикальной прокрутки на сайте фотографа:

Источник изображения

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

Это может показаться немного резким, поэтому давайте расширим его и обсудим, почему вы, вероятно, не слишком часто прокручиваете в сторону.

Недостатки горизонтальной прокрутки

Мнения о горизонтальной прокрутке искажаются как среди веб-дизайнеров, так и среди веб-пользователей.Даже я сам не очень этим увлекаюсь по нескольким причинам:

Это противоречит ожиданиям пользователей.

Вертикальная прокрутка — это норма навигации. За исключением редких стилистических украшений, каждая веб-страница структурирует свое содержимое по вертикали. Поэтому, естественно, пользователи будут ожидать прокрутки таким образом, а не слева направо.

Это нормально — время от времени нарушать правила дизайна, чтобы добавить визуального чутья и изюминки. Но игнорирование этой конкретной конвенции без четкой цели смутит и расстроит посетителей больше, чем увлечет.И многие просто подумают, что ваша страница / элемент страницы сломан.

А как насчет сенсорных экранов? В то время как появление умных мобильных технологий нормализовало жесты бокового смахивания (глядя на вас, Tinder), пользователи, естественно, будут прокручивать мобильный веб-сайт вниз, если их не попросят. Поэтому обычно лучше использовать вертикальную прокрутку как на настольных, так и на мобильных сайтах.

Обладает высокой стоимостью взаимодействия.

С точки зрения UX, стоимость взаимодействия — это количество усилий, которые требуется пользователю для выполнения действия, такого как взаимодействие с элементом страницы.Стоимость взаимодействия состоит из (1) того, насколько усердно мы должны думать о задаче, и (2) физических усилий, необходимых для выполнения задачи.

Вертикальная прокрутка имеет низкую стоимость взаимодействия. Опять же, мы этого ожидаем, поэтому нам не нужно думать, чтобы это сделать. Кроме того, с точки зрения эргономики можно выполнять вертикальную прокрутку с помощью колесика мыши, трекпада или клавиш со стрелками.

Горизонтальная прокрутка, напротив, имеет гораздо более высокую стоимость взаимодействия.

Мысленно мы должны приспособиться к новой ориентации прокрутки и обрабатывать ввод контента с нового направления экрана.Мы не привыкли к дополнительной когнитивной нагрузке, и это негативно сказывается на наших впечатлениях от просмотра. Пользователи, которым нужна горизонтальная полоса прокрутки, также должны найти этот элемент, что требует дополнительной работы.

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

Его легко упустить или проигнорировать.

Эта проблема возникает из-за отсутствия ожиданий — если пользователи не знают, что на веб-странице появляется горизонтальная навигация, они не будут ее искать, упуская потенциально релевантный контент.

Четкие визуальные подсказки для горизонтальной навигации, такие как значки стрелок или информационный текст, могут частично решить эту проблему. Но есть шанс, что пользователи его упустят. Если они действительно замечают реплики, им все равно может быть непонятно, что на самом деле представляет собой скрытый контент.В этом сценарии большинство просто не будет беспокоиться о взаимодействии с контентом за пределами области просмотра.

Это создает проблемы для доступности.

Дополнительный размер прокрутки усложняет простую вертикальную прокрутку, особенно когда оба используются одновременно. Элемент страницы с горизонтальной и вертикальной прокруткой может дезориентировать, и его трудно использовать людям с двигательными нарушениями.

Для людей с физическими ограничениями, умственными ограничениями или просто меньшим опытом работы с технологиями горизонтальная прокрутка часто является ненужным препятствием, которого можно избежать с помощью лучшего дизайна.

Когда работает горизонтальная прокрутка

Учитывая проблемы с горизонтальной прокруткой, вы можете задаться вопросом, будет ли когда-нибудь такая функция полезной.

Но пока не исключаю этого. Есть несколько случаев, когда горизонтальная прокрутка может быть эффективной, если ее реализовать осторожно и точно. Давайте теперь рассмотрим его наиболее распространенное использование:

Чтобы скрыть вторичное содержимое

На любом веб-сайте вы хотите минимизировать количество прокруток, которые пользователи должны выполнять, чтобы достичь желаемого контента.Здесь может пригодиться горизонтальная прокрутка: вы можете сэкономить вертикальное пространство страницы, разместив специальный элемент, который показывает связанный контент из горизонтальной прокрутки.

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

Для отображения предложений по категориям

Кстати, контейнеры с горизонтальной прокруткой полезны для сегментирования контента по категориям.Пользователи прокручивают по вертикали, чтобы найти интересующую их категорию, а затем вбок, чтобы найти конкретный продукт, видео, статью или другой тип элемента в этой категории.

сайтов электронной торговли используют этот метод для разделения своего каталога на типы товаров. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:

Источник изображения

Также обратите внимание, что в этом примере предлагается альтернатива прокрутки — кнопки со стрелками.

Для навигации по большому изображению или визуальному элементу

Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите уместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, — все это представляет собой проблему дизайна. Чтобы помочь пользователям ориентироваться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.

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

Рекомендации по горизонтальной навигации

  1. Избегайте горизонтальной прокрутки на полных веб-страницах.
  2. Включить другие методы взаимодействия.
  3. Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
  4. Сделайте вариант горизонтальной прокрутки визуально заметным.

Итак, вы думаете, что горизонтальная навигация имеет место на вашем сайте? Вот несколько рекомендаций, о которых следует помнить:

1. Избегайте горизонтальной прокрутки на полных веб-страницах.

Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на всей веб-странице. Нарушение этого правила оттолкнет большинство пользователей.

Если вы хотите, чтобы разные разделы вашей главной страницы переходили по горизонтали, рассмотрите возможность запуска горизонтальной анимации с вертикальной прокруткой, как показано на этом впечатляющем веб-сайте дизайнерского агентства:

Источник изображения

В этом примере пользователь выполняет прокрутку вниз.Поначалу появление СМИ справа неожиданно, но вы быстро улавливаете, что происходит.

2. Включите другие методы взаимодействия.

Даже если на вашей странице используется горизонтальная прокрутка, мы рекомендуем предоставить пользователям настольных компьютеров еще один способ раскрытия скрытого содержимого. Кнопка со стрелкой может иметь ту же функцию:

Источник изображения

Мобильные пользователи будут испытывать меньше проблем с боковым смахиванием, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.

3. Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.

На рабочем столе горизонтальные полосы прокрутки должны быть доступны в своих контейнерах. Горизонтальные полосы прокрутки должны выглядеть и функционировать так же, как их вертикальные аналоги, для единообразия дизайна. Избегайте нестандартных стилей полос прокрутки, так как они помогают и не должны отвлекать внимание

Есть несколько исключений для размещения видимых полос прокрутки. Если с обеих сторон контейнера есть кнопки, которые позволяют пользователям прокручивать, пользователи могут щелкать по ним вместо перетаскивания полосы прокрутки.Кроме того, не показывайте полосу прокрутки, если содержимое контейнера возвращается к началу в конце потока содержимого.

4. Сделайте опцию горизонтальной прокрутки визуально заметной.

Обязательно минимизируйте вероятность того, что посетители пропустят ваш контент, сигнализируя о возможности горизонтальной прокрутки.

В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить свои прокручиваемые контейнеры так, чтобы при наведении курсора мыши появлялась горизонтальная полоса прокрутки.

Или попробуйте показать фрагмент скрытого содержимого в прокручиваемом контейнере.Сайты электронной коммерции, такие как Patagonia, делают это для списков продуктов — обратите внимание на миниатюры продуктов, торчащие с обеих сторон контейнера для дисплея:

Источник изображения

Наконец, можно использовать текст с инструкциями, например «Прокрутите, чтобы узнать больше». Попробуйте все эти реализации при создании прототипов и тестировании.

Как создавать контейнеры с горизонтальной прокруткой в ​​HTML и CSS

Когда элемент HTML — скажем,

— содержит контент, выходящий за его границы, это называется переполнением .Например, на стандартной веб-странице все содержимое ниже сгиба переполняется в окне браузера.

Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x .

Если мы присвоим значение scroll свойству overflow-x элемента-контейнера, браузер скроет содержимое, выходящее за границы, и сделает его доступным с помощью горизонтальной прокрутки. Чтобы это работало, необходимо указать ширину как элемента контейнера, так и дочернего элемента (элемента в контейнере).

Давайте разберем этот метод более подробно ниже.

Шаг 1. Используйте HTML для создания контейнера.

В этом примере я создал контейнерный элемент

шириной 500 пикселей. Внутри этого контейнера
находится дочерний элемент

с установленной шириной 1000 пикселей. Поскольку ширина

превышает ширину

, текст выходит за пределы правого края контейнера.

Вот HTML-код моего примера, как показано выше:

  





(Ваш текст находится здесь.Кроме того, вы можете размещать другие элементы в этом родительском div.





Шаг 2. Используйте CSS, чтобы указать заданную ширину для контейнера и применить поведение прокрутки.

Настройка overflow-x: прокрутка до контейнера

отображает внутри него полосу прокрутки.

Вот соответствующий код CSS для моего примера:

  
div {
background-color: lightblue;
граница: сплошной черный 1px;
высота: 100 пикселей;
ширина: 500 пикселей;
переполнение-x: прокрутка;
}
p {
width: 1000px;
поле: 10 пикселей;
}

Хотите дополнить причудливый элемент горизонтальной прокрутки? CSS Tricks, Codeburst и UX Collective — все они предлагают подробные руководства, на которые вы можете ссылаться для создания пользовательских контейнеров.

Как отключить горизонтальную прокрутку

Если вы не установите ширину дочернего элемента в его родительском

, содержимое дочернего элемента будет перенесено на следующую строку, избегая переполнения. Вы также можете установить для свойства CSS overflow-x значение hidden , что предотвращает перенос дочернего содержимого в его контейнер, но отключает боковую прокрутку.

  
div {переполнение-x: скрыто; }

Другое решение — установить ширины дочерних элементов на 100% .Это указывает дочернему содержимому перейти к следующей строке, чтобы избежать обрезки краем контейнера, независимо от ширины контейнера.

  
p {ширина: 100%; }

Боковая прокрутка

Для большинства из нас вертикальная прокрутка является рефлексом — просто она имеет больше смысла, чем ее горизонтальная альтернатива. Однако горизонтальной прокрутке все же есть место в современном веб-дизайне. При осторожном и преднамеренном внедрении этот метод может помочь структурировать ваши страницы и представить контент в удобной форме.

В конечном итоге вы разрабатываете для обычного посетителя, поэтому удобство использования предшествует любым стилистическим украшениям. Если у вас есть сомнения относительно элементов горизонтальной прокрутки, протестируйте их на реальных пользователях (а не на других дизайнерах). Если обратная связь отрицательная, не бойтесь прибегнуть к другому подходу.

Примечание редактора: этот пост был первоначально опубликован в сентябре 2020 года и был обновлен для полноты.

Пятнадцать веб-сайтов с использованием горизонтальной прокрутки

Наличие горизонтальной полосы прокрутки на веб-сайте обычно считается серьезным запретом.Эксперт по юзабилити Джейкоб Нильсон дал следующие рекомендации относительно полос прокрутки:

  • Предложить полосу прокрутки , если в области есть прокручиваемое содержимое. Не полагайтесь на автопрокрутку или перетаскивание, которые люди могут не заметить.
  • Скрыть полосы прокрутки , если отображается весь контент. Если люди видят полосу прокрутки, они предполагают, что есть дополнительный контент, и будут разочарованы, если не смогут прокрутить.
  • Соблюдайте стандарты графического интерфейса и используйте полосы прокрутки, похожие на полосы прокрутки.
  • Избегайте горизонтальной прокрутки на веб-страницах и минимизируйте ее в других местах.
  • Отображать всю важную информацию в верхней части страницы. Пользователи часто решают, остаться или уйти, основываясь на том, что они могут видеть без прокрутки.

«Избегайте горизонтальной прокрутки». Да, конечно, важно, чтобы не было случайной горизонтальной прокрутки. Это кажется очевидным, но для некоторых дизайнеров решение использовать горизонтальную прокрутку является такой же частью дизайна, как и выбор цветов.Просмотр веб-сайта с горизонтальной прокруткой немного похож на открытие многослойной брошюры, поскольку это может преподнести небольшие сюрпризы, если вы перетащите эту страницу.

Как вы увидите из примеров, которые я выбрал ниже, многие из этих сайтов предназначены для творческих профессий. Веб-дизайнеры и графические дизайнеры, фотографы и художники-граффити, а может быть, именно здесь этот стиль больше всего подходит? Вот пятнадцать веб-сайтов, успешно использующих горизонтальную прокрутку.

Эрик Йоханнсон имеет соответствующий слоган: «Этот сайт — тормоз.”

Портфолио Стефана Букко

Бэнкси

Рикардо Арсе

Голоса Бека

Дин Окли

Фрэнк Джакоббе

Коробочный дудл

Обмен стенами

Pixel Lounge

Паоло Боккарди

ругательства

Front End Design Conference — Конференция закончилась, но на сайте есть информация и загрузки о том, что произошло, и по-прежнему используется горизонтальная прокрутка.

По поводу уловок CSS Крис Койер (Chris Coyier) написал хороший учебник, объясняющий, как создать веб-сайт с горизонтальной прокруткой с помощью CSS.

Что вы думаете о горизонтальной прокрутке? Лучше всего сохранить его для творческих сайтов или мы увидим больше на обычных сайтах?

Использование горизонтального дизайна для веб-сайтов

Ник Робсон

Долгое время идея использования горизонтального дизайна для веб-сайта считалась основным табу веб-дизайна.Тем не менее, за последние пару лет горизонтальный дизайн стал популярным, и его часто используют для создания свежего, модного ощущения для веб-сайта, который хочет, чтобы его считали уникальным и модным.

И именно этим стал горизонтальный дизайн: уникальный и модный. Теперь это то, что ассоциируется с веб-сайтами, которые хотят почувствовать индивидуальность, оригинальность и современный стиль. Это означает, что это стиль, который дизайнеры должны учитывать при рассмотрении вариантов веб-сайта, которые могут выиграть от такого дизайна.

Почему вы должны его использовать?

Горизонтальный дизайн не только становится все более популярным, но и может быть действительно полезным. Горизонтальный дизайн дает дизайнеру большой контроль над тем, что пользователи видят в любой момент, позволяя им направить внимание пользователя туда, где они хотят. По сути, он способен направлять внимание пользователя так, как обычно не удается вертикальному дизайну.

Еще одним преимуществом горизонтального дизайна является то, что заставляет пользователя думать .Это противоречит интуиции для большинства пользователей, которым гораздо удобнее использовать обычный вертикальный дизайн. Заставить пользователей думать, что слишком , просто обойти сайт — это плохой дизайн, поэтому есть вероятность, что это может стать негативным моментом. Тем не менее, знакомство с чем-то новым, на освоение которого уходит всего пара секунд, может привести к ощущению исключительности, что может быть превосходным для того типа веб-сайтов, которые обычно предпочитают такой необычный дизайн.

Выполнение горизонтальных проектных работ

Как и все стили дизайна, горизонтальное проектирование можно сделать невероятно хорошо, а можно сделать плохо, если не проявить осторожность.Есть несколько распространенных ошибок, которые в конечном итоге могут сбить с толку пользователя больше, чем принести пользу, в результате чего они с гораздо большей вероятностью покинут сайт в разочаровании. Как и во всем веб-дизайне, пользователь должен иметь возможность без особых усилий понять, как все работает.

  • Прокрутка. Это одна из областей, в которых горизонтальный дизайн может потерпеть неудачу. Пользователи привыкли прокручивать вниз, и многие из них вообще не используют полосу прокрутки. Вместо этого они, как правило, используют свою мышь, пробел или клавиши со стрелками, которые не всегда хорошо работают с веб-сайтами с горизонтальной прокруткой.Некоторые сайты зашли так далеко, что полностью удалили полосу прокрутки, а это означает, что пользователям нужно какое-то время рутовать по сайту, чтобы понять, как куда-то добраться. Всегда оставляйте полосу прокрутки видимой, но также давайте пользователям какой-нибудь легко узнаваемый способ перемещения экрана. Веб-сайт Холлоуэя отлично справляется с этой задачей. Не только сам дизайн очень креативен и удобен, но и удобна в навигации. Горизонтальная полоса прокрутки включена, есть стрелки, на которые можно навести курсор, а при прокрутке вниз с помощью мыши страница перемещается в сторону.

  • Интуитивное меню. Некоторые веб-сайты с горизонтальной прокруткой полностью отказались от меню, и все можно найти, если просто прокрутить достаточно далеко. В этом есть положительный аспект: пользователи должны видеть практически все, но их внимание не всегда длится так долго. Важно иметь легко видимое меню, которое может быстро направить их к нужной информации. Это особенно важно для постоянных посетителей, которые могут иметь в виду конкретную страницу, на которую они хотят быстро и легко перейти.Этот сайт от Handmade Interaction демонстрирует отличное расположение меню и страниц. Меню приведет вас прямо к информации, и каждая страница пронумерована. Не только это, но и полоса прокрутки внизу все еще включена, что хорошо, потому что прокрутка на этом может быть немного лучше.

  • Внимание! Основная причина, по которой используется горизонтальный дизайн, заключается в том, чтобы привлечь внимание пользователя и сразу вызвать ощущение чего-то отличного от обычного.Это не тот дизайн, который подходит для приглушенных корпоративных веб-страниц. Он должен иметь блики, и большинство горизонтальных участков делают это. Они имеют тенденцию быть красочными или, с другой стороны, иногда не имеют почти любого цвета, но в художественной манере. Они также часто внедряют некоторые из последних достижений веб-дизайна (если вы хотите быть в курсе последних достижений, серия Flippin ’Awesome« Best of »- отличный ресурс для информирования дизайнеров и программистов). В любом случае, их просмотр немедленно оказывает влияние, а если все сделано правильно, у пользователя возникает желание глубже изучить то, что может предложить сайт.Lucuma Audiovisual имеет незамысловатый дизайн, который сразу привлекает внимание пользователя и производит впечатление, но при этом прост в использовании и обеспечивает быстрый доступ к необходимой информации.

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

Заключение

Горизонтальный дизайн не следует игнорировать серьезным веб-дизайнерам, особенно с учетом его растущей популярности и вероятности того, что рано или поздно вас попросят разработать что-то подобное.Однако важно, чтобы дизайнер помнил, что каким бы привлекательным ни был сайт, он все равно должен следовать некоторым основным правилам веб-дизайна: он должен быть простым в использовании, оказывать влияние и доставлять намеченную информацию.

Брайан Ринальди — основатель Flippin ’Awesome. Брайан работает менеджером по контенту разработчиков в Telerik (хотя этот сайт не связан с его работодателем), сосредоточенный на том, чтобы команда по связям с разработчиками создавала первоклассный контент для сообщества веб-разработчиков.Ранее Брайан сосредоточился на публикации материалов для разработчиков HTML, CSS и JavaScript для Adobe Developer Connection в Adobe.

Брайан опубликовал множество технических публикаций на протяжении многих лет, выступал на многочисленных конференциях и мероприятиях и работал техническим редактором ряда книг.

Вы можете прочитать архив блога Брайана с более чем 9-летним контентом на сайте remotesynthesis.com (он все еще публикует сообщения, но нечасто). Вы можете найти полный список прошлых публикаций и презентаций Брайана.Следите за сообщениями Брайана в Twitter @remotesynth.

15 горизонтальных площадок и аргументы в пользу их создания

Интерес к прокрутке действительно изменился с тех пор, как мы могли использовать цветные полосы прокрутки в Internet Explorer много лет назад.

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

А как их винить? Это нормально. Это то, что ожидалось. И зачастую это проще всего реализовать.

Но где любовь к сайтам с горизонтальной прокруткой? Не многие люди создают их, в основном из-за трудностей в разработке и идеи, что горизонтальные веб-сайты менее функциональны. Аргумент против горизонтальной прокрутки звучит примерно так: «Зачем изобретать велосипед?» Но должны ли мы дать возможность горизонтальной прокрутки?

Когда и почему?

Горизонтальной прокрутке нужно дать шанс по двум основным причинам: (1) наше увлечение адаптивным дизайном и (2) горизонтальные сайты имеют место и цель, как и сайты с прокруткой.

Чтобы быстро понять причину, по которой он работает так быстро, давайте подумаем о том, как мы используем наши телефоны и столы, когда открываем на них сайт. В большинстве случаев мы переворачиваем телефон, чтобы он отображал наш контент в альбомной ориентации. Это означает, что мы переворачиваем наши телефоны, чтобы видеть как можно больше по ширине. Почему бы не использовать это, создав сайты, на которых можно будет таким образом просматривать и перемещаться? Подумайте, как мы смотрим видео в Интернете и как мы разрабатываем и проектируем сайты по ширине. Почему мы избегаем горизонтальной прокрутки?

Теперь, что касается моего второго пункта, я могу показать вам намного лучше, чем я могу вам сказать.Итак, давайте сразу же посмотрим, как следующие несколько сайтов отлично справляются с использованием горизонтальной прокрутки, чтобы быть функциональными и интересными.

Обратное бюро

На этом сайте портфолио используется комбинация вертикальной и горизонтальной прокрутки, чтобы продемонстрировать свои работы. Все более популярными становятся показы работ на своих экранах, не отвлекая их, потому что это просто имеет смысл. Этот метод навигации не только интуитивно понятен, но и создает для этого дизайнера прекрасное ощущение новаторства.

Гэвин Каслтон

В наши дни музыкальные артисты должны найти способ выделиться среди других. В такой наводненной индустрии художники должны создать полный пакет, который привлечет их внимание, от музыки до веб-дизайна. Гэвин создал замечательный веб-сайт, который интересен и идеально подходит для размещения всей его информации.

Бартл Богл Хегарти

BBH, безусловно, одно из самых известных креативных агентств в мире.Когда вы добьетесь успеха, они начинают создавать разные филиалы и офисы в разных частях света. Вместо того, чтобы создавать разные сайты для каждого местоположения, у них есть возможность проверить, что каждый из них делает по всему миру. Мне нравится горизонтальная навигация, потому что это похоже на то, что вы путешествуете в разные места и обратно.

Йенс Леманн

Йенс, очевидно, парень, имеющий множество титулов и носящий много шляп. Он не хочет смешивать их все вместе, поэтому вместо этого он создал дом в сети, который позволяет ему индивидуально демонстрировать то, что он делает.Горизонтальная навигация на этом сайте позволяет легко понять и увидеть преобразование каждого заголовка.

Джеймс Джойс

В отличие от сайта Reverse Buro, мы не можем видеть каждую часть работы отдельно на каждом экране. Однако я думаю, что это работает для Джеймса Джойса и его проектов, потому что все они очень похожи. У нас есть шанс по-настоящему увидеть и насладиться его стилем.

Здесь Дизайн

Как и вышеупомянутый веб-сайт, мы получаем горизонтальный сайт для демонстрации работы.Это отличный пример того, как сохранить горизонтальное выравнивание, а также добавить другую информацию, необходимую на этом сайте.

К. Л. Холлоуэй

Это одно из наиболее очевидных применений горизонтальной прокрутки, которое я когда-либо видел. Это довольно умно, потому что этот человек художник и живописец, который, вероятно, бывал в разных музейных экспонатах. Почему бы не сделать это в Интернете? Это на самом деле дает лучшее представление о том, чем занимается Холлоуэй и как он хочет, чтобы его видели. Мне очень нравится этот сайт.

WWF

Этот сайт был создан в прошлом году для повышения осведомленности о Часе Земли WWF. Вместо того, чтобы просто сделать сайт с графикой и контентом, они решили создать историю. Эта сюжетная линия прокручивается по горизонтали и очень напоминает перелистывание страниц в книге. Между тем, это очень забавный и интерактивный сайт.

Уровень блока

Нет, на этом сайте нет явной прокрутки слева направо. Однако есть полоса, которая позволяет нам видеть контент слева направо.Это очень похоже на гиперактивный слайдер, что имеет смысл, особенно на одном из любимых одностраничных сайтов.

Горячая точка

Hot Dot — компания, занимающаяся веб-производством, которая заявляет, что она чрезвычайно новаторская. С такими смелыми заявлениями лучше надеяться, что у них есть веб-сайт, подтверждающий это. К счастью, есть. Теперь мы привыкли к сайтам с параллаксной прокруткой, которые прокручиваются вниз, но на этот раз мы получаем сайт с параллаксом, который прокручивается слева направо. Он так же интересен, если не больше, чем его предшественник, и имеет очень новаторский вид.

Rezo Zero Interactive

Огромная часть веб-дизайна и разработки — это пользовательский опыт. Речь идет о создании интересного места в сети, которым посетитель будет легко и весело пользоваться. Rezo Zero — один из тех сайтов, которые имеют отличные эффекты, уделяют внимание деталям, имеют прекрасный макет и многое другое. Не говоря уже о том, что они отлично справляются с созданием линейной навигации по страницам.

В поисках идеальной поп-музыки

Если вы любите черно-белую фотографию и сюжетные линии в веб-дизайне, этот сайт для вас.Quest for the Perfect Pop в основном посвящен звуку, который издает ваше пиво, когда вы открываете его. Этот сайт — ода этому, создавая очень интересную сюжетную линию, которая будет доступна в ближайшее время.

Нервал

Как и на сайте выше, у вас есть возможность пролистывать эту работу, как будто вы идете по музею. Без очевидной графики это очень чистый и стильный способ создать это ощущение. У вас нет абсолютно ничего, что могло бы отвлечь вас от работы, кроме необходимого.Это отличный способ показать, как минимализм сочетается с этой техникой.

Myspace

Некоторые из нас достаточно взрослые, чтобы помнить «Myspace Tom» и аргументы, которые мы вели с нашими друзьями по поводу того, что они не входят в наши 8 или 16 лучших. Myspace решил вернуться, но решил замусорить страницы блестками и с него падают плюшевые мишки, а вместо этого у нас очень чистый и отзывчивый дизайн, который прокручивается слева направо. В то время как другие социальные сети развиваются вверх и вниз, Myspace делает что-то другое, создавая горизонтальную навигацию.

Giellesse

Giellesse — это дизайнерская мебельная компания с суперсовременным дизайном. Помимо потрясающей коллекции элементов, они создали действительно красивый веб-дизайн, который позволяет вам перемещаться от страницы к странице по горизонтали. Это очень похоже на перелистывание страницы на телефоне и, очевидно, будет хорошо работать на мобильных устройствах. Это смешивает старую вертикальную страницу с новым методом навигации.

Заключение

Очевидно, что нас учат простоте, но нам также говорят создавать решения проблем.Как видите, в сети явно есть место для горизонтальных сайтов. Если вы хотите что-то продемонстрировать или создать аккуратную и свежую концепцию, движение справа налево, а не вверх вниз может быть полезным. Как вы будете использовать эту технику?

Вы создали сайт с горизонтальной прокруткой? Вы предпочитаете горизонтальную прокрутку, вертикальную или вообще не прокручиваете? Дайте нам знать об этом в комментариях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *