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 have a fairly recent computer, I may have a bigger screen then 800x600, however I do not browse with the window filling the whole screen, I would hope that web designers (including myself) continue to make well designs that work at a smaller resolution.
Our site was designed for 1024x768, this site is running since January; the stats are since the end of March. It's a webshop (computer hardware) in the Netherlands. Numbers were found using a hidden frame that posts a form with values filled in by a bit of javascript.
Of course, designing for a fixed resolution is bad, should always look good, yadda yadda... It'll work on lower resolutions but you may have to scroll sideways now and then.
I believe posters are recognized by their sig. So I made one.
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.
Do not fix your web pages to a specific resolution. I hate those idiots, who think that world rotates around 1024x768 monitors. I'm surfing web with different kinds of devices and browsers (WAP browsers, text-only browsers, Avant Go etc.) and it pisses me off when I hit the page which can't scale correctly to my browser.
Content is what matters, not fixed-sized cool-looking layout (you know, it's possible to make nice looking, functional web sites with scalable layout).
I've noticed that the most notorious misusers of fixed layout are designers, who have used to design magazines. Apparently there is not enough education about web designing at art schools even nowadays.
Gamers generally have better gfx cards, and monitors - hence are more able to handle a larger res.
It's just as much a question of:
- when PHB's stop being paranoid about not reaching 0.2% of their possible clients
- when web designers start thinking out of the box, quite literally
Technically, pages can be made to scale, but it is not perfect. What is missing is the option to scale to a certain width and then stop. I usually have my browser about 1100-1200pixels wide when surfing. At 1600, scalable sites seem to wither. A design for a certain width (be it 800 or 1600) may technically scale, aestetically it won't. I haven't found a solution for it either, except to limit the width. There's no css for scale to 1200 and fix it at wider screens.
the pun is mightier than the sword
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]
One of my most important clients have been at 1024+ for some (7+) years, however they also have machines accessing at 640 and 800.
Worse yet most of the high resolution machines are stuck at Netscape 4.7 and color depth of 256.
We decided years ago to fore go glitz for operability, design from the start for backward compatibility and we've done some nice looking stuff that has stood the test of time.
Flash, Java-apps and the like are blocks that have to be replaced and don't work for everyone.
Designing for 800 or less means that screens should less likely to become over saturated with 'content' and hence easier to read on a screen.
The answer is to know you audience and be smart (not clever) about who you think you can discard.
Some fool slapped me up and locked my browser the other day for having javascript enabled while visiting his site, not even giving me contact information. Eventually after 1 1/2 hours of phone calls I got it, and his boss, and access restored for the paying customers of the company.
Be careful the web is a communications medium, not a game console (parts of the net and web can be, but the standard is communications).
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.
Having standardized sizes matters to develop a universally usable site. It's not just a marketing ploy; in many cases, it's a legal requirement. Before you complain about how little it matters and demand that people be flexible, consider the following:
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. Unfortunately, people still judge things by their looks. Even if you've presented your information in such a way as to make it extraordinarily easy to use and navigate, many people will never know that. Often, they'll see that your site looks like crap and figure your business is run the same way. Imagine yourself in the lobby of a company you're considering doing business with. Sure, the walls are sound and the furniture doesn't have holes in it. But if everything is cheap white plastic and particleboard, you're going to wonder if this company isn't just some fly-by-night operation. Thus, having an attractive site is important.
Second, the World Wide Web Consortium has very specific requirements for a page to be "usable". What happens if you don't do it there way? Well, you can be sued, for one thing. Also, your company will not be allowed to do business with the government, as you are most likely not in compliance with section 508, the same series of regulations that require wheelchair access, braille, and other accessibility assists for those with disabilities.
Third, you've got to make your site usable. Usability is not the same as accessibility. A 100% accessible site can be 99% unusable if it isn't clear what a user should do, how they should navigate, etc. Just because you've got braille on all of your stairways doesn't mean your users will know what floor to hit if you don't have a building directory somewhere, easy to find and easy to read. As such, it's important to make sure any idiot can navigate your site with ease. Do user testing. Record the sessions. Don't focus so much on what your users say, so much as what they do. I once had a user try to click on something that wasn't a link (but that could have been), then tell me he "should've known better"... but he didn't. (Naturally, it was a link an hour later.) ;-)
Once you've established that your site has to be cleanly and professionally designed, accessible and usable, you now have to make sure none of these elements breaks as you move from machine to machine, browser to browser, and platform to platform. You'll quickly notice that suddenly, you can't make your site scale as much as you want. You see that smoothly-flowing text on a 800x600 screen looks hopelessly cluttered on a 640x480 screen and ridiculously wide, yet short on a 1024x768 screen. You begin to develop visual guides that will work with lower monitor resolutions, yet still look professional on the larger screens. Your designers produce a style guide that begins to define specific column widths and template sizes. And you notice... that the web really isn't as scalable as you thought it was.
What the standard is matters because, if you want to be taken seriously or treated professionally, you had damn well make sure that your site is attractive, accessible, and usable. If not, you'll watch all of your competition march on by, taking your audience with it, regardless of whether you're out to make money or not. If your audience sees that someone else offers the same thing you do, but it's nicer and easier to use, they're going to go see that someone else, and that will be that. You had better take into account what resolutions your users have at their disposal, or your sites will cease to exist.
As more cell phones become web enabled there will be a push for web developers to design pages that cater to those consumers. how we will do that is any body's guess however I think that a lot of browser detection with a dynamic back end will be popular. Opera has a great cell browser that does a wonderful job of making most pages that I visit small screen compatible. but I think that users will push for more as the technology develops.
thats MHO.
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.
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.
There are still LOT's of users (specially on companies) who use 800x600 resollutions, and that will be the standard until nobody uses that...
Mind Booster Noori
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.
Even $*&%&* IT people who should know better don't change the default of 800x600, even if it's on a ^*%* high-end flat-screen that only looks good at 1280x1024.
And they ALWAYS leave it in 16-bit color.
This is at both of the IT jobs I've had.
What the %*&^ is up with that?
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
Just because I'm running a high screen resolution doesn't mean that I'm running my browser at full screen. I happen to like 1024x768 on my tiny 15" screen at work and I don't want to have to maximize just to see everything. Also, these are windows so they can be any size. If I want to make my browser 865x550, I can do that. The website should adjust to my window size, not the other way around.
Man... I run at 1600 x 1200 on a 17" sony trinitron monitor and can't wait to pick up a nice 21" viewsonic and run higher rez... Granted it is a pain when I visit web sites that insist on using tiny fonts, although I did see a really cool flash site that scaled everything to fit into whatever window you had opened, and I could read it great even when I had it scaled down small... I do a tonne of 3D work and I love my real estate. At work I am on three 21" viewsonics maxed out at 1900 x 1600 and always use all three for one application. Granted I have a system that can handle it and I am not losing my eye sight just yet...
On the other hand, my mother has difficulty seeing, due to cataracs, and she browses and does banking on a 800 X 600 laptop. So for private use hi res is something you set for web space the lowest common denominator is your best bet.
I am sure within a few years we will have higer res as standard, but again as more boomers lose their sight, sites with easier to read text will do better. I can see a standard of higher res but then we will all have to use H1 for paragraph text.
flinging poop since 1969
The beautiful part of CSS is that it allows you to use mathematics to scale. If I want the font size to be proportional to the screen size (for example, 10px at 1024x768 - 8px on 800x600), I can just use something like: (Yes, I am aware that this will not work, but its just for example purposes only)
and it will scale accordingly.
Frink: Nice try floyd, but you were designed for scrubbing, and scrubbing is what you shall do.
is due to their requirements to support multiple platforms and browsers and many legacy browsers. They still generate a text version of the homepage. They even support OS/2 to this day.
How do I know? I used to work for them as their lead HTML developer back in the day, and worked extensive for their website standards.
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.
Just follow standards so that your pages nicely scale, and you won't have to worry! A real-world example is that my parents' less-than-stellar eyesight requires that they keep their resolutions much smaller than 1024x768 meaning that pages of larger resolution require left and right scrolling. This not only is a hassle, but some of the intended "design" of the page is lost if the user can't see it all.
Make your page scalable, and you'll have a winner.
My mom always said, "Jim, you're 1 in a million." Given the current population, there are 7000 of me. God help us all!
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.
A: Hopefully, never. Actually, optimistically speaking, web designers will realize that they shouldn't even be aiming for or requiring a graphical resolution as not everyone uses a graphical browser.
Helpful links:
People who say "best viewed at/with" obviously don't get the web.
Nathan's blog
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.
You obviously have never designed any sort of commercial website. Sure, it's nice to be a preachy, didactic Slashdotter and complain about lack of standards, but a true commercial venture knows that you can't always rely on customers to know what they're doing, you can't rely on any consistency in the technology they use, and you can't rely on smart design to catch the user's eye.
Javascript is not a bad thing at all, but clearly is often used in bad ways. But you don't advocate taking guns away from the police just because they can be bad. It's useful for taking the strain off the server by doing client side validation.
Frames aren't always evil either. In fact, I use Squirrelmail most of the time - a very common PHP based IMAP webmail system, and the whole damn thing is in frames by default. I love it.
Many Slashdotters use Gmail now, and I'd like to point out that it's about 99% javascript based. Doesn't automatically make it bad, does it?
Opening a second window is OFTEN the preferred behavior. Sites that bring up massive search results - like an ebay type site, or an e-commerce site, or even a personals site like match.com, might prefer opening individual windows.
I can agree with some of what you say: no site should be fully plugin based, and that Flash, while cool, is contributing to the deterioration of the internet, and that horizontal scrolling is the work of the devil. But the rest of your points make you sound too much like a propagandized Slashdot standards fanboy who is hip to the latest trends of XML.