Website Design Dimensions

For those of you that don't care about the article and just want the formulas you can skip ahead. =)

"How do I calculate design dimensions for a new website?" is the question of the day.

To keep things simple I'm going to use a Windows user and a MacOSX user both running 1024x768. The reason I'm choosing 1024x768 is because it has been my experience that this is the most preferred desktop dimension used by internet surfers. And while I wish Linux had the majority of operating system saturation, it doesn't. So I'm sticking with Windows and MacOSX as those are the most commonly used operating systems in use today with regards to internet surfing. Okay, let's get started.

MacOSX

MacOSX users automatically lose available height from the menu bar and from the dock which take up approximately 22 pixels and 44 pixels in height each, respectively. So right off the top MacOSX users lose 66 pixels in available height from the canvas.

Windows

Windows users automatically lose available height from the task bar which takes up approximately 30 pixels in height. So right off the top Windows users lose 30 pixels in available height from the canvas.

Internet Explorer (Windows Only)

I'm going to use Internet Explorer 6 as the model instead of Internet Explorer 7 since Internet Explorer 6 takes up more real estate, making it safer to account for (it's the worst-case scenario and still the major player on the scene). Internet Explorer users automatically lose available height on account of the title bar, file menu, toolbar, address bar and status bar. These elements take up, respectively, approximately 20 pixels + 25 pixels + 40 pixels + 30 pixels + 30 pixels equalling a total loss of 145 pixels in height from the canvas.

Additionally if your design allows for the possibility of extra wide content causing a horizontal scrollbar then also add an additional loss of 20 pixels in height for that horizontal scrollbar.

But wait, there's more. Don't forget about the width losses as well. All Windows applications have a canvas border around them which causes an approximate 4 pixel loss of available width. Then there's also the vertical scrollbar which Internet Explorer draws whether your design requires it or not. This is another width loss of approximately 20 pixels. That's a total loss of 24 pixels in width from the canvas.

Mozilla Firefox

I've always been super impressed with Firefox's ability to render things the same across multiple platforms. Unfortunately we still need two sets of measurements; one for Windows and one for MacOSX. The reason is because of the file menu and the way that all application file menus get sucked up into the menu bar on MacOSX to save on precious application real estate. Hehe, they had to do something to make up for the dock height (which nobody ever hides because it looks so damn cool). Moving on ...

Mozilla Firefox (Windows)

Mozilla Firefox Windows users automatically lose available height from the title bar, file menu, toolbar (which includes the address bar), bookmark bar and status bar. These elements take up, respectively, approximately 20 pixels + 25 pixels + 36 pixels + 26 pixels + 25 pixels equalling a total loss of 132 pixels in height from the canvas.

Additionally if your design allows for the possibility of extra wide content causing a horizontal scrollbar then also add an additional loss of 20 pixels in height for that horizontal scrollbar.

And last but not least there are the width losses to account for. In Firefox scrollbars are not shown unless they're needed. Since we're basically designing for content we'll do it with the assumption that the vertical scrollbar is always going to be there. A good designer usually tries to avoid the horizontal scrollbars. There's a reason why we don't have "Page Right" and "Page Left" keys on our keyboard. So allowing for a width loss of 20 pixels will allow for the vertical scrollbar. Also, don't forget that this is still a Windows application so an additional loss of 4 pixels for the application border brings your total width losses to 24 pixels.

Mozilla Firefox (MacOSX)

Firefox on MacOSX is very much the same as Firefox on Windows minus the file menu. As mentioned before, the file menu of all applications (and I'm not talking to you Java app guys, so hush) in MacOSX get pulled out of the application canvas and sucked up into the menu bar. So take the previous 152 pixels lost in height and subtract the 25 pixels for the file menu. This leaves a total loss of only 127 pixels in height from our MacOSX canvas. Now while that was educational it really doesn't matter in the end if you plan to support both operating systems (remember, worst-case is what we're shooting for).

Safari (MacOSX only)

Safari is the preferred browser on MacOSX and, as such, deserves it's spotlight along side Firefox on MacOSX. Safari users automatically lose available height from the title bar, toolbar (which includes the address bar) and the bookmark bar. These elements then take up, respectively, 22 pixels + 32 pixels + 22 pixels equalling a totall loss of 76 pixels in height from the canvas.

Additionally if your design allows for the possibility of extra wide content causing a horizontal scrollbar then also add an additional loss of 14 pixels in height for that horizontal scrollbar.

And, just like we did for Firefox, we need to account for our width losses. MacOSX doesn't strip width away from applications by using application borders so we only need to concern ourselves with the vertical scrollbar, which we're going to assume will be present on at least a few pages of your website. A vertical scrollbar in Safari will lead to a width loss of 14 pixels.

Unknowns

There are also a lot of unknowns that I'll discuss really quickly just so that you don't come back to me and say "Why didn't you account for Formula XYZ.4³?". Let's just do a quick list of things I can think of that could commonly disturb our figures:

1. tabbed browsing - takes away height and applies to Firefox and Safari
2. status bar - not on by default in safari, but can be enabled and will affect height
3. ie toolbars - there's a butt-load of other things you can turn on and they'll all affect height
4. custom toolbars - these would include things like yahoo toolbars, google toolbars, alexa toolbars, and so on and they'll all affect your height
5. sidebars - particularly in firefox you can turn on bookmark sidebars, history sidebars, custom sidebars and so on and they'll affect your width
6. browser themes - these are absolutely the worst because they can affect every single element that I've identified in this article (width and height)
7. the list does go on

So what I'm really trying to get at is that to account for everything humanly possible would leave you designing thumbnails for your websites so just don't even try. Assume the standards are there (like I did in this article) and work from there. That should give you the most realistic measurements to draw from.

So the safest thing you can do is apply a marginal amount of play into your design. You never know when a new IE box model issue is going to surface, or a new version of Safari is going to mess up CSS borders or whatever. Just be prepared for the unknown. The easiest way to deal with this is to pad your design dimension estimates. I'll show you what I mean down below.

Results!

So now that you know how to go about calculating available website dimensions for your website designs let's put it all together. I like grids, so let's do a simple grid.

	IE WIN	FF WIN	FF MAC	SF MAC	ALL
640x480	616x285	616x298	620x287	626x324	596x265
800x600	776x405	776x418	780x407	786x444	756x385
1024x768	1000x573	1000x586	1004x575	1010x612	980x553
1280x1024	1256x829	1256x842	1260x831	1266x868	1236x809

I basically just took what we learned from the article and used that information to pre-calculate the four browsers we discussed and the four most commonly used desktop dimensions. Figure out what your target audience is, choose a desktop dimension(s) and shoot for the "ALL" column. I've also subtracted 20 additional pixels from this column to account for some of the previously mentioned "unknowns". To apply this information to other desktop dimensions just use the following formula(s) and you should be good to go.

	WIDTH	HEIGHT
IE WIN	original - 24px	original - 195px
FF WIN	original - 24px	original - 182px
FF MAC	original - 20px	original - 193px
SF MAC	original - 14px	original - 156px
ALL	original - 44px	original - 215px

I hope this information was useful. As always let me know if you have any questions, find mistakes in my math or just want to chat about the topic.