Simple web design, web development, information technology, & technical communication
Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.
What display (screen resolution) should I design my website for?
A nice web design is worthless if it can’t be seen by, in an ideal world, EVERYONE that accesses your website. A common question often asked by new web designers is, “What dimensions should I make my design?” Currently, the answer is simple: slightly less than 800 x 600 pixels.
Ancient monitor displays and why they annoy web designers
Not too long ago, a vast majority of users were viewing sites at an 800 x 600 screen resolution, with a fair amount using a 640 x 480 pixel display. Web designers had the conundrum of trying to create a site that was visually appealing while not alienating any users. A common 3-column layout, for example, would be tough, if not impossible, to pull off effectively in a 640 x 480 layout. Some designers chose to move forward with the 800 x 600 design and forget about everyone else. Others chose the 640 x 480, accomodating more users but limiting the versatility of their web design. A select few decided to use JavaScript to detect the user’s screen size and serve 2 different versions of the site depending on the user’s resolution. In all cases, either the user or designer was left frustrated.
Gotta love that technology… average screen resolutions are on the rise
The latest statistics from W3 Schools indicate that 69% of users are viewing websites at a screen resolution of 1024 x 768 pixels or higher in (July 2005). While the trend is certainly moving towards larger displays, 25% of users are still using 800 x 600 displays. Before you move forward with your giant, 1024 x 768 award-winning site design, realize that 1 in 4 people will not see the whole page. These same people will probably be so annoyed with scrolling horizontally that they will leave your site and not come back. We don’t want that, do we?
Design your site for 800 x 600 pixels
Luckily, this usability problem is easily avoided. If you design your site for 800 (width) by 600 (height) pixels, you can be sure that everyone will be able to see your website without missing any content off screen.
Actually, design your site for a slightly LESS than 800 x 600
Depending on your design and the browser your page is viewed on, an 800 x 600 layout can still push a small amount of content off to the right of the page when viewed at 800 x 600 resolution. This is usually a result of the browser’s scrollbar showing up on pages that require scrolling. An easy workaround is to simply limit the width of your design to 795 (or less) pixels. Even when the page scrolls, your content will not be hidden behind the browser’s scrollbar.
6 Responses to “What display (screen resolution) should I design my website for?”
Add a Comment
You must be logged in to post a comment.
Articles By Category
- ASP Programming
- ASP.NET Programming
- CSS
- Information Technology
- Internet Marketing
- JavaScript Programming
- Personal Computing
- PHP Programming
- Technical Communication
- Web Design
Stay Updated
December 9th, 2005 at 8:54 am
actually, i don’t subscribe to this train of thought
our office has over 40 mac computers of which the smallest screens are 19″ flat panels…
…and, imho, there are few things worse to look at than an upper-left anchored 800×600 website
i feel that 1024×768 ‘centred’ websites look the best (and are more useable) by far!
*remember that 800×600 was the native resolution for 15″ crt monitors (i used to sell them back in the early 90’s!
happy christmas to all
roberto
December 10th, 2005 at 2:22 pm
Roberto brings up a good point. 800×600 websites tend to look pretty lifeless on larger displays. At the same time, a Web designer can’t ignore 25% of the users who are still using that resolution. A good solution, as pointed out by Roberto, is to center your design– though center your 800×600 design. This way, regardless of a user’s screen size, the web site will appear to “fill” the screen. More importantly, none of your visitors will be left scrolling horizontally to read content.
February 13th, 2006 at 2:21 pm
i use 775×575 for home pages and 775x* for content ..
July 19th, 2006 at 7:15 pm
Hey Christopher,
I found this article while Googling for “the average user’s” screen resolution. My friend’s boss is telling him to redesign the company website for 1024*768, because 800*600 is “wasted advertising space.” It hurts just saying that.
Anyway, great site and great article.
July 19th, 2006 at 10:24 pm
Steve-
The latest statistics indicate that at least 20% of users are still on 800×600 or lower. 1/5 of users lost is plenty of people, especially on a high volume site. You could always design the site for 800×600 by keeping the main navigation and important content within the viewable area, but extend the design the extra 224 pixels and use it strictly for advertising space. This would solve both problems, and in fact many sites use this technique.
November 6th, 2007 at 12:46 pm
I must say, it even sucks to deal with 1024×768, I barely remember ever even browsing the web at 800×600. That would be the original chat room days, I think we have come a little farther since then. Today 25% of people use higher then 1024×768 according to your same source. Lets make beautiful things for these people, their reward will be another’s loss and soon everyone will be on the higher bandwagon ;) keep in mind the last comment was over a year ago, soon iphones will have better resolution then 1024×768 and hopefulyy they support flash soon, er?