Яка стандартна ширина веб-сайту у пікселях чи де є статистика?
Відповіді:
Немає стандарту, незважаючи на те, що більшість розробників припускають 1024x768 як стандарт.
Існує система сітки CSS з назвою 960grid, яка передбачає ширину корпусу як 960px, потім розбиває колонки на 96 стовпців з 10px, або 80 з 12px.
Проблема полягає в тому, що екрани ПК стають все більшими і більшими завжди, в деяких регіонах повільно, але є.
З іншого боку, у технологічних вершин у вас менше екранів у мобільних пристроях та нетбуках.
Справа з цією реальності може бути болючою. На допомогу є мультимедійні запити CSS. Крім того, ви можете використовувати посилання на теги (з rel handheld) для надання альтернативної версії мобільним пристроям.
Дотримуйтесь деяких посилань для вас
Яка стандартна ширина веб-сайту у пікселях?
Будь-яке число більше 0 і менше нескінченності.
Поточні найкращі практики для адаптивного веб-дизайну (RWD) - це підтримка кожного пристрою незалежно від його ширини в пікселях. Зазвичай це включає використання медіа-запитів для надання різних стилів для різних діапазонів розмірів екрана. Фактичні діапазони використовуються менше, ніж дизайн, який відповідає розмірам, а сайт підтримує функціональність за розмірами.
Користувачі мають велику ймовірність бачити різні розміри екрану, не замислюючись над цим, тому ви хочете мінімізувати кількість сюрпризів, коли вони перетягують вікно, щоб приєднатися до половини екрана, або якщо це нахилить свій телефон.
Деякі поширені діапазони ширини:
Ці діапазони настільки поширені, що я б сказав, що вони практично стандарт. Необхідно використовувати не всі діапазони, наприклад, сайт може мати ширину рідини для чого-небудь нижче 768, а потім фіксованої ширини та в центрі 768+.
Зважаючи на це, майте на увазі, що використовувані вами числа не мають особливого значення, якщо сайт функціонує на будь-якому пристрої, який користувач обрав для перегляду.
де статистика?
Тепер до складної частини - фактичні дані. Якщо ви переробляєте сайт, важливими є лише ваші дані. Те, що говорить Вікіпедія або Переповнення стека, або Google, або будь-який інший великий веб-сайт-що-можливо-список-аналітичні дані, не має значення для ваших даних для вашого сайту.
Якщо ваша статистика показує, що більшість користувачів в основному використовують певний діапазон ширини пристрою, ви, мабуть, слід зосередитись на тому, щоб спочатку користуватися цим користувачам. Все, що сказано: Якщо ваш дизайн правильно відповідає, вам не потрібно буде зосереджуватися на будь-якому конкретному розмірі.
Для нових веб-сайтів або веб-сайтів, які раніше не мали аналітики, уважно використовуйте підхід для мобільних пристроїв і обов'язково використовуйте аналітику, щоб можна було належним чином адаптуватися до бази користувачів.
Я здивований, що ніхто більше не думав згадувати розмір браузера від google .
Що стосується стандартів:
80% глядачів можуть працювати з шириною до 1000 пікселів, але ті, які можуть обробляти більше 1000 пікселів, часто це не так. З широкими екранними моніторами багато людей вирівняють свої вікна на половину екрана. Тепер, коли Win7 підтримує перетягування, він, швидше за все, стане ще популярнішим.
Щодо висоти: ваше перше враження для користувача знаходиться вгорі сторінки приблизно до ~ 600px. Однак більшість користувачів знають і очікують, що вміст впаде "нижче складки", і вони бажають і можуть прокручувати.
Якщо ви хочете отримати ширший 1000 пікселів, я настійно рекомендую флюїдний макет, щоб користувачі на нетбуках та менших екранах все ще могли правильно бачити вміст.
~ 960px має тенденцію до стандартизованої ширини, але насправді це залежить від змісту та стилю.
Минулого року я зробив невеликий тест за допомогою Google Analytics, щоб дізнатися, що таке середня ширина та висота внутрішнього браузера (що насправді бачать користувачі).
Як говорили інші, для цього типу речей немає стандартів. Хоча, ось декілька порад, які будуть або робити або гальмувати ваш веб-сайт:
Я завжди використовував або відсотки, або складання найгіршого сценарію: найменша роздільна здатність екрана, яку ви зазвичай збираєтеся, - це 800x600, і навіть це рідко. Щось нижче, можливо, на мобільному пристрої. Ширина 775 пікселів - це хороший засіб для використання, або просто 80%, якщо ви знаєте, що ваш веб-сайт все ще матиме привабливість, коли його масштабуватимуть на більший екран. Найпоширеніші проблеми полягають у тому, що текстовий вміст (коли його масштабують до 1600 пікселів) здається порожнім і коротким. Якщо ваш веб-сайт буде шириною 775 пікселів, це виправить це, однак це може виглядати непогано з масивним відкритим простором з обох сторін.
НІКОЛИ не змушуйте своїх користувачів прокручуватися вліво або вправо. Вирізання вмісту сторін - це найшвидший спосіб втратити потенційних клієнтів чи читачів.
Нехай ваша навігація знаходиться десь біля верху або в тому місці, де користувачі не потребують прокрутки, щоб знайти її.
І лише вміст поради; або мати високу графіку / низьку інформацію або високу інформацію / низьку графіку. Намагатися поєднати обох завжди виглядає жахливо.
Стандарт буде "якомога ширше / висота". Це залежить від екрану користувачів:
Корисно знати, наскільки популярні роздільні здатності екрана, а потім базувати свій шаблон на основі загального використання більшістю людей ... Особисто я рекомендую використовувати чуйний дизайн - таким чином ваш сайт працює на всіх пристроях та всіх роздільних здатностях.
Станом на січень 2013 року.
1366x768 25,4%
1920x1080 11,0%
1280x1024 9,7%
1440x900 7,3%
1280x800 8,2%
1680x1050 5,7%
1600x900 5,0%
1920x1200 2,9%
1360x768 2,1%
2560x1440 1,1%
Інше 11,6%
Google Analytics записує роздільну здатність екрана відвідувача. Ви можете легко створити власний звіт , щоб перевірити , які загальні розміри екрану з ваших відвідувачів. Ось статистика (топ-15) для мого веб-сайту за травень 2013 року:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Статистика різниться від сайту до сайту, залежно від типу трафіку, який він отримує, відповідно розробити відповідно. Я сам віддаю перевагу рідинним конструкціям із відсотковою шириною, 1000 пікселів min-widthта розумною max-width.
Насправді не існує такого поняття, як стандарт, і статистика повністю залежить від цільової демографії. Націлювання на технічних людей, як правило, призведе до кращого обладнання та більш високої роздільної здатності, менше технічного звороту. Але є телефони, нетбуки тощо, які мають значно нижчу роздільну здатність, ніж норма, в більшості випадків.
Для довідки я зараз припускаю мінімум 1024x768.
У будь-якому випадку ось деякі: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php
960 пікселів - це найбезпечніше, оскільки він працює на екрані 1024x768 і залишає простір для смуги прокрутки, а також працює на iPhone в альбомному режимі (адже піксель подвоює екран на 480x320 до ефективного 960x640, і не має прокрутки).
Зважаючи на те, що більшість сучасних широкоекранних моніторів мають роздільну здатність "1440x900" або ширше, я думаю, що ширина 1280 пікселів стає більше "стандартною", особливо якщо мова йде про показ зображень.
ПРИМІТКА: шириною 1280 пікселів була ширина багатьох старих екранів у співвідношенні 4: 3: 17-дюймовий та 19-дюймовий.