A question that comes up frequently, particularly for those starting out in web design, is what width they should use when designing websites. It’s an interesting question, and there is no single right answer.
The problem in figuring out what width to design your sites at lies in the fact that the internet is viewable on such a range of devices and screens that range in size from tiny mobile devices such as smartphones to large desktop screens.
According to W3Schools, as of January 2011 over 85% of people are browsing with screen resolutions of higher than 1024×768, but the iPhone 4 screen is 960×640 and some BlackBerry’s have a screen resolution of 320×240.
Even if we take mobile devices out of the equation, screen resolution is only part of the picture. The measurement we need to know is viewport size. This is the actual amount of screen your website will display in. Someone may have a resolution of 1024×768, but how many pixels does the browser chrome take up – how many pixels are taken up at the top of the browser with the address bar, the tabs, the favourites and who knows what other toolbar plugins the user might have installed. Furthermore, how many users actually have their browser maximised? Perhaps they browse with the browser taking up only half the screen.
There will eternally be arguments among web designers over how best to tackle the issue of what width to use in the design of a website so it looks good in as many situations as possible. Fluid vs fixed design has been a heated argument for some time, and lately the trend of “responsive web design” has been growing in popularity.
Fluid (or elastic or liquid) web design is where you design your site to expand naturally into the available space. You can use relative terms such as percentages or ems to size your elements. Your main content area might be 80% and your sidebar 20% width for example.
It is entirely possible to design beautiful sites using a fluid approach, but it comes with it’s own set of constraints and considerations.
See the end of this article for a link for more info on fluid design.
Responsive web design is an approach that is gaining in popularity, it is essentially a reference to making your web design responsive to different environments. It is not a specific single approach but rather an awareness of the different devices and resolutions and implementing what is necessary to look well everywhere. This might for example be a mix of a fluid design coupled with some css media queries to cater for extreme resolutions where your fluid design might not be enough.
See the end of this article for a link for more info on responsive web design:
Fixed Width Design
But for now, let’s assume you want to create a fixed width website and are still scratching your head wondering at what width you should design your website. Fixed width websites are generally the most common type of layout, they are designed at a specific width and the website does not change regarding how you view it If you have an ancient monitor with a small resolution you will need to horizontally scroll to view the sidebar of a site that is of a fixed width and wider than your resolution.
Deciding what width to design your site at is a numbers game. As we have seen from W3Schools 85% of users have resolutions higher than 1024×768, if you are redesigning an existing site you could look at your own web stats to assess what resolution breakdown your visitors have – but what about the viewport issue we looked at?
Enter tools such as Google’s Browser Size and also FoldTester.com. These tools give you a good indication of the general viewport sizes of web users. Both tools allow you to enter a URL in order to see an overlay showing you a percentage breakdown of common viewport sizes.
For example, according to FoldTester 99% of people have a viewport that is capable of viewing 585×300 pixels, and 90% of people have a viewport capable of viewing 955×465 pixels.
Assessing your Audience and Popular Grid Systems
A popular layout scheme is 960 pixels wide, according to both FoldTester and Browser Size this width would be within 80% of people’s viewports.
You will need to decide what is an acceptable percentage to cater for in your case. A design at a width of 770 pixels would be within the viewport of 95% of browsers, however you would have to take into account that many sites are now using popular wider designs such as the 960 grid system or 978 grid system.
The prevalence of these wider designs means your site, while being entirely visible in a greater number of viewports, might look old fashioned, or to visitors with large resolutions and maximised browsers your design might look swamped in space.
If you are redesigning an existing site you could look at measuring viewport size of your own visitors to determine what width would be best for your own audience. Do a Google search for “implement viewport tracking using Google Analytics” to get your started.
A Solid Starting Point
Not every site audience is the same, and as much as possible it is worth examining your own audience before deciding on your website width – however if you are starting on the design of a new website with no stats available, and your audience is likely to be a general audience then you could rely on the prevalence of the 960 grid system and use that as your starting point. Nobody ever got fired for designing at 960 pixels wide.
Fluid design – more info: http://www.maxdesign.com.au/articles/liquid/
Responsive web design – more info: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/