Сайт с горизонтальной прокруткой : версия 2

Первая часть из двух об обновленной версии горизонтального сайта

Вперёд!

Горизонтальный сайт — дубль два!

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

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

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

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

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

  • Десктоп с горизонтальной ориентацией экрана и включенными скриптами
  • Планшет с горизонтальной ориентацией экрана и включенными скриптами

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

  • Десктоп с вертикальной ориентацией экрана и включенными скриптами
  • Планшетп с вертикальной ориентацией экрана и включенными скриптами
  • Все мобильные устройства, смартфоны
  • Все ранее упомянутые варианты при выключенном джаваскрипте

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

Вертикальная раскладка
Вертикальная раскладка страницы
Вертикальная раскладка страницы

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

Блок-схема поведения раскладки
Блок-схема поведения раскладки

Как мы видим, сначала раскладка вертикальная по-умолчанию, корневом тегу html присвоен класс special, для браузеров с выключенным джаваскриптом. Идем дальше, если джаваскрипт включен — проверяем платформу (там небольшая штука с регуляркой, что проверяет юзерагент). При включенном джаваскрипт сработает наш сценарий и если наша платформа это мобильный девайс — оставляем класс special, если скрипт включен и платформа не мобильная (десктопы, планшеты) — меняем класс из special на common, что будет соответствовать горизонтальной раскладке. При выключенном джаваскрипт класс останется special и раскладка будет вертикальной .
Дальше все просто: для горизонтальной версии отслеживаем изменения ориентации экрана с помощью библиотеки Modernizr, рефрешим страницу и применяем стили, в медиазапросах которых значится соответствующая ориентация экрана orientation:portrait или orientation:landscape. Здесь мы класс корневого тега не меняем, а только "играем" со стилями элементов. Хотя стили элементов при портретной ориентации и элементов, дочерних html тегу с классом special — идентичные.

А вот здесь стоит подумать... Возможно при изменении ориентации экрана (для планшетов и десктопов) следует изменять класс элемента html с special на common, тем самым изменяя раскладку , вместо используемого варианта с медиа запросами orientation:portrait или orientation:landscape. Производительность и быстродействие которого из решений будет лучше? Но в одном уверен — сократится примерно на треть объем ЦСС кода, а это уже неплохо. Необходимо провести тесты для подтверждения.

Что же, описание принятых решений и логики работы сайта с горизонтальной раскладкой натолкнул меня на альтернативное решение переключения раскладок при изменении ориентации экрана и тему возможного рефакторинга. Было довольно интересно. А на этом теоретическая часть заканчивается и мы встретимся во второй части где рассмотрим код и к тому времени я надеюсь получить ответ на вопрос, а что же продуктивнее — управление раскладками из медиа запросов или изменение класса корневого тега.
Замечу лишь, что в обоих случаях идет перекрытие стилей более весомыми, поэтому интересным вариантом было бы разделение обычного и специального стилей и их подключение. Такая вот тема для размышлений и экспериментов. Так что до встречи и спасибо за просмотр ;)


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

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