800×600, should I really care?
Screens are getting larger and resolutions are adjusting accordingly. The days of the 640×480 screen resolution are behind us; are we at a stage that we can begin ignoring the infamous 800×600 screen resolution?
I believe we should approach screen resolution much like we do JavaScript. How many people have JavaScript disabled; come-on, do we really care? However, best-practice tells us to “degrade, degrade, degrade!!” We should be degrading our layouts for screen resolution just as we do for the technology running our sites. Build them for an optimal width of 1024 but let the layout accommodate a screen resolution width of 800 without a scroll.
While I don’t agree with everything UX Magazine does or how they do it; they have recently been the poster-child for this effect. Lets be clear about one thing: I throw around the term “screen resolution”, but I am really talking about browser dimensions. Needless to say, you can’t have a browser open wider than the resolution of its screen – we need to be focusing on user settings and how they are actually using their browsers.
I know a lot of you might disagree, but we need to start being more focused on “responsible design”. You shouldn’t do anything that alienates any of your audience, even it is only 1%.
Now keep in mind, I make a distinction between outdated technology (IE 5) and user settings. Most computers (monitors) minimum resolution is now 800×600, so I consider the 640×480 resolution ignorable (outdated technology). However, the 800×600 screen resolution is an option to almost 100% of all computer users and we should not be designing to ignore a setting that individuals may elect.
We should be designing optimal designs; you decide what optimal is. However, we should make sure our sites are accessible to those with disabilities, render well with Javascript disabled, as well as display logically without your CSS and images. We should even give attention to how our sites display on small resolutions as well as large.
I agree this isn’t always feasible, but the more we try and do this, the easier it is to implement in the future – almost effortless. My point is that we all create optimal designs – whether a user sees the optimal design or sub-optimal design, they should be having an excellent experience (visually and functionally).
How to change your website based on browser width:
The man in blue has an excellent tutorial on how to do this with a little CSS and Javascript magic.
The solution is to add a little vitamin J. JavaScript can tell you what the width of a browser is, then react accordingly. By default the content is displayed in a single column. Non-JavaScript enabled browsers, or lower resolution ones, will stay that way. But if you’re 1024-up, with JavaScript, an alternate stylesheet gets put into action. See a simple example here. I’d like to see tables do that.
- August 25th, 2006
- 49comments
- I am a proud member of the 9rules network
The best way to tell is to use Google Analytics or some other stats software, and see what resolutions your visitors are using.
For the sites I manager, 800×600 viewers are well under 10% of visitors, so I plan for 1024×768 or higher.
– Doug
I agree, I too use Google Analytics. The best practice is by far looking at your numbers and designing for the greater population. I am suggesting perhaps using a little DOM and building optimal designs for both (much like UX Mag).
I couldn’t care less about users who use small resolutions. If they aren’t willing to make their resolution bigger then to hell with them.
However, there’s one important thing people forget about. When people talk about browser sizes, they always presume the browser window is maximised. Not everyone uses their browser in full-screen.
Browser not maximized is just one more reason to use fluid layouts. It might be more difficult in terms of getting the things done the way I want, but it’s definitely the solution that is able to please the largest number of users.
Some people use 800X600 because they have difficulty reading the screen at higher resolutions.
Mike B and Andrea — perfect points! We can’t control resolution and more importantly than that, we can’t control how the users are using their browser on any given day. I think resolutions give us a starting point (something to work from). If we use fluid layouts or CSS adjusted layouts (based on browser width) then we have a greater chance of ALWAYS presenting a pleasing experience.
Why design for 1024, when I know I personally keep an AIM buddy list docked to the right side of my monitor at home — even though the stats show me on a 1024, I am not browsing with a 1024.
Let’s not get into the whole liquid vs. fixed wholly war, as there’s more than one way to skin this cat.
First… should you care? Yes. You betcha.
1. 800×600 resoultion still account for about 30% of traffic. That’s a big number.
2. As pointed out above, resolution means nothing, window size means everything. And a lot of people view with less-than maximized windows.
So, what to do:
Fluid is one solution. Personally, I’m not a fan for a variety of reasons, but it is an option.
The maninblue solution is proven, well-documented, and just flat works, so long as you have a reasonably savvy css person who can intelligently design the separate stylesheets.
Then there’s the ESPN solution, where tertiary content is held in the rightmost column, so the 800 screens show primary and secondary but require a scroll to view less-used items.
See… there are no problems, only solutions.
Tim, perfectly put. I think you hit the nail on the head. The answer to the original question is “YES” and we need to realize there are a variety of ways to accomplish this! It doesn’t matter how we do it, I just want to push for more responsible design — thinking of elegant solutions that make the experience pleasant for all.
This would be MUCH easier if Windows had an extremely easy way to scale icons and text. I know lots of people that don’t like the “tiny” text and icons. I know about the “use large icons” and whatnot, but users that don’t know the difference between small and higher-resolution sure don’t.
Smiley, good point. Another IE flaw to add to the list :)
Fluid layouts are excellent. Now that I have created a few and gotten used to the in’s/out’s I prefer them over fixed with.
What works for me is to simply design for the lowest resolution (ie 800×600) , then use javascript to tweak the layout for larger versions. Simmilar to the man in blue technique, but I try and let most of the liquid be universal and tweak the design at higher resolutions, rather than completely alter the layout based on resolution.
This way, in the event that a user with a high resolution comes, and javascript is disable… the site still remains quiet liquid just not as polished spacially.
A good example is better spacing for a horizontal navigation bar at higher resolutions. Just setting a fixed % margin rarely scales well with resolution.
Ross –> I agree! Great comment. Any examples you can share of these sorts of layouts you’ve created? Any tutorials that helped?
It should be noted, too, that the maninblue solution pays no attention to resolution. It is strictly dependent on true window size. Very nice.
I have 1280 by 800 resolution, but my browser is usually around 900 wide.
Personally, I keep my designs around 700 wide. If you’re going with a fairly standard two-column layout, that gives you 500 for the content column and 200 for the sidebar. I think this works pretty well for typical content. You certainly don’t want your main text stretched out over anything more than 600 pixels; that’s just hard to read.
Basically, unless you have some sort of special need (flash application, perhaps?), you don’t want your site to be more than 800 wide anyway. Shave off a few pixels to allow for the scroll bar and padding, and suddenly your site looks just fine even at 800×600 anyway (assuming a maximized window, which I think is pretty safe to assume at such an archaic resolution).
Kirk, I just built a site with a preferred width of 1000px wide, with a 700px-wide main content area.
The line measure is a near ideal 75 characters. I have a lot of white space, and paid careful attention to text size, leading and other typography matters.
The point is, there are no sweeping generalities like “you certainly don’t want your main text stretched out over anything more than 600 pixels.” That’s just not true. Optimal line length is a function of font size and many other factors.
Tim, good point! What is optimal for the design can definitly change based on many of the design elements.
Should you care about people using different resolutions and sizes than you, I would say yes. If you don’t build your site so that it is usable at various size all the way down it becomes one more reason for the world to ignore it. I would recommend that you use the web formats as they are built instead of trying for absolute placement, it seems the holy grail for designers but they rarely get it and spend a great deal of time worrying about it.
It really depends on what the site you are building is. If its a news format it should degrade on down to 50×50 to accomodate folks with last years PDA. If its a gaming site the highest resoluton and completely disregarding anything under the latest and hugest is probably fine.
There is a huge difference between designing for browser dimensions on a “screen” as opposed to different portal devices — an entirely different topic. Our style sheets should be dictating those accomidations accordingly.
Jakob Nielsen posted a “recommendation” to optimize for 1024 (but stay liquid) a couple weeks ago.
Everyone believes that Accessibility is a life or death decision, and that if you don’t make your site accessible for everyone then you are a lazy webmaster.
I consider Accessibility to be a trade-off between the usual systems stuff. Cost against Benefit. If you’re going to create a new way for your friends great-grandad to see the text because it’s too small for him then you’re probably going to pay more. Perhaps altering your layout plans for someone with a small resolution is going to cost money, but only please a few people who have the capability to change their resolution anyway.
Don’t get me wrong. I believe everyone should have the ability to view what’s on the Internet. I just don’t believe we should be going accessibility crazy and wasting money on our sites so that everyone can view them perfectly.
Seriously, how much harder is it to design for 800×600? While I agree that it costs more, it probably isn’t that astronomical a value (whether it’s time or money). If you were going for a 320×240 resolution, that might be “accessibility-crazy”, but 800×600 still deserves some lovin’, IMHO.
Admit it, deep inside, you have that fuzzy caring feeling for your clients. :)
“30%” ? Maybe for your site, but the internet average these days is more like 15% for 800×600.
However, much more important is that more and more people aren’t using their browser maximized, just as you said. It’s all about the window size, and the larger screens that people are getting these days make maximized windows terribly pointless and inefficient, as a result of that windowed browsers are generally set to a width between 800 and 1100.
Yup, the numbers I’ve seen bandied about are 12% and less.
Your points still apply, but 12% and dropping is less of a consideration than 30% for me. For example, I wouldn’t make 30% of people use scrolls for tertiary content if I could help it, but 12% is more acceptable.
It’s worth noting that nytimes.com and cnn.com both saw fit to increase their sizes, and their logs represent a pretty broad user base.
“1. 800×600 resoultion still account for about 30% of traffic. That’s a big number.”
I’d like to see a source on that. On any site I’ve ran the most I’ve ever had is around 5%.
Allrighty then, I can’t open up the stats on the dozen or so sites I’ve been tracking over the past few years, but they’re actually over 30 (albeit with an audience that’s very much not on the cutting edge).
W3schools lists at 20%, and their audience very much skews toward the cutting edge.
Upsdell is saying about 17%.
So yeah, it looks like in general, my stat was high, although the true number is well over 5, or even 12%.
But it’s a moot point anyway. Only you and your server logs know what YOUR stats look like, and even then the screen resolution is irrelevant… only window size matters.
“W3schools lists at 20%, and their audience very much skews toward the cutting edge.”
Hahaha, I just couldn’t help but laugh at that. With no disrespect to W3Schools at all, but their content is far from “cutting edge” or even cutting edge-ish. It’s up to date at best, and I highly doubt their audience “skews toward the cutting edge” — there’s just no valuable content to be found there even if you’re just a little bit cutting edge.
Anyway, getting off-topic. Moving on…
Allright Faruk, I don’t know what the hell your problem is today, since normally you’re a pretty smart and classy guy, and I’m quite sure you and I agree on pretty much everything that’s been said here.
But since you seem hell-bent on taking a few digs at me for some God-unknown reason, please allow me to clarify, AGAIN. I’ll try to do it slowly and clearly this time.
One source for window resolution stats puts 800 usage at 20%. Since their audience is developers, or at least would-be developers, those stats may not be trustworthy for a general audience.
The only screen resoultion stats that should make any difference to a developer is their own.
Even those are nearly meaningless, because screen resolution != window size.
I can’t believe I’m actually being asked to defend something so simple and sefl evident.
Especially by you.
Tim, I’m terribly sorry — I think you misunderstood my last comment. I was actually pretty much agreeing with everything you wrote, save for the one little remark about W3Schools. That’s all I commented on because I agreed on everything else, I felt you explained yourself very well and figured we pretty much landed on the same page.
My apologies if you feel (repeatedly) attacked. I definitely did not mean it that way at all.
No matter what size your screen, there is hardly any context of emotion in internet discussions. I don’t understand whining, for one, but it makes even less since to do it across your broadband connection.
Glad you guys could kiss and make up. Now, back to your fluid layouts. Go on..
Actually Colin, that neither Faruk nor I are particularly known for fluid layouts. I can’t speak for Faruk, but I’m not generally a fan, although there are times they work well.
I was just focusing on the topic. I think fluid is often necessary, and other times not. It’s silly to even ask the question, “Should I care about 800×600.” The only right answer is, “Well, it depends…”
Something that might not have been stated yet is that IE 6 and other browsers make it harder to design fluid layouts. Without max- or min-width, the designer is unable to limit the extremes to which their design can be manipulated. There has to be control, and currently, IE 6 and below require a nasty hack.
I only consider fluid when my target audience is largely middle-aged and less tech-savvy. My personal site, DirtySouthBMX.com, is aimed at my peers, so I’m not so conserned and I have it at a rigid 900px (redesign coming, but still fixed). On a pro-bono project, http://www.ccvoad.org/beta/ , 800×600 is given plenty of attention, as is font-resizing, screen readers, etc.
I’m the elastic layouts guy these days ;)
(but contemplating going back to a fixed, 800×600-friendly layout, actually)
Again, 800×600-friendly is largely subjective. What’s the criteria for friendly? Is it horizontal scrollbars?
I used to want to go bigger and bigger a few years ago, but the more I think about it, the more 800×600 and fluid makes sense. Granted there are reasons to break this rule, but for a garden variety site I think it’s fine. I have a pretty large monitor but rarely open it full screen—as someone mentioned above, text gets more difficult to read in wide chunks. Also, I’m a firm believer in delivering content to people in according to their needs. Recently, I designed a homepage for a very well-known global brand and many people were talking wide layouts, flash, video, etc. etc. The truth of the matter is not everyone around the world has a 20 or 30″ monitor, not everyone has a broadband connection.
That said, there are many other cases when your demographic are quite tech savvy and have enough resources to own 30-inchers. Even if this is true, I’m still one to side on caution as to not overload someone.
Great article by the way, a lot of interesting viewpoints!
There is no definitive answer here. It varies so much depending on the site’s target audience.
I run a website geared toward bike riders. Given the demographic being targeted there, resolution/screen-size/window-size isn’t as much of an issue.
Another website is for a local VOAD chapter. This demographic is largely 30s to baby-boomers, so I deployed a fluid option.
As a rule with any fluid option, min- and max-widths should be set to provide limits (in most cases).
I still think my sweeping generality is pretty accurate. You said your main content area was 700px, does that include the padding? If so, then your text isn’t even spread out over much more than 600px. If not, it’s still very close to my stipulation.
Furthermore, I completely agree that optimal line length depends on font size. It’s just that there is very, very little deviation on font size for body text. Almost every competently designed site uses text that is more or less the same size, and this means I can make fairly sweeping generalities.
As for the link you provided, I absolutely love reading about typography and I’m fairly certain I’ve visited that site before, but it’s always good to read it again.
On a side note, I find useit.com painful to use. The text is bland and much too large, and those background colors are just hideous. The worst page is the list (and I do mean list) of alertboxes. Sure they’re bulleted, but I think a little extra leading would make a world of difference; everything just flows together as an endless block of text. I’m sure he has some justification for it, but I call BS. /end rant.
Aside from resolution, it’s also good to take into account font sizes. I often increase the size of the font on my browser (Firefox and Mozilla let you increase/decrease the font size using Ctrl+ and Ctrl-) so that I don’t have to strain my eyes. It really irritates me when the layout of the page is completely destroyed by this. Sometimes the text immediately gets covered by images or boxes that refuse to move. If I’m looking at a long article, then I’m more likely to just give up and leave a site if it won’t let me view it the way I want to view it. To make your page resize better, use sizes relative to the font size (i.e., em instead of px). This doesn’t work so well with image-heavy designs, but I’m not a fan of those anyway. :)
You can also allow people to just turn off the styling on a page if you use CSS well.
Sometimes it’s hard for web designers to accept the fact that they’re still working with content, and it’s the content that’s truly important. A design that gets in the way of the content (whether that’s because the user just doesn’t like it or can’t read it, or it doesn’t adapt well enough to their environment) is a bad design. A good design will present the content in a pleasing way, but stay out of the way enough that the content still takes precedence. If the user has to choose between the content and the design, he’s going to choose the content. If you don’t let him, he’s going to choose neither and just leave instead.
problem is that there are a mess of 15 inch screens still out there with people viewing things at 800×600, i think we are about 2 years off from bumping our web standards to 1024×768…remember, you are designing for the majority, not for you.
All good advice. I appreciate the pointer to Blue Man. Thanks for taking the time to write the article.
I agree with Lance — the comments here are extremely insightful!! I appreciate the open discourse on what seems to be a highly subjective topic. I’d still like to try and influence as many people as possible to work towards degarding layouts that work on larger and smaller browser windows. The more we practice it, the more it becomes second nature — the long-term payout will be much more rewarding and worth the short-term lose.
Fluid with max widths is the way to go, that way your content wont look sh*t stretched out so far but will work good in all screen resolutions or people who make the window size small (cockheads haha :P)
James, interesting thought. Remember, max and min widths will not work well in older and non-standards compliant browsers.
I will say, there are often times I need to make the browser window small, even with a 1920 screen resolution — just have a lot of windows on my computer!
Please abandon 800×600. It’s a shi*ty resolution I last used in 1993. Yes, 1993. In 1994 I upgraded to 1024. That was nearly 14 years ago and we still got people using 800×600? WTF? What technology do we still have from 1993 in computers? CPUs? No. Video cards? No. Floppies? Not anymore. Yet we still have 800×600 fudging viewers? Get rid of them please… Half of them don’t even have a CSS capable web browser.. So I say screw ‘em.
HA HA! I hear you AngryDesigner — we no longer build for 640×480, I think within the next year or so you will see a large shift in corporate thinking towards 1024.
Vista will be a big help with this — much older machines that never upgraded to XP won’t be able to handle Vista and I think we will see a large machine upgrade this go-around than previously.
It’s clear that a major drawback to fluid layouts is IE’s lack of support for min- and max-widths. What is the hack to accommodate this?
There is a hack if you play with the margins and paddings (utilizing the negative only for IE). Little swamped right now and can’t write too much about.
I hate to send you off site, but post the question on CSS Beauty’s Skill Share, bet you have an answer with the hour.
[…] http://marylandmedia.com/2006/08/800×600-should-i-really-care/ […]
I know that this post is old (been almost 2 years since anyone ever even touched it) but I would like to say that I do think we should still care about good ol’ 800 x 600 resolution. Reasons:
I run several websites. Overall, over 10% of my thousands of visitors still use 800×600.
As mentioned above, not everybody keeps their windows maximized. I know that I often shrink my windows to a little under 800 pixels wide so that I can view 2 or 3 things at a time.
And it looks like mini notebooks, such as the Asus eee pc and the Dell Inspiron Mini are trying to get popular. Their lightweight portability is good, but they also come with low screen resolutions.
So for my own personal designs … I try to keep it looking good around 750 wide. I currently ignore smaller portable devices since less than .5% of my traffic comes from them. And I try to stick with fluid designs that max out around 1200.
Michelle,
Thanks for the comment, I think you make some strong and valid points … great addition to the conversation!