|Ideal Page Width for 1024 x 768 Screen Resolution|
It appears that most monitors display 1024 x 768 screen resolution by default. Is there an ideal Web page width for this screen resolution? We are currently at 1,009 pixel width, but our pages are a little too wide. I am think about 990 px or 980 px.
Using fluid layouts solves that problem, use 90% of the screen, and then it'll also expand for people like me that get annoyed with fixed with screen layouts when I have several screens with more than 1600px wide per screen.
Try searching for '960 grid'.
I also find that a centered 960 works well - leaves some room for Panels and such, too.
Here is some good info to read:
The answer to this question will always be debatable. You have to factor in everything... Layout (Centered, Left)?... Content (how much, how little)? Functionality (menus, forms, database driven content)? And much more. Me personally, I put a fixed width when I center the page and it's usually no more than 880px. But that is MY preference. If I have a left justified page with tons of content I tend to make it fluid at 85-90% wide... But then again, MY preference. So you see there are not rights or wrongs here really but take some of these suggestions into consideration, because there are some poorly designed websites out there.
To me the important metric is not screen size, but viewport size. (There's a big difference esp. if you consider not everybody uses a browser full screen (I virtually never do)
So, I tend not to cater for 1024x768 full screen but care about those stuck on 800px wide and those on really big screens who do not use a browser full screen (and e.g. 1600px wide only using half of the screen (yep that 800px wide caters for these really well).
So, I try to make sure if I go fixed width to stick to a centered 770px wide layout.
If you go fluid: take care to add min and max values as on a big screen in full screen mode (beyond me why one would want that) it makes for unreadable long lines.
I'm also seriously considering using CSS3 media queries on one site to have multiple layouts width-wise applied depending on active viewport sizes (iPhone over medium to really large screens). It'll leave IE users stuck on the medium setting no matter their viewport size.
The realy good thing is that it means the alternate stylesheets can go all out as IE won't be holding me back at all: pre-CSS multiple columns, real rounded corners, it's all possible.
|min and max values as on a big screen in full screen mode (beyond me why one would want that) it makes for unreadable long lines. |
I see this sometimes in corporate meeting rooms. So making sure a fluid layout works well on really large screens can help reach a very influential audience.
|To me the important metric is not screen size, but viewport size. (There's a big difference esp. if you consider not everybody uses a browser full screen (I virtually never do) |
I completely agree that viewport size is crucial for some users. I am sitting at a desk with a triple monitor set/up, have a slew of open applications, and not one of them is even close to 'full screen'. But I can also drag a corner of any app or browser if need be.
Have to recognize that I am a geek exception and that most of MY users are 1024 x 768 at full screen. I design to accommodate 1024 x 768 full screen with fluid layout as 'first priority' and 'best look'. Then I test a bit for where the design breaks in a smaller viewport, and make adjustments as needed. Don't worry too much about people on huge monitors, set at high resolutions, because they are rarely going to be near full screen, and will probably be CTRL+ or text zooming so they read the page - even with em or % font-size:
I do not support 800 x 600 at all anymore, but I do a lot of viewport testing at less than full screen. I little horizontal scroll doesn't bother me, but some designs breakdown a lot worse than others, and I have to watch out for that.