| « BrandAid: Olympic Branding Gone Wild | MS Paint Nostalgia » |
It's the oldest question in web design: What's the best monitor screen resolution to use when building your website? The answer has changed throughout the years as technology improved and consumer needs changed. Here are my views on the present and short-term future of website size and screen resolution.
What's the best monitor screen resolution to use when building your website?
Unfortunately, there's no short answer to this question. Different people use different resolutions, and the popularity of devices like the Blackberry and iPhone have added even more screen sizes to the mix. Let's look at the data:
The Stats: According to the January 2010 Web Statistics and Trends at w3schools.com, only 20% of computers use the classic standby screen size of 1024x768, with a whopping 76% using a higher resolution. That's a huge jump from last year, when 36% used 1024x768, and 57% used higher resolutions. 800x600 barely registers at about 1% of users.
1024x768 has been the reigning champ in monitor resolution for a number of years, and most websites have been designed to fit comfortably in that space. Here at Studiothink, we design most of our sites to be 950-1000 pixels wide, meaning the main content fits nicely in that space with a slight margin on either side. We'll use a well-designed background to tie the site together and ensure there's something to look at on larger screens, but the main bulk of the site content sits nicely within 1000 pixels. Most web designers seem to follow this guideline. Take a look at CNN and Nike and you'll find that both websites fit their content in containers that span 1000 pixels wide.
So most websites fit a 1024 pixel width, but what about the height?
Just a few years ago most designers would tell you to keep your content, at least on the homepage, 'above the fold,' meaning within about 700 pixels high so everything would fit on a 1024x768 screen. Recently, however, due to increased monitor resolutions that give the user more real estate, and increased public comfort with the scrollbar, more companies and designers are embracing longer websites. Feel free to make your website longer than the average user's screen can contain, but not too long that download time is slowed by the amount of content on the page or the user gets lost in a pit of content. We tend to average between 1200 - 1700 pixels on our longer home page designs.
So keep it within 1000x700?
Not necessarily. Web design would be pretty boring if all websites were 1000x700 pixels, and don't think you have to be stuck in a 1000 pixel box. Websites can be built using a 'fluid' or 'liquid' design, where the content expands or contracts to fill the entire browser window, no matter the size. These are fun to build, but design opportunity is limited.
You could build a complete website in Flash and program it to fill the browser window, giving you much more design control, full screen content, animation, and even giving the user the option of going full-screen, rather than simply full-browser.
Other options, like side-scrolling or micro websites, give you or your company a great opportunity to stand out in the web.
Summary
Keep in mind most users are comfortably browsing websites that contain content within about 1000 pixels wide. While it's true, according to the stats above, that most users are using screen resolutions larger than 1024x768, that doesn't necessarily mean their browser windows are larger. For example, my computer at home has a resolution of 1920 by 1200, but it's very rare that I browse full-screen, partly because it makes multitasking easier, partly because nearly all websites are optimized for a smaller size.
So keep the content at a comfortable width for now, until trends or technology pushes common web design even further.
You can't please everyone and, at the moment at least, it's hard to make a fully fluid website that's both functional and stylish. Try to make your website so it's easily accessible to everyone, no matter their resolution. You don't need to ensure it looks the best at every size, but ensure the content is viewable and the site can be navigated with ease.
Finally, know your user. Is your target market aging baby boomers? Keep scrolling to a minimum, use a large font, and contain your content within a relatively small screen resolution. Does your target use smartphones to access your site? Consider getting a special site designed just for mobile browsers. Want to make an impact on a younger, more-tech savvy, or well-off crowd? Feel free to use large spaces, big images, and big, beautiful design to get your point across.