Slashdot Mirror
When will 1024x768 Replace 800x600 for Web Design?
Dr.X asks: "It seems as users get bigger and better monitors and video cards, the standard for web resolution is slowly approaching 1024. There is a fairly in depth answer over at Google stating that we are likely to be safe at 800x600 but when will we hit 1024 as the standard. What's Slashdot's opinion?"
Why do web designers still have to target a particular resolution? Back when image scaling sucked (well, it still does) and layout was done with a complex series of pixel-aligned tables, I can see why this was necessary. These days, CSS should allow web developers to scale their site to any resolution, or even any media! (Look at the w3c's CSS recommendations for screen and print media).
Web layou should no longer be done in pixels, period. This will even -look- a lot better, not to mention fit a lot more resolutions, once SVG or similar vector-rendering support is built into browsers. This shouldn't be far off for Mozilla, and IE will have to catch up.
Why does it matter? Just design your site so that it will scale nicely. Web pages don't have to be fixed rectangles like dialog boxes.
-- $G
One thing that should be considered in this debate is the rise of portable or handheld devices. While screens of 320x240 and smaller are a little too small to worry about,I suspect that VGA or 800x600 resolution devices will become more common. Since they are great as web pads it would be wise to consider them in any new web page design
At home I have 1280x960, at work I have everything from 800x600 to 1400x1050. However, I rarely have my browser window wider than 900 pixels. This browser window I'm using right now is 875 pixels wide. When I'm web surfing it is rarely the only thing I'm doing, don't make me use up the whole screen.
the question of whether the user's resolution is 800x600 or 1024x768 is irrelevant. i use 1920x1200 myself, but still keep my browser about the same size as if my monitor were set to 800x600. i just prefer it that way.
that said, what i want to see more of is that websites start to scale with my browser size. if more people used relative dimensions for sites, then i could set my browser to whatever size i want for viewing that site, and it would scale to fill my browser whatever its size may be. that's the onf the things i love about slashdot - it fits my screen be it 640x480 or higher.
however, on that same note, slashdot is still unusable on my PDA. why? because it only fits on 640x480 or bigger.
still, using percentages for widths and ems, exs, or percentages for heights is ideal if you want to maintain layout, because i've found that some users configure their UA to use miniature font sizes and small text areas need to adjust to fit them. so i've also started using relative units for my font size.
but in the case of a PDA, it's better to serve a simpler, smaller style sheet to make those users happy and keep the hits coming.
because, that's what it's all about isn't it? getting hits. nothing else really matters to the web designer.
grey wolf
LET FORTRAN DIE!
I would personally escort the idiots who have splash pages to their own corner of hell. Numerous times I go to sites and get a blank page. It turns out they decide that there is *no* way I can possibly experience their site without having both Javascript and Flash turned on. You see they use the Javascript to run the Flash. (I have a proxy that kills nosey javascripts). Feel free to do that in the depths of your site where Flash may be appropriate but preventing entry to the very front page is idiotic.
The other thing I detest is sites that decide how many pixels everything should be. I run Mozilla maximized to 1600x1200 on a 21" monitor. Numerous sites think I can read text a few pixels high. I can't. I turned on the Mozilla preference that lets me enforce the minimum point size.
Even the Google Answers site linked to screws it up. Their horizontal ad bar at the top gets vertically truncated since they decided to allocate a fixed number of pixels to it. Other sites have borders around the article as a fixed length and so I get articles abruptly terminating and have to drag the mouse on the text to see what is below the end of the arbitrary bottom border.
As everyone else says in these comments, stop trying to control stuff to pixels and instead specify the big picture for the layout. If you have to ask the question about what the best viewed size is, then your design is badly broken.
I don't know about "the majority of users" but my screen resolution has increased quite a bit over the years (800x600 to 1024x768 to 1152x864 to 1280x1024) while the sizes of the windows (especially browser windows) I use have remained relatively constant. The size of the browser window I'm most comfortable with is around 1000x750. If it gets larger I have trouble following a line of text from one side of the window to the other.
My OS has this very advanced thing called a "windowing system" that allows me to have multiple windows visible on screen (partially) behind one another. And no window needs to be full screen! In fact, most are smaller! So why on earth should designers relate the design of their website to the resolution of the entire monitor? Make something that scales to fit the window size your visitors use and leave it at that.
[rant]
Slightly related to the "what size should you design for" discussion are the abominations that are webpages that try to fit the window size to the size of their design. I'd like to see webdesigners that include such offensive resizing in their sites to be strapped to a rack that resizes them to every room they enter.
[/rant]
What most people refer to as a 'minimum' resolution is really a fixed resolution.
There are valid and reasonable cases for choosing a 'minimum' resolution, expecially when you are designing web apps or intranet apps that would be too awkward to use efficiently if you didn't have the on screen real estate.
However, the reason most people use a 'minimum' resolution is that they do not have the skills to make sites that can scale easily so they choose a size that they can work with. Because they don't scale, then they stay the same size no matter what the window size is. How many sites have you been to where, when you maximise the window, the content is only on the left 2/3 of the screen??
These are 'Fixed' resolution sites, not 'minimum'. And we will be stuck with them until these alleged developers actually learn how and why they should use the available technologies (CSS, JavaScript, etc). Stop accepting their 'excuses' for not using them, check if they are making these decisions because they aren't qualified enough to make the call.
First, a site must be attractive. You may be a purist who still thinks that pretty pictures and good design isn't necessary if you present enough information, but you'd be wrong.
Actually, this really depends on your audience. Go to this site or google or ebay and then tell me about attractive = requirement.
Third, you've got to make your site usable.
That's why you shouldn't design to a particular resolution your site becomes unusable when, say, I have two windows on my screen. Or I fire up the Treo... or for that matter, when my half-blind dad browses at 640x480 on his 19" monitor. As for all the tripe you dripped about style guides and the like, reality is that you can do an OUTSTANDING job making a site that looks good at many resolutions. The web is not print media. It is designed to scroll vertically (hence anchors and hyperlinks)... It can be resized and altered by the user when she goes into preferences and overrides your beautiful 9pt type.
-- $G
An excellent idea. Actually, I think the design treatments applied on Google's site are excellent, and you can bet they spent quite a bit developing it. They have a nice-looking, fast-loading logo that exists on every page, reinforcing their brand. It is further reinforced by using the logo as a navigational tool, with the "o"s scaling out as more and more results become available. Other than that, design is minimal, both to decrease loading time and to avoid distracting attention from the search results. Slashdot's design is also attractive, to a particular audience, and certainly makes each article, navigation section and callout easy to read, without making the site too busy. And guess what kind of people are attracted to the eBay school of design? The kind who buy things. Lots of things, the gaudier the better. These sites are attractive to their respective audiences. Regardless, the statement you quoted was not intended to say that "pretty pictures" must *always* be present. It was intended to refute the idea that they should *never* be present.
In an ideal world, you'd be correct... but it isn't an ideal world. If your site requires a significant amount of navigation, you're going to be stuck indenting all of your content at least 100-150 pixels to the left. If you use less than 400-ish pixels for your content area, your text becomes difficult to read. To compensate for the many different browsers and resolutions, browser-sniffing was invented. Thus, we can often get information about the user's machine before we even deliver the code to the user's browser, saving the trouble of scaling the site down by two thirds or more. Instead, we just deliver an entirely different template.
This line of thought begins to address something you mentioned earlier: target markets. If you know what your market is, you can design for it. If your market is corporate workers and executives, you design for it. If your market is mobile users, you design for it. If your market is IT professionals and geeks, you design for it. In any case, you need to know what to design for, and studies like the ones that spawned this article will give you a basis to start with. I'm not advocating that you should design sites specifically engineered to be unable to scale. Sure, it's possible to design sites that scale wonderfully. But it's also quite common to get a client spec that requires so much that there's no way it can scale gracefully.
The point of my post was to explain why knowing what the market is using is important, not to say that we should pigeonhole our sites for any standard "just because". That includes pigeonholing sites that "must be scalable in six dimentions". Sure, scalability is important, but it isn't always possible to do. It depends on your market, your requirements, and your client. Knowing all of these things requires research, which is exactly what this article has collected. That's why it matters, and that's the real point I'm trying to make.
As far as I can see, 90% of the problems with the way Web pages are designed comes from the code generated by the common tools.
The <a href="#" javascript="bla...."> stupidity, the "<table width=600" and suchlike fixed width items, all seem to be commonplace in code from things like Dreamweaver and such. Perhaps those programs can generate proper code, but it would seem the default settings don't (IANAWebDesigner).
If the companies that made the tools would just design the tools to generate proper HTML, that works on different resolutions and font sizes, that degrades gracefully when Javascript is turned off, and MAKE THAT THE DEFAULT SETTING, then a great deal of the problems would go away.
You should see my userContent.css file - it is full of overrides to prevent stupid web sites from using 400 pixel wide tables on my 1600 wide web browser.
I've worked with many UI designers - most of whom have the idea that they want to control everything to the pixel level. Then I take the mouse and attempt to resize their window. Either the window won't resize (they've blocked the message) or the window looks like crap. Designing ANY UI that will resize is HARD - you the designer have to convey to the program, somehow, that *this* item should grow, but *that* item should not. That is extra information that many lazy UI designers don't pass along - be they designing UIs for programs or for web sites.
www.eFax.com are spammers