{"id":170,"date":"2009-04-12T17:42:00","date_gmt":"2009-04-12T17:42:00","guid":{"rendered":"http:\/\/www.dresan.com\/blog\/?p=170"},"modified":"2009-04-12T17:42:00","modified_gmt":"2009-04-12T17:42:00","slug":"how-wide-should-your-website-be","status":"publish","type":"post","link":"https:\/\/dresan.com\/blog\/2009\/04\/12\/how-wide-should-your-website-be\/","title":{"rendered":"How Wide Should Your Website Be?"},"content":{"rendered":"

For the longest time I’ve tried to design the websites I’m responsible for to be pretty narrow – the Library of Dresan<\/a> is supposed to be just over 800 pixels, fanu fiku<\/a> is supposed to be just over 700 pixels, and Studio Sandi<\/a> is just about 800 pixels. The rationale behind this was that in the olden days of the Internet, user’s screens were as small as 1024 by 768 or even 800 by 600, and even users who had wider monitors displayed their browser in a window that didn’t take up the full screen.<\/p>\n

I remember reading an article (I don’t remember where) that pointed out with browser sidebars and chrome, the width of the page could be far less than monitor width. I measured it on my circa-2000 screen and I found that I had about 800 pixels of width for the web page. So that led to the design of the Library: 800 pixels of width, 600 for the main content and 200 for the sidebar. The banner itself was a little over 1000 pixels so that it didn’t end abruptly if the user made their screen wider.<\/p>\n

But that was almost ten years ago. Does that logic still hold?<\/p>\n

Many people view the web on laptops and phones. Dealing with phone resolution will require more than just dealing with screen widths, so I’ll return to it in a later article when I tackle the CSSification of the Library. But a quick search suggests that typical laptop screen widths range<\/a> from the 1024×768 XGA standard to the 1440×900 WXGA+ widescreen standard. There are some people who have smaller laptop screens, of course, but they are in the minority. Conversely, screens do get larger: for example, for many years I owned a glorious Toshiba Satellite laptop with a 1600×1200 screen. But on those larger screens users often use smaller windows for their browsers: for example, on this MacBook Pro, with a 1440×900 screen, I’m only using a little more than 1200 pixels for the browser window – and typically I use narrower windows.<\/p>\n

So something more than 800 and less than 1400 appears to be a good guess. Discussion on the web seems to indicate people are starting to give up on the 800 width<\/a> and moving to 900 or more<\/a>, but rarely more than 1024<\/a>.<\/p>\n

Digging around, I found more articles with the same idea – Mario Sanchez<\/a> argues the goal of web site width is to avoid horizontal scrolling, and recommends you design your web site for 800 pixels, with a layout that works well at 1024. Jacob Nielsen<\/a> recommends straight out to optimize your site for 1024, but not to design for a specific size and let your layout be “liquid”, changing width for your users’s monitor sizes. Personally I think this breaks down if you have images to display, though I reserve the right to be convinced otherwise by CSS wizardry at a later time. <\/p>\n

All of the above are opinions, of course; what about the evidence that they’re based on? The Steam Hardware Survey<\/a> put out by Valve Corporation suggests that 95% of users use screens of 1024 pixels or wider, with fully 50% at 1024×768, 1280×1024, or 1440×1900. Similarly, the Browser Display Statistics<\/a> analysis by W3 Schools indicate 36% of users have a display resolution of 1024×768 … and 57% have higher. Update:<\/b> I checked the Library’s own stats, and found that Google Analytics does indeed track screen resolutions. Less than 5% of all users had a resolution less than 1024×768, and only 1.5% had a resolution less than 800×600. Of that, 0.5% were listed as no resolution, leaving 1% at 640×480. Those numbers will come back later…<\/p>\n

Take all that with a grain of salt given that some significant percentage use browser screens larger than their monitor resolution – Nielsen points out in the same article I mentioned above<\/a> that as resolutions get staggeringly large (he predicts 5000×3000 in the future) users begin to display multiple side by side windows. True enough, at the Search Engine That Starts With a G, all of my officemates have dual monitors with aggregate resolution of 2400×1920, but none of us typically displays a browser window larger than half the screen – 1200 pixels, minus chrome or subtracted width to see other windows underneath.<\/p>\n

So that leaves me with the feeling that Nielsen and Sanchez are essentially right. My personal take on it for the Library is:<\/p>\n