Slashdot Mirror
Today's Average Screen Resolution?
ShadowDawn asks: "I'm looking to develop a website for average computer illiterate users and I'm just curious what the average users screen resolution is, now a days? I know 800x600 used to be the main size to develop for, but last I had seen 1024x768 was taking over. I was just wondering if anyone out there ran a 'normal' site that 'normal' people visit and would have some insight."
The funny thing is, resolution shouldn't matter much anymore. If you switch to a higher resolution, things shouldn't suddenly look a lot smaller, they should look sharper!
I suffer from attention surplus disorder.
We have about 50% at 1024x768 and about 20% at 800x600. The rest is a wide mix with the common ones being 1280x1024 and 640x480.
Please don't force me to maximize my browser window just to noodle around your site(s). Do your HTML/CSS so that your web pages adjust with the size of the browser window. Please don't hard code table sizes in pixels and other such idiocies.
Why not just try to make the site work on a wide range of resolutions, as that way you will not be alienating that many people. It is not impossible to make a website that will stretch to large resolutions, and shrink to fit the smaller ones.
Personally I think 1024x768 and 1280x1024 are the two important ones to make sure the site works properly at, as 1024x768 seems to be very popular, however 1280x1024 is the native resolution of a large number of TFT screens.
Some of your users will have huge 1600x1200 LCDs. Others will be running old hand-me-down 640x480 VGA monitors, or nice monitors with that stupid default resolution of Win95/98.
/any/ attention to "resolution".
But it doesn't matter. What you do is design your site in standards-compliant XHTML, using CSS for formatting (not tables), and let the user's browser render it however is best for that particular platform.
Web designers (and I am one) should not be paying
--
Twoflower
Don't design for a resolution, thats just as bad as designing for ie. Make a webpage, *TEST IT* in 800x600, 1024x768, 1600x1200, whatever, but don't design it for something. It should work fine in all resolutions, not having half the page wasted on blank space, or text overlapping, or any other problem that comes from bad web developers saying "thats okay, it works in what I designed it for"
Pain lasts, kid. Its how you know you're alive. Sometimes I think this growing up thing is just pain management-TheMaxx
Stop.
Please.
You are the bane of the web browser.
Sites should be usable and viewable with any resolution with any web browser.
We do not want an art exhibit, we want a web page. With stuff on it. Knowledge.
I for example, frequently browse at 320 pixels across. I don't visit sites that don't work at that resolution. My employer uses his Treo frequently and has even worse to say on that.
But my resolution? Well above 2000 pixels across.
See, just because some web browsers (the users, not the programs) browse at full screen doesn't mean everyone does it.
Web pages are not canvases- they do not have a size, and by artificially attempting to create one, you are doing the web a disservice.
On the other hand, by treating them as such, chances are you have so little to say that it isn't useful at all in which case myself, and other web browsers simply won't visit your site.
You will of course think it has something to do with the modernness of your design and make it even less usable.
The cycle will continue.
And nobody will notice.
W3 Schools doesn't just include browser stats. They also track metrics regarding screen resolutions currently in use.
a sp
http://www.w3schools.com/browsers/browsers_stats.
MTW
Why do you want to know the screen resolution? That isn't going to tell you what the viewport size is. Non-maximised browsers, browsers with sidebars open, larger than default scrollbars... there's huge amounts of ways in which the viewport size can differ from the screen resolution.
More importantly though, it sounds like you are trying to design a website with a fixed width. That's not necessary. Use percentages, and your layout will expand and contract to fit a wide range of viewports, without leaving an ugly and wasteful gap down the side in larger viewports and without forcing horizontal scrolling for smaller viewports.
I'd like to pre-empt the people complaining that longer line-lengths are harder to read by pointing out that there's evidence to suggest that those studies, while perfectly fine for print, don't apply to computer displays, and in any case can be mitigated by using max-width in ems on <p> elements in a user or author stylesheet.
I'd also like to pre-empt the people who say "but average users don't change the defaults!" by pointing out that, if true, would mean that the average user would be using a non-maximised browser window, as per Internet Explorer and Safari defaults.
Bogtha Bogtha Bogtha
If your intended audience is the average computer illiterate, you should probably expect plenty of people still operating at 800x600. I know a lot of people who are perfectly happy with their old K6-2 and crappy 15" monitor, and have no plans to upgrade while it still functions. It sounds like those people are your target demographic.
That said, here is my opinion on the metatopic of which this is a part: If you don't clutter up your site with a bunch of unnecessary formatting crap, flash nonsense, menus, table, frames, etc., it won't matter what resolution your users are running at. HTML reformats itself to fit the display quite nicely as long as you web developers allow it to function as it was meant to.
The vast majority of the time, "good design" means less stuff, not more.
Under capitalism man exploits man. Under communism it's the other way around.
You're going to use a bunch of tables for presentation as well, aren't you?
When sites are designed using a fixed width such as 800x600, the layout aften depends on assuming a small font size so that elements align properly. My banking site is one such web site. When the font size is increased, elements can overlap to shift to the next line, losing some of the contextual imformation of their placement. At worst the elements may be overlapped by other elements thereby obscuring whatever it is that you needed to see. I see this happen often with navigation items.
My recommendation is that while you are designing your site, use the keyboard shortcuts for font increase and decrease in Firefox to test and make sure that the page looks as expected. Another option would be to create another Firefox profile with the font set to 20 points and the minimum font size set to 14. This is what I use in my Firefox settings. I have a small laptop screen with a resolution of 1400x1050 which, when combined with my poor eyesight, has made a font size like this required for easy reading.
I also want to stress that if the layout of the page breaks a bit, that is fine. Most users that browse with a large minimum font size are used to seeing the page mess up a bit. There are sites such as Slashdot and Wikipedia that continue to look fine at any font size. Others might be using absolute positioning for DIVs and may have navigational and other elements obscured when the font is large. The important thing is to make sure that the elements on your page that make it functional still work. If something isn't aligned correctly but it's not a big deal, don't worry about it. If the navigation is only partially visible because of the larger font size, then you should fix that. For example, last.fm has some display problems when a larger font size is used, but nothing that impeeds navigation or general usability.
Finally, let me stress that you should avoid specifying your font sizes using a fixed method such as pixels or points. Instead, please use a relative font size such as "x-small", ems, or a percentage. There are still many users that use IE. IE will not resize fonts that use a fixed specification such as pixels and points, even when the font size option in the browser is changed from the default.
Slashdot: Failed Car Analogies. Amateur Lawyering. Anecdote Battles.
I see a lot of "if you're a good web designer, you won't care about resolution, and you'll be smart enough to make your sites resolution-independent" kind of comments in this mix here. Yeah, there's something to that. The web isn't the same as the printed page, after all.
But you'll notice that many--not most, but I'd honestly say the majority--of professionally-designed web sites that are text-heavy do use a fixed width for text blocks. Despite what some people here seem to think, sites that do that are not designed by ignorant graphic designers too stupid to use good design principles. They're designed by graphic designers smart enough to know that "the web isn't the same as the printed page" doesn't mean that everything we've learned in centuries of typography and layout is merrily tossed out.
One of the basic rules of typography is that line length affects readability. You can play around with the length for various effects, but a block of text that's wider than about 39 ems and longer than a paragraph or two is going to be harder to read. This still applies on the screen.
There's an implicit attitude among a lot of hardcore tech types that graphic design doesn't involve actual work -- we're just sitting around stapling Dreamweaver templates over your glorious PHP, and that any design decisions we make that aren't The Way Engineers Would Do It are proof that we're clueless. I'm sorry you guys resent any use of the web that couldn't have been done in HTML 2.0, but it's time to take your hands off the VAX keyboard and back away slowly.
I agree that when you're designing a web page, you shouldn't be thinking too much about the user's screen resolution, but the reality is that I'm probably not going to be designing my page so it will fill up your 2048x1536 display; I'm going to be designing my page so it's going to be readable on your 2048x1536 display. And that may just mean designing for a specific width. Get over it.
You're right -- it's hard to do bad design with CSS. What's your point?
I said nothing of the sort, and that's factually ridiculous, but let's move on the the real crux of the matter:
I'll presume that you're talking about layout columns, similar to those slashboxes next to the comment you're reading now. And in that case, you still don't have a reason to use tables: five-year old CSS can put out a clean-looking layout just fine with DIV tags.
Yes, I'm talking about layout columns, similar to what slashdot uses, but you're missing the point. _Stylistically_, they don't operate the same as a table cell; the bottom edge of the div ends when the content ends, and thus doesn't line up with the bottom edge of divs next to it, so while you can layout content somewhat similarly horizontally, vertically, you cannot, say, place something at the bottom of a div and have it be at the same level vertically as something at the bottom of a div next to it, if they have different amounts of content. You also cannot STYLE them similarly, and have borders and such line up, because of the same issue. And if you have a border between them, it'll stop when the content stops, thus producing the need for all sorts of column-related hacks that you'll find at various CSS design sites. This is a hot topic in the CSS design world, so I'm going to assume you're not a professional here, or you'd know what I was talking before this. Just trust me here - divs do not act like table cells, though they have some traits in common.
The worst part of this is that this isn't a CSS implementation problem on the part of browsers - this is an intentional design aspect of CSS which is pretty ridiculous. Until CSS can truly let us do the same things table layout does, _some_ designs (not all) will require table layout unless you resort to hacks (which I won't do).