Від автора: в адаптивному дизайні часто забувають про висоту. Сторінок на мобільних пристроях можуть бути дуже довгими. Потрібно з цим щось робити? При проектуванні адаптивних сайтів ми, як правило, основний акцент робимо на хороше форматування вмісту на всіх доступних екранах. І це правильно, так як горизонтальна прокрутка зовсім не user-friendly, тому задається обмеження дизайну на ширину вьюпорта браузера.
На маленьких екранах перше, що приходить в голову, це перенесення всього в одну колонку. Поки вміст не виходить за відведену ширину, і ви не подумаєте про висоту сторінки. У підсумку я помітив у себе і в інших в дизайнах, що мобільні сторінки стають досить довгими. Цією статтею я хочу хоча б просто донести до вас, що потрібно пам’ятати про висоті вьюпорта браузера при проектуванні адаптивних сайтів.
Розберемо приклад
Лендінгем Google Nexus – приклад досить типової, сучасної сторінки маркетингу. Хороший, чистий дизайн і адаптивність. Сайт можна відкрити на екрані будь-якого розміру, і він чудово отформатируется по ширині екрану.
Однак якщо сайт відкрити на своєму мобільному пристрої, ви побачите, що прокручувати його доведеться досить довго. На моєму macbook сторінка була 4 500 пікселів у висоту, що приблизно в 6 разів більше висоти вікна браузера. Для порівняння на моєму телефоні сторінка була 6 200 пікселів у висоту, що приблизно в 10 разів більше висоти вьюпорта. Це не погано, немає такого правила в дизайні, щоб сайти мали однакову висоту на всіх пристроях. Однак я думаю, що це цікаве спостереження, у якому слід розібратися.
Так в чому проблема?
Ще раз, я не вважаю, що загальна довжина сторінки сама по собі є проблемою. Я зазначив, що в множині адаптивних дизайнів цілеспрямована угруповання контенту легко виявляється на великих екранах. Коли ж на маленьких екранах контент перекидається в одну колонку, все починає плутатися. Наприклад, на сторінці Nexus другий розділ групує три апаратні функції. На великих екранах три блоки розташовані поруч, а сам розділ зазвичай дорівнює висоті вьюпорта. На мобільних пристроях за один раз видно тільки один блок. Під час прокручування вниз, ви вже не можете бути впевнені, що ці три блоки якось згруповані. Не кінець світу, але і не оптимально.
Є інші способи?
Не так давно я використовував висоту вьюпорта пристрою в якості приблизного керівництва того, як потрібно позиціонувати контент. Мета в тому, щоб вирішити проблему, про яку я говорив вище. Потрібно, щоб згрупований контент можна було переглядати, не перегортаючи екран, на всіх пристроях. У прикладі з Nexus альтернативний дизайн може виглядати так.
Сильно зменшивши розмір заголовка і превью фотографій, ми змогли вмістити весь контент з цього розділу в рамках одного вьюпорта. Це всього лише невелике поліпшення, але я виявив, що при такому підході за макетом легше стежити при прокрутці на мобільних пристроях.
Повернемося трохи назад…
У наведеному мною дизайні немає нічого незвичайного. Це лише один з безлічі можливих макетів, досягають однієї мети. А мета полягає в тому, щоб дати зрозуміти, що в певній секції контент згрупований. Якщо ви будете враховувати висоту вьюпорта у своїх мобільних макетах, вам слід вивчити всі способи позиціонування контенту. Залежно від контексту дизайну і типу контенту будуть краще підходити ті чи інші макети.
