Joomla! Україна

Блоги — цікаві статті та записи про Joomla, програмування, верстку та інше.
  • Версія Joomla! 5.0.3 від 20.02.2024
  • 60 записи в блогах
  • 791 новини та статті
     

Розширення екрану і розмітка сторінки

11.08.2007, 17:21  |  Прочитано: 35496 раз  |  Шаблони та дизайн  |  Автор Jakob Nielsen (переклад Dutch) Друк | E-mail

(0 голоси)

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

Повна відповідь буде дещо замудрою, але основні рекомендації очевидні:

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

На сьогоднішній день близько 60% всіх моніторів настроєні під розширення у 1024х768 пікселів (детальна статистика приведена у моїй книзі на 226 сторінці). Для порівняння - близько 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%, Ви окупите своє вкладення менше, ніж за рік (типові корпоративні накладні подвоюють витрати компанії на співробітника; завжди пам’ятайте, що в будь-якому підрахунку продуктивності необхідно використовувати вартість робіт, а не зарплату).

Apple та Microsoft опублікували звіти, ціль яких була підрахувати ріст продуктивності від великих моніторів. На жаль, результати не дали гарних цифр тому що були присутні методологічні помилки. Мій досвід показує, що коли користувачі роблять свою роботу на великих моніторах, то приблизний ріст продуктивності дорівнює 5-10%. Ці відсотки переводяться в ріст продуктивності приблизно в 0.5-1% на одну людину, яка робить роботу, орієнтовану на використання монітора 10% від одного дня. Немає сумнівів, що великий монітор вартують своїх грошей.

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

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

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

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

Оригінал статті: Screen Resolution and Page Layout

Написати коментар