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!
A very good point that is also often overlooked. We now live in a world dominated by the Windoing Paradigm and don't expect to fill the entire screen with one 'form'. We use windows to organise information and often want to see, or access, many of these windows at once. A site that unnecessarily forces me to use a full screen, or use the dreaded horizontal scroll bar unduly may well be poorly designed.
:(
Perhaps more emphasis should be set on UI issues than making pretty glittery images when 'training' web designers. However, it may be possible to get them trained first,rather than letting web 'designers' pick up a book andtrain themselves.
While I know many excellent people who are self trained, they are not the norm
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.
Gamers generally have better gfx cards, and monitors - hence are more able to handle a larger res.
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]
I'm getting a bit older now and my vision isn't what it used to be. In the past, I would use at least 1024x768, but now I find myself using 800x600 simply because it's easier on the eyes.
It also depends on the most common size of the display device being used. You'd be surprised how many people are still using 15inch monitors.
So, who is your audience? If you expect a large number of viewers to be over 30, I would stick with 800x600.
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
As screens grow, windows do not. Instead, people are having multiple windows open side by side at the same time.
For example, my desktop is 2560 pixel wide and 1024 pixel high - two Flexscan L557 in Xinerama mode. You will not see me running programs full screen, not even full monitor most of the time. People having 1600x1200 are more likely to have two 800x1200 windows side by side than running one window 1600x1200.
Build resizing pages, do not assume full screen windows, and do not even ask for screen resolutions.
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.
I fully concur with many points made so far, both with the "Pro Standards" and the "Pro Designer" groups. Really it's a matter of pragmatism. All websites are designed with a purpose in mind. The real measure if success is not whether the site adheres to the standards, or whether the site is aesthetically innovative. Hardly. Does the site do what it was intended to do? Then it's a success, and all the arguments can go jump out of the window. What I have seen in the threads is a battle between "techies" and "artists". But the fact remains, and my professional experience has taught me, that we need each other. One person commented that is it rare to find a programmer (who knows the standards) who is also an artist. "Artists" weep and mock at sites made by programmers alone. Why? Because they lack imagination, vibrancy, and visual appeal, they use Times New Roman to excess, the sites are allowed to stretch to the point that scientifically calculated typographic rules about readbility are broken (note: readability and legibility are two different things - how many "techies" knew that?). "Techies" weep and mock at sites made by designers only. Why? Because they put form before standards, they put prettiness as their first aim and engineering last. They restrict and hold back on resolution because they think it looks good, and force you to "waste" most of your screen size and Standards are utterly unknown to them, (if dreamweaver don't do it, the designer won't produce it). The fact is that good web design requires adherence to many standards, only a fraction of which are covered by W3C. There are rules to visual appearance, layout, typography (readbility, legibility, meaning etc...), colour, photography, information heirarchy, semantics, the list goes on and on and on... Do the "techies" even know what an artist or designer means by each of those things? While the designer - alone - almost never produces the perfect site (to W3C standards), does the programmer - alone - produce the mainstream consumer marketable site more frequently? I think not. We need to expand our view of the web world. No one group has ever got it completely right. To win takes co-operation. I take the analogy of motor engineering. It's a good analogy, because it is about producing a consumer product that requires both aesthetic and technical excellence. The team involves many different kinds of expert, each highly qualified in their field, but no one expert can style, design, build, test destrucively, test non-destructively, ammend the style and design, rebuild, then advertise and market the product. It takes team work, and that requires respect between team members. I wold suggest it is the same with wb design. Each team member is vital, each skill cannot be done without. At the end of the day both "artists" and "techies" come under the business thumb, so what becomes the right "business" decision, is usually the one that we will all end up going with - which brings us right back to the beginning - the site that achieves it's purpose is the successful one - and all the arguments can jump out the window.
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
Designing around a specific resolution is simply BAD practice. Any web developer doing so should be shot. I used to do web development, and we followed some fairly strict guidelines.
A) Absolutely no horizontal scrolling required (this is the closest we got to designing to a resolution--this test was always done at 640x480 with a maximized browser window)
B) Never do any 'under construction' bullshit. If you don't have a page ready, don't link it.
C) Absolutely no flash, java, javascript, or other plugins. I REFUSE to use any sites that are completely flash-based.
D) Proper attention to contrasting colors, as well as keeping colorblindness in mind.
E) Don't specify fonts by name. Not everyone has, or can use, Avant Garde and Dingbats.
F) The page should render reasonably well under text-based browsers such as Lynx and links. It doesn't have to format perfectly (very, very difficult to pull off), but should at least be navigable, with all information visable.
G) Frames shouldn't be used.
H) Forcing a link to open in a new browser window should never be done. IF the user wants it in another window, or another tab, then let them make the choice.
I) Even though I say no Javascript, I'll re-iterate this one. If you design your site to open it's own new window, turn off the button bar, turn off the menus, resize itself, and/or disable right-clicking, go blow your brains out NOW and do the rest of us a favor. Right now. Do not pass go, and please make sure you use hollow-points.
J) The page should render correctly under, minimum, Explorer 3+, Netscape 3+, Opera, Konqueror, Mozilla/Firefox/Galeon, and any other web browser you can get your hands on. It won't always render identically, no matter what you do--but should remain usable, as properly formatted as possible, and fully navigable and visable.
All of the above issues are turning the Web into a mish-mash of unreadable, un-navigable garbage. If enough people refuse to stay on badly designed sites, the sites will die. Eventually, practices will change--hopefully.
The better question is "When will web designers break the mold of pixel size and start doing good designs with proper technologies so that pages look good on any reasonable device?".
... if I have a PDA with a 4:3 aspect ratio screen I would -love- to be able to tell the browser to scale down the images to emulate a resolution ... in the case of large 4:3 ratio resolutions you wouldn't even need to resample the image to get decent results, just display every nth pixel/row. It wouldn't look great but we might actually be able to see the page done by over-done designs.
Then again, I've been asking that question for about 7 years (94 through 97 were good years for resolution independent pages).
Make the design look good with -no- graphics and minimal tables. Then add the images to spruce it up for those devices that can view the images.
I'm not saying limit yourself to designing to text-based browsers, but there are numerous graphical browsers (PDAs, phones) that work better when the large images are turned off. I have seen many sites that do this well. On the other hand, there are sites like Bioware.com that barely load on a P3-800 with tons of RAM and a 1280x1024 display due to terrible design both with images and tables (I like bioware games, I hate their site).
There is an opportunity here for a PDA browser to help though
It is more productive to voice thoughtful opinions (reply) than to judge (moderate) others.
Virtual desktops, for those who don't know, are multiple desktops which are all active on your computer at the same time. You switch between desktops by clicking a pager or pressing a key (e.g. on my linux desktop I use F1-F4 to activate desktops 1-4).
The advantage of virtual desktops is that they let you group programs and switch between them consistently and rapidly. For example, I always put ssh sessions on desktop 1, web pages on desktop 2, mail windows on desktop 3, and programming IDE on desktop 4. Each group of programs is always in the same place every day, and I can switch to whatever I want very quickly. Compare this to the Windows taskbar, where the taskbar icons are never in consistent locations and you have to hunt and peck for the right taskbar icon literally every single time you switch applications.
Even the Mac Expose desktop is less efficient than the simpler alternative of virtual desktops, since it is very difficult under Expose to group applications together and to perform consistent, single-keystroke navigation of applications.
Windows is like one folder on one desk, and Mac is like shifting lots of papers around on one desk. Virtual desktops is like having several desks at hand and switching between them at the touch of a button. The last one is the only paradigm that I would consider truly designed for multi-tasking.
Bad ones are, though. Flash, JScript, DHTML, whatever....if it's done badly, with no thought to those who can't or don't want to wade through it, then it's BAD. Default to a simple graphic, display Flash *only* if Flash is detected. But that doesn't sell to the PHB and marketdroids.
I've seen numerous instances of good ones, though. A nice company logo that appears for a couple of seconds (with the ability to escape out) is fine. THat's a splash page. A 2 minute movie isn't.