Яка "найпоширеніша" ширина та висота веб-сайтів розробляються сьогодні?

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

Ми будемо робити цей прототип простим, і тому не буде виявляти браузери, ширину екрана і т. Д. Отже, я зрозумів, що запитаю це по-простому з надією отримати просту відповідь:

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

Зверніть увагу, як я задав це питання:

Я не прошу найпоширеніших дозволів екрана.
Я не прошу найпоширеніших браузерів.

Хочу знати, які розміри вибирають більшість веб-сайтів щодо макетів фіксованого розміру. Я знаю, що люди зазвичай прокручуються, і тому висота може бути не частиною ~ 'стандарту'; в такому випадку я влаштуюся на найбільш поширену ширину.

website-design

— Джон Р
джерело

Відповіді:

Як ви сказали, немає стандартної висоти, оскільки це надзвичайно текуче, тому просто використовуйте все, що допоможе вам найкраще візуалізувати дизайн.

Для ширини 960 пікселів ширина, здається, є "стандартною" для конструкцій із фіксованою шириною. Досить поширеним є те, що веб-сайт був присвячений вивченню макетів такої ширини .

(Я припускаю, що ви не хочете, щоб хтось хизувався щодо використання рідинної конструкції?)

— Джон Конде
джерело

Дійсно не стандартна ширина, яку ви повинні встановити. Кількість людей, які користуються монітором 1024x768, різко скоротилася за останні кілька років, тому ширина 960 має менше значення. З появою такої кількості нових пристроїв (смартфонів, планшетів разом із ноутбуками та настільними комп'ютерами) вам слід створити ряд таблиць стилів для кожного випадку.

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

Перегляньте цю сторінку на W3.org на кілька прикладів - http://www.w3.org/TR/css3-mediaqueries/

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

— Карсон
джерело

Що сказав @John Conde Крім того, ви повинні враховувати, хто ваша цільова аудиторія. Наприклад, якщо на моєму веб-сайті є блог технологій або блог із гаджетами, швидше за все, моя цільова аудиторія трохи більш підкована в технічному відношенні, ніж звичайна аудиторія, тому я можу знімати для розміщення 1200+ пікселів. Або якби я зосереджував сайт / блог / форум для веб-майстрів, я б пішов трохи ширше.

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

Дві ДУЖЕ важливі речі, які потрібно пам’ятати ...

1) Якщо ваш дизайн може працювати з 900+ пікселями, то немає ніяких причин розтягувати його до 1200+ пікселів, навіть якщо ваша демографія може собі це дозволити.

2) Переконайтеся, що ви маєте належну структуру, яка може вмістити тих уерів, які можуть не мати вашого цільового дозволу.

— Аділь
джерело

Я не згоден з пунктом №2. Завдяки широкому дисплею з роздільною здатністю 1366 пікселів, можливо, найпоширенішою шириною на більшості ноутбуків, що продаються за останні пару років, ви не можете помістити два вікна 900 пікселів один до одного і побачити обидва одночасно. Якщо у вас є лише один 900-піксельний макет, ви витрачаєте 34% горизонтального простору з пробілом. У цьому випадку 1200px була б ідеальною шириною. Так що так, є причина розтягнути його.

— nhinkle

@nhinkle: Я не думаю, що ти насправді читаєш пункт №2. Яка відповідь стосується встановлення двох 900px вікон поруч? Крім того, будь ласка, прочитайте це питання належним чином, щоб зрозуміти, що просить Джон Р. Це не дискусія про надзвичайні випадки використання, наприклад, якщо ви хочете мати 2 900 пікселів вікна поруч, або в моєму випадку, щоб монітори 1600 пікселів (2 з них) зробити дизайн. Скоріше йдеться про переважну більшість користувачів, які не ви чи я ..

— Аділ

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

— nhinkle

@nhinkle: Ви неправильно читаєте мою точку №1. Якщо моя конструкція може легко показувати сайт у межах 900 пікселів, чому я б розтягнути його, щоб зробити його 1200px? Крім того, 13% користувачів досі мають роздільну здатність екрана 1024x768. Це невелика кількість, але його достатньо велика кількість, щоб відчувати їх незручності та слабкі продажі, кліки оголошень, потенційні клієнти чи будь-яку вашу бізнес-модель .... (дані цитуються з: w3schools .com / Browsers / Browsers_display.asp )

— Аділь

Я розумію вашу думку. Моя думка полягає в тому, що якщо ваші користувачі загалом мають достатньо широкі екрани, щоб використовувати макет шириною 1200 пікселів, ви повинні. Наприклад, сайти для обміну стеками оптимізовані для ширини близько 1000 пікселів, але багато користувачів запитують можливість переглядати джерело публікації та попередній перегляд розмітки поруч, що використовувало б більше горизонтального простору. w3schools не є репрезентативною вибіркою веб-користувачів, але, окрім цього, ця дискусія була для сайтів, де 1200 було б логічним, якби вона відповідала дизайну.

— nhinkle