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

Перша частина із двох про оновлену версію горизонтального сайту

Вперед!

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

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

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

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

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

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

  • Десктоп з горизонтальною орієнтацією екрану і увімкненими скриптами
  • Планшет з горизонтальною орієнтацією екрану і увімкненими скриптами

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

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

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

Вертикальна розкладка
Вертикальна розкладка сторінки
Вертикальна розкладка сторінки

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

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

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

А ось тут варто подумати... Можливо при зміні орієнтації екрану (для планшетів і десктопів) варто змінювати клас елемента html з special на common, тим самим змінюючи розкладку, замість теперішнього варіанту з медіа запитами orientation:portrait або orientation:landscape. Продуктивність і швидкодія якого рішення буде кращою? Але в одному певен — скоротиться десь на третину об'єм цсс коду, а це вже непогано. Необхідно провести тести для підтвердження.

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


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

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