Швидка навігація по сторінці:
- Про важливість питання
- Розраховуємо оптимальний варіант
- Чому часто використовується 960?
- Обережність з гумовим макетом
Існує загальноприйнята стандартна ширина сайту? Якою вона повинна бути? Чи є якісь особливості для різних проектів? Я ці питання ставив сам собі безліч разів, тепер спробую дати на них відповідь, виходячи з нагромадженого досвіду та маси прочитаної в Інтернеті інформації.
Про важливість питання
Якщо Ви задавали або задаєте собі таке ж питання, то це означає, що ви перебуваєте на правильному шляху, оскільки в дійсності ширина сторінки сайту має ключове значення в його дизайні.
Справа в тому, що якщо обрана вами ширина буде більше, ніж дозвіл екрану у відвідувача, то сайт в повному обсязі не поміститься в браузері, з’явиться горизонтальна смуга прокрутки. В результаті цього користувач не побачить частина інформації або йому буде некомфортно працювати з вашим проектом. Підсумок буде один — зменшення поведінкових факторів.
Якщо ви, навпаки, задасте надто малу ширину, особливо якщо буде дуже маленькою контентна частину, то, знову-таки, ваш сайт знову буде виглядати незграбно й некомфортно. Спробуйте перевірити сайт в різних дозволах і самі в цьому переконаєтеся.
Отже, якою повинна бути ширина сайту в пікселях?
Розраховуємо оптимальний варіант
Для того, щоб правильно відповісти на це питання, потрібно звернутися до статистики.
Для мого проекту на момент написання статті сервіс Liveinternet видавав таку статистику (показані рядки, що мають частку в статистикою більше 5 відсотків):
- 1366?768 — 23.7%
- 1280?1024 — 15.1%
- 1024?768 — 14.7%
- 1280?800 — 9.5%
- 1920?1080 — 8.4%
- 640?480 — 6.2%
- 1600?1200 — 5.9%
Як видно зі статистики, переважна більшість користувачів використовують монітори з роздільною здатністю шириною від 1280 пікселів і вище. Тим не менш, зверніть увагу на рядок, виділений жирним шрифтом: 14,7 % має дозвіл 1024 пікселів. Це в середньому кожен шостий/сьомий користувач — досить великий відсоток, який має сенс враховувати.
Виходячи з цього, що ширина вашого сайту не повинна перевищувати 1024 пікселів, інакше кожному шостому відвідувачу буде незручно користуватися вашим проектом.
Однак 1024 пікселя — це дозвіл монітора, а фактично площу сторінки в браузері менше, так як частина екрану з’їдає смуга прокрутки (скролл) — це близько 24 пікселів.
Отже, наша сторінка повинна відкриватися не більш, ніж на 1000 пікселів. Часто дизайнери або замовники беруть ще 20 пікселів в запас і роблять сайт на 980 px.
Таким чином, найбільш оптимальною шириною є 980-1000 px.
Чому часто використовується 960?
Якщо Ви звернете увагу на шаблони для WordPress (як, втім, і для багатьох інших CMS), то ви помітите, що багато з них орієнтовані на 960 пікселів.
Навіщо ж відхилятися від оптимального варіанту в меншу сторону? Тут слід зазначити, що 960 — це математично дуже «зручний число», так як, на відміну від 980, воно ділиться на кожне з цих чисел: 6, 8, 12, 16, 24 (і, відповідно, на безліч інших).
Це зручно для створення дизайну за так званою «сітці» (grid system) — коли при створенні макета він подумки ділиться на 6/8/12 і т. д. частин і всі блоки макета шикуються по цих лініях — виходить симетрично і красиво (докладніше про це написано на 960.gs і інших ресурсах).
Якщо ж ви робите або замовляєте дизайн з нуля і просто хочете, щоб, наприклад, контентна частина займала 600 пікселів, а праворуч був сайдбар — тоді вам обов’язково орієнтуватися на grid system і 960 пікселів.
Обережність з гумовим макетом
У якомусь сенсі рішенням розглянутої проблеми є гумовий макет — ширина сторінки розтягується під ширину екрану, тому заздалегідь враховані всі варіанти дисплеїв.
Однак, на мою суб’єктивну думку, необмежено гумовий макет — це зло, так як на дисплеї з роздільною здатністю більше 2000 пікселів весь ваш текст витягнеться в кілька довгих рядків, які буде важко читати.
Уявіть, що ви читайте книгу, в якій один рядок має довжину, припустимо, в сімдесят сантиметрів або в один метр. Зручно вам буде її читати? Думаю, що ні, адже не дарма сам по собі книжковий формат в середньому не передбачає більш 60-80 символів на одному рядку. Тому я таку технологію створення сайту не рекомендував би.
Тому, якщо ви робите або замовляєте гумовий макет, подбайте про відвідувача — поставте обмеження близько 1200-1300 px як максимальну ширину вашої сторінки.
