Дозвіл екрану і розмітка сторінок

Резюме: оптимізуйте інтернет-сторінки під 1024х768, але використовуйте плаваючий дизайн, який правильно розтягується під будь-який дозвіл - від 800х600 до 1280х1024.

Один з найбільш поширених питань на моєму курсі по «Інтернету» - «Під який дозвіл нам варто робити свої дизайни?» Повна відповідь буде трохи хитромудрою, але основні поради очевидні:

* Оптимізуйте під 1024х768 - це найпоширеніший розмір екрана. Безсумнівно, орієнтуватися потрібно на дозвіл екранів вашої цільової аудиторії, і в майбутньому розмір буде мінятися. Розмір вже може бути іншим, якщо, скажімо, ви створюєте інтранет для компанії, яка видає своїм співробітникам великі монітори.
* Не треба створювати сайти тільки під певний розмір екрану, так як розміри екранів користувачів різняться. Самих розходжень дуже багато, так як користувачі не завжди «максимізують» свої браузери (особливо якщо у них великі екрани).
* Використовуйте «плаваючі» дизайни, які розтягуються під конкретний розмір вікна користувача (уникайте статичних дизайнів, які завжди одного розміру).

На сьогоднішній день близько 60% всіх моніторів настроєні під дозвіл в 1024х768 пікселів. Для порівняння - близько 17% виставляють 800х600, тому цілком очевидно, що не так важливо націлюватися саме на користувачів з маленькими дисплеями. Також очевидно, що не можна ігнорувати ці 17% і надавати своїм користувачам таку розмітку сторінки, яка вимагає більше вільного простору, ніж є у користувача насправді.
Оптимізація під 1024х768

Коли я говорю «оптимізація», я маю на увазі те, що ваша сторінка повинна виглядати і працювати оптимально на найпоширенішому дозволі. При цьому вона повинна мати гарний вигляд і працювати на інших розмірах, тому я і рекомендую «плаваючий» дизайн. Але він повинен бути кращим при дозволі 1024х768.

Три найголовніших критерію для оптимізації інтернет-сторінок під певний розмір екрану:

* Початковий огляд: чи видно користувачам вся ключова інформація без прокручування сторінки? Це є компромісом між кількістю показаних предметів і наскільки детально показаний кожен предмет.
* Удобочитаемость: наскільки легко прочитати текст у різних колонках з певною шириною?
* Естетика: наскільки добре виглядає ваша сторінка, коли у всіх елементів правильний розміри і правильне розташування? Чи всі елементи правильно шикуються - наприклад, чи знаходиться підпис поряд з фотографією, і т.д.?

Вам необхідно тримати в голові ці три критерії при всіх можливих дозволах, постійно змінюючи розмір вікна браузера від 800х600 до 1280х1204. Все повинно виглядати на високому рівні при всіх дозволах.

Також ваш сайт повинен працювати при більш маленьких і при більш високих розмірах, але такі ситуації менш критичні. Менше ніж піввідсотка користувачів працюють з роздільною здатністю 640х480. При цьому для таких користувачів ваш сайт повинен відображатися цілком прийнятно з допустимими відхиленнями.

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

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

У багатьох користувачів великі екрани. На даний момент близько 18% використовують як мінімум дозвіл рівне 1280х1024 пікселям. Відсоток користувачів з великими екранами росте, але не так як я б цього хотів.

Великі монітори - найпростіший спосіб підвищити продуктивність, і будь-хто, хто заробляє мінімум $ 50, 000 в рік, повинен мати дозвіл екрану не менше 1600х1200. Плоский дисплей з таким дозволом дешевше $ 500. Тому поки великі дисплеї підвищують продуктивність як мінімум на 0.5%, ви окупите своє вкладення менше ніж за рік (типові корпоративні накладні подвоюють витрати компанії на співробітника; завжди пам'ятайте, що в будь-якому підрахунку продуктивності необхідно використовувати вартість робіт, а не зарплату).

Особисто я використовую дисплей з роздільною здатністю в 2048х1536 пікселів, і я навіть не називаю такий монітор великим. Протягом наступних 10 років, я очікую, що використання 5000х3000 моніторів стане звичайною справою, як мінімум серед професіоналів.

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

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

У будь-якому випадку, потреба в новій парадигмі не змінить справжніх рекомендацій: оптимізуйте під 1024х768, але не створюйте дизайн тільки для цього розміру. Ваші сторінки повинні працювати на будь-якому дозволі, від 800х600 до 1280х1024 і більше.

Схожі статті