Життя за межами 960 пікселів: створення дизайну для великих екранів

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

У чому ж справа?

Ті з вас, хто полюбляє налаштовувати гнучкі макети (як ось я), знайомі з цим відчуттям насолоди, коли ваш дизайн вдало пристосовується до малих вікон. Те, що в одному випадку було чудовим макетом у кілька колонок, стає таким же чудовим, зручним стовпчиком читабельного тексту, без хаосу та зайвих дурниць. Та хто з вас задумується про вигляд свого дизайну поза межами комфортної 960-піксельної сітки?

Вірите чи ні, та є люди, котрі розглядають вашу роботу на кінематографічних широкоформатних екранах з високою роздільною здатністю (навіть для 27-дюймових моніторів Apple iMac та моніторів з інтерфейсом Thunderbolt крейсерською є роздільність 2560×1440 пікс.). Екрани комп’ютерів стають все більшими, то де ж опиниться ваш 960-піксельний гнучкий макет? Я відповім — він стане самотнім човником посеред океану.

Понад п’ять процентів відвідувачів сайту Webdesigntuts+ за останній місяць переглядали сайт на екрані, подібному до перелічених вище, з чим не можна не рахуватись.

І перш ніж ви переб’єте мене запитанням про макет цього сайту, можете не сумніватись — рішення уже в розробці!

Чому саме 960?

Схоже, що ми застрягли на ширині 960 пікс., яка стала стандартом завдяки використанню систем модульних сіток. Впродовж довгого часу складно було знайти екрани з роздільністю понад 1024×768 пікс., тож наші макети з фіксованою шириною, звісно ж, не могли вийти за межі цього значення. 960 пікс. дійсно є добрим рішенням для роботи, оскільки:

• воно дає змогу розмістити вільний простір (та заповнення кольором) з обох боків;
• його легко поділити на широкий діапазон колонок (2, 3, 4, 5, 6 та 8) з усіма можливими комбінаціями.

Проблеми виникли тоді, коли розповсюдився доступ до Інтернету з менших пристроїв. Більші макети складно коректно відобразити в маленьких вікнах, а оскільки матір’ю усіх наших винаходів є необхідність, ми логічно звернули свою увагу на вирішення цього питання. 960-піксельний макет все ще добре виглядатиме на більшому екрані, тож дизайнери часто сприймають адаптивний веб-дизайн як спосіб зробити свої макети сумісними з мобільними пристроями.

Мобільні пристрої насамкінець

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

/*all your initial styles go here..*/
body {
    width: big-ish;
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

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

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

Заповніть екран!

Очевидним рішенням є дозволити нашим гнучким макетам заповнити усю ширину будь-якого екрану, на якому їх переглядатимуть. Це ж так просто! Однак існує причина того, що Ви часто зустрічаєте обмеження максимальної ширини (max-width) в адаптивному css; створення дизайну для великих екранів вимагає детального аналізу.

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

Подаруйте свободу

Припускаючи, що ми маємо справу з адаптивною сіткою, ми можемо просто дозволити нашим колонкам пропорційно змінюватися по ширині і займати доступний простір екрану.

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

Існує чіткий критерій ширини текстового рядка у типографічній справі — щоб зберегти читабельність, слід прагнути, щоб ширина рядка становила від 45 до 75 знаків. Забагато знаків — і оку читача буде складно повернутися по тексту і знайти початок наступного рядка. Це можна побороти шляхом збільшення висоти рядка (інтерліньяжу), що досить легко здійснити у відповідних місцях через запити медіа-контенту, однак це ще не повне вирішення проблеми.

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

Я думав, що ми наближаємось до розв’язки, але коли ми згадали про збільшення інтерліньяжу, це привело мене до наступного підходу.

Розмір має значення

Послухайте, а якщо ми просто збільшимо масштаб усього макету? Звісно, це матиме сенс, якщо шрифт пов‘язаний з масштабуванням. У центрі цього процесу знову перебуває читабельність: зображення на великих екранах краще видно з більшої відстані. Нам найбільш зручно розглядати зображення під кутом зору бл. 30°.

Що у результаті означає:

Чим більшим є екран, тим більшою є дистанція для найбільш комфортного перегляду.

Якщо висловитися простіше — оптимальною відстанню для перегляду є відстань у 3-6 значень ширини екрану. Примітка: ці ілюстрації безпосередньо стосуються перегляду телепрограм, та принципи для комп’ютерних моніторів залишаються такими ж. Компанія Apple рекомендує, щоб Ви сиділи на відстані від 18 до 24 дюймів (від 45 до 60 см) від вашого монітора, залежно від його розміру. У рекомендаціях вказана відстань 15 дюймів (37 см) для найновішого iPad, 10 дюймів (25 см) для iPhone 4.

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

Тепер нашими друзями є умовні одиниці «em». Через встановлення свого шрифту, інтерліньяжу та й усієї базової сітки (це серйозне випробування) з використанням умовних одиниць вимірювання («em» чи «rem») дуже легко масштабувати весь макет у більшу сторону.

/*set initial value*/
html {
    font-size: 100%;
}
body {
    font-size: 0.875em; /*14px*/
}
    /*boost it when the time's right*/
    @media only screen and (min-width: 768px) {
        body {
            font-size: 1em; /*16px*/
        }
    }

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

Реорганізація

Розширені CSS макети поки що не ввійшли в тренд, але навіть у нашому світі гнучких макетів ми можемо реорганізувати макети без особливих труднощів. Якщо завданням нашої вправи є перетворити більшу частку тієї частини екрану, яка не використовується, на корисну площу, чому просто не повернути прихований вміст у поле зору?

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

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

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

Мені усе з собою!

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

Подивіться, як це все виглядає разом (я навіть вставив сюди мультиколонки CSS3 для більшої наочності).

Але…

Завжди є ще щось.

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

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

Візьмімо, як приклад, останні неофіційні зображення Windows 8. На малих екранах інтерфейс з «плитками» є надзвичайно ефективним:

На великій діагоналі такий інтерфейс лиш збиває з пантелику:

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

Першоджерело — «Life Beyond 960px: Designing for Large Screens».