Email RSS Twitter Delicious

What size to I set my browser for web design?

The short answer — 1000×600. The long answer. I recently reinstalled my computer and lost the settings in Web Developer for the carefully crafted window resizing I use when developing websites. I had to go back and retrace my research. So this post is about writing down the result so I won’t forget again.

First off, the web is 1024×768. It’s not 800×600. It’s definitely not 320×480. It’s 1024×768. Or more accurately, 1024 wide by whatever long your computer supports. Less than 3 percent of users are still at 800×600, but by now they are used to visiting websites they have to scroll sideways. A quarter of the web still uses 1024×768. And those with larger monitors rarely make their browsers much wider than 1024. Those who maximize their web browser to 1920×1200 see either whole paragraphs as a single line or — more likely — as a 960 pixel content strip down the middle of the browser.

Thanks to the iPhone, mobile devices are also 1024×768. Sure, you can make a special mobile version of your site. But most sites are rendered at 1024×768 and then you zoom to the space you want to read. It’s the only really good solution for mobile devices. Everyone is adopting the practice.

Apple’s new iPad is 1024×768.

So 1024 wins!

Of course, that’s the maximum size of the 1024×768 monitor. But when you load your operating system and web browser there’s all this chrome of buttons, scroll bars, status bars. What is the actual size of the rendered web page?

Here’s the quick table I use. It was created on a Windows computer set exactly to 1024×768. We try each browser using it’s default settings (larger icons usually) and measure the rendered web page.

Browser Viewport
Internet Explorer 6.0 1002 × 601
Internet Explorer 7.0 1002 × 620
Internet Explorer 8.0 1003 × 597
Firefox 3.5 1007 × 575
Safari 4.0 1007 × 632
Google Chrome 1008 × 675
Opera 10 1008 × 608

Too many buttons

Horizontally we are fairly consistent — 1002 to 1008. Vertically there’s more disparity, but I don’t care about it much. For the users, I would think that vertical distance would be very important. But I know a man who has six or so “bookmark” bars running in Internet Explorer. He probably only has 300 vertical pixels maximum for surfing the web. It’s his problem, not mine.

People scroll below the fold so it’s the width that is key. Setting a website so it renders well within 1000 pixels is probably the best setting.

Web Developer

I love Web Developer in Firefox. Between that and Firebug, Firefox is the best general web development platform available. Web Developer has a Resize option that changes the size of Firefox to preset dimensions.

The 800×600 setting installed with Web Developer actually resizes Firefox to exactly 800×600. This is an unrealistic size. If you maximize Firefox to 800×600 on a Windows computer with an 800×600 display you do not actually get 800×600. It’s smaller because of the Taskbar.

What we really want is to resize the viewport to a specific size. Fortunately, that’s easy. Click the Resize button and click “Edit Resize Dimensions…”. On a Mac, add a new resize dimensions of 1015 by 600 and turn on “Resize the Viewport”.

Why 1015? Well, the viewport includes the scroll bars and the Mac’s scroll bars are 15 pixels wide. If you have a Windows machine, make it somewhat larger like 1020.

For 800×600 change the dimensions to 795 by 420 with “Resize the Viewport” to get the correct size of 780×420. I use this setting to see how bad my site degrades for three percent of the web.

So after that long winded discussion it still boils down to 1000×600.