I noticed StackOverflow appears to be targeting screen resolution widths of 1024px or more. I also checked Amazon, NBC, MSN, & AOL which target more lay users, and they all appear to be targeting the same width.
Is 1024px the current recommended width for web apps targeting the largest cross-section of users who use default monitor resolution/browser size?
Use liquid layout. Then you can easily accommodate everyone from ~800 to ~1600 width, and with a bit more work and care even lower-resolution devices too. This also gives users @1024 some leeway to zoom the page if they find the text too small.
Remember there'll be things like netbooks which don't have the big screens we expect today. You can get away with a horizontal scrollbar, but if you have to scroll the page just to get the main body of text in, you're lost.
Незамысловатый? Я думаю, что это грубоватый способ описать немытые массы. Я полагаю, что теперь у всех и их собак есть монитор шириной 1024 пикселя, благодаря подобным dell и другим ...
И называть их «немытыми» разве нет? ;)
– 26 сентября 2009, 18:06Максимальное значение таргетинга, которое я считаю своим "базовым", - 1280x1024, но гораздо более вероятно, что я выберу 1024x768.
Тем не менее, в моих текущих проектах я стараюсь сделать жидкую компоновку с минимальной шириной 800 для размещения нетбуков и обычно максимальной шириной около 1000 пикселей (обычно 970 пикселей). Конечно, у меня также есть возможность заниматься дизайном для себя, поэтому я имею честь сказать пользователям IE6, что им следует выполнить обновление, что значительно упрощает разработку гибких макетов.
Резюме:
Установите внутренние размеры браузера, равные 1250 x 668, чтобы удовлетворить потребности 92,7% пользователей.
Мне нравится ориентироваться на статистику. С этой целью в W3Schools есть хорошая страница Статистика отображения в браузере , которую они периодически обновляют новыми статистические данные о распространенности каждого разрешения экрана.
По состоянию на январь 2015 года 92,7% браузеров, посещающих страницы W3Schools, были прикреплены к дисплеям размером более 1024x768, хотя 39,3% всех дисплеев были ограничены высотой 768 пикселей (или ниже), в основном из-за того, что 33% из них имели Дисплей 1366x768
К сожалению, W3Schools измерял разрешение экрана , а не внутренние размеры, используемые для отображения содержимого веб-страницы. Было бы неплохо получить статистику по window.innerWidth пользователей и window.innerHeight вместо этого.
Поскольку их у нас нет, мы должны зарезервировать место для оконных украшений, которые могут быть больше, чем наши собственные, а также для виджетов браузера, которые могут в дальнейшем занимать место, предназначенное для визуализации веб-сайта. Кроме того, не все пользователи просматривают Интернет в развернутом веб-браузере, хотя я думаю, что мы можем игнорировать это, если предположим, что дисплеи с более низким разрешением будут иметь развернутые браузеры.
Windows 7, кажется, самым большим нарушителем съедает площадь экрана, поскольку я измеряю 30-40 пикселей для панели задач (мне пришлось искать снимок экрана, поскольку я не запускаю Windows). Firefox с заголовком, строкой меню, панелью закладок и строкой состояния потребляет еще 159 пикселей, в то время как более тонкий современный FF потребляет только 64 пикселя. Давайте воспользуемся тонкой версией и предположим, что будет потеряно около 100 пикселей вертикального пространства. Развернутые браузеры, похоже, не занимают лишнего горизонтального пространства, поэтому вам действительно нужно учитывать только полосу прокрутки, но я бы на всякий случай зарезервировал несколько пикселей для краев окна, в результате чего мы увеличим размер до 30 пикселей.
Несколько лет назад (когда я занимался веб-дизайном больше, чем сегодня), я установил в своем браузере внутренний размер 800x550 и убедился, что на большинстве страниц не будет прокрутки. бары. В настоящее время кажется, что его можно увеличить до внутреннего размера 1250x668.
Вы можете проверить свой внутренний размер, указав это в адресной строке:
javascript:alert(window.innerWidth + "x" + window.innerHeight)
Эти значения доступны только для чтения; раньше вы могли запускать что-то подобное для изменения размера своих внутренних размеров, но (благодаря оскорбительным рекламодателям) оно больше не работает :
javascript:window.resizeTo(window.outerWidth-window.innerWidth+1250,window.outerHeight-window.innerHeight+668)
Одно напутствие: тот факт, что вы предполагаете определенный размер, не означает, что вы не должны гарантировать, что ваш сайт по-прежнему работает с меньшим разрешением. Страница может быть некрасивой, но она должна быть функциональной!
make a good use of 960.gs and you will set everything that you need to start a good web site :)
(source: balexandre.com)
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
960 GS it's a lovely start, doing web or images, they have a complete template for almost any good design program (Photoshop, Ilustrator, Fireworks, InDesign, etc) as well a CSS generator and a Grid Overlay to help you with the website.
I use it and it's fantastic! check out the demo
Nettuts has a tutorial and video. WooThemes wrote a post entitled “Why we love 960.gs” and use it as a starting point for their WordPress themes. Spanish speakers can also check out tutorials by Jepser Bernardino and Miguel Angel Alvarez.
I do prefer 960.gs over BP, more templates, much cleaner and easy :) well, at least for me, eheheh.
– 26 сентября 2009, 15:10Blueprint - еще один фреймворк CSS, основанный на той же концепции. Мы добились большого успеха на PostRank.com
– 26 сентября 2009, 14:38у каждого свое мнение обо всем, я уважаю ваше, но я предпочитаю работать с 960 или BluePrint, чем делать все с нуля :) Кстати, вы можете изменить теги в любое время, если это так важно для вас :)
– 02 июля 2010, 07:42Перемещено из ответа @nitebrain: я считаю, что 960 - это нарушение предполагаемых принципов проектирования CSS. Это работает, но также и встраивание разметки в контент. Поправьте меня, если я ошибаюсь, но я думал, что цель CSS - отделить контент от макета, используя описательные теги CSS для описания «содержимого» контента. Что делает 960, так это использует теги для описания макета, засоряя контент встроенной информацией о макете, что, похоже, противоречит всей идее CSS. Возможно, мне не хватает CSS или 960. Пожалуйста, поделитесь своим мнением, если вы думаете, что я запутался.
– 02 июля 2010, 05:41Before sounding so condescending, you may want to read up on the modern user base. Netbooks. PDAs. Smartphones. Smartbooks (you do know what those are, being very sophisticated, right?). Programmers who have their screen in portrait orientaton. People who stack their windows side by side. Kiosks.
UPDATE As per conversation with John, I edited the question to change the tenor a bit to reflect his original intent. However, the original paragraph that I wrote is still true- I haven't seen the latest statistics but the days of "90% of users have AxB resultion/window size on their browser" are probably forever gone, what with wide screen laptops and mobile devices. Makes life more exciting for UI designers :)
Having said that, to develop a really usable web site, you need to couple flowing layout with, ideally, ability to use portlets and portal framework (think My Yahoo), so people can choose the page layout most comfortable for them.
1) I have a nagging suspicion (unsubstanciated at the moment) that YUI may provide an easy-to-use portals. 2) I edited the question - please check if it makes sense now (I’m ESL so the wording might be far from perfect).
– 26 сентября 2009, 15:07The term ‘unsophisticated’ was meant to point out that I’m not targeting the same audience as might be reading this question, but a more lay person. It was definitely not intended to be ‘condescending’, but if you have a better term which might communicate the same thing, feel free to edit.
– 26 сентября 2009, 14:03И фреймворк портала в данный момент выходит за рамки нашей компетенции… но все равно спасибо.
– 26 сентября 2009, 14:04Тем не менее, суть моего первоначального комментария остается неизменной - я не видел последней статистики, но дни, когда «90% пользователей имеют разрешение AxB / размер окна в своем браузере», вероятно, навсегда ушли в прошлое, что касается ноутбуков с широким экраном. и мобильные устройства. Делает жизнь UI-дизайнеров интереснее :)
– 26 сентября 2009, 15:10
I have edited the wording somewhat based on John’s further comments of what his intended meaning was.
– DVK26 сентября 2009, 15:08Presumably if you know how to resize the window you’re considered ‘sophisticated’.
– Pete Kirkham26 сентября 2009, 14:37My screen has a width of some 1900 pixels. My current browser window has a width of some 1100 pixels. You may be using the wrong assumptions here.
– innaM26 сентября 2009, 14:29