Website Dimensions and Designing for the Web

Ensuring your visitors can see all of of your site without having to scroll horizontally is vital and so it’s important to design your site with this in mind. Over the years there’s been a steady increase towards a higher screen resolution and now 1024×768 is a fairly standard resolution to design to.

According to w3schools.com only 4% of users have their screens set to 800×600 and below, so is it time to design for those larger screen resolutions and forget about that tiny minority? Well, in most cases I’d say yes. Those visitors will still be able to navigate around your site and by designing for the smaller resolution you may simply not have enough room to fit all of your menu items and content without it all looking a little cramped and ruining the design and layout.

If you have a website already and have some comprehensive web statistics then it’s worth taking a look at what your real visitors view your website with and design your new site accordingly.

There are times where I would still design for the 800×600 display but that may be based purely on the amount of content and whether the design suits a smaller on-screen footprint. Remember, if you do go for a 1024 screen size then don’t feel you have to fill all of that space with content. Give your website room to breathe. The use of white space and larger margins can help with this and help the user find what they’re looking for with the minimum of of hunting.

The next thing to remember is the actual size of the space is not strictly 1024×768 – you have to remember the browser bar, bookmark bar, toolbar, status bar etc etc. You can’t really know what your visitor will have set but you can calculate the width of the browser. Remembering to include the scroll bar then make a note of the widths of the 2 most popular browsers on both Mac and PC.

Internet Explorer: Width = 1003px
Firefox (PC): Width = 1007px
Safari: Width: 1009px
Firefox (Mac): Width = 1009px

So with those figures, I’d then just give yourself a little bit of room and come out with a final width of 994px.

A really good idea, when designing websites, is to overlay your design on a real web browser. If you visit SizePuppy you can specify a browser size and SizePuppy will open a new window at those exact dimensions. Take a screenshot and use it in Photoshop (or whatever application you’re using). This will also give your client a greater idea of exactly how their site will look when finally live.

******************************
UPDATE 2/8/11
******************************

– It appears that the percentage of users using 800×600 is now 0% so you can forget about that one unless your site’s web stats say otherwise.

– I now use howbigismybrowser for the resizing of the browser window

– Also the fantastic 978 Grid System is a great place to find the dimensions of popular web browsers at different resolutions.