At least once during a website build I usually get asked the question ‘Why is my website a certain width?”. It’s a fair question, and to be honest there are a few reasons why I usually like to set a maximum width to web pages.
Screen sizes.
Desktops, laptops, ipads, tablets, netbooks, phones, each available in a wide range of screen dimensions and resolutions. The physical screen dimensions vary enormously between these devices, and if you included projectors in this list then you could end up measuring your display size in metres! Each screen size has a resolution, usually measured in pixels (px).
A brief history of monitor sizes.
For a long time the most popular monitor resolution, in use globally, had a resolution of 1024x768px (4:3 aspect ratio) and globally this still remains in second place today. In 2008 the computer industry began moving from the 4:3 and 16:10 aspect ratios towards 16:9 widescreen displays. By 2010 nearly all manufacturers had shifted production to widescreen only displays. Occupying the top spot from around April of 2012 is 1366x768px (16:9 widescreen aspect ratio) which was first popularised by lower cost laptops.
Website widths.
So as well as looking good on the two most popular screen dimensions of 1366x768px and 1024x768px your website also has to work on all of the other available screen resolutions. There are two ways to accomplish this, the first is to have the website stretch across the whole of the browser window, the other is to set a maximum width that we know will work across 1024px width monitors and larger.
Line lengths.
The drawback of using the full width of the browser window becomes evident when text is added to the website. Unless constrained, the lack of control over the websites’ width leads to the lines of text becoming too long. This makes it very difficult for people to track the lines of text from the end of one line to the beginning of the next. This can be overcome by increasing the font sizes and line spacing depending on the browser width but you can still end up losing control of the overall design of the website.
By setting a maximum width to the website, or at least the contents, the designer has more control over the line lengths and how the content is displayed generally. With clever use of controlled line lengths, font sizing and line height (the spacing between the lines of text) the designer can keep the text content of the website balanced and perfectly legible.
Responsive layouts.
You might have noticed that I’ve only mentioned a maximum width but have yet to mention a minimum width. With the increase use of smaller screened devices accessing the web (smartphones etc.) these also have to catered for.
Responsive website design came about as a way of overcoming the problems of designing websites for the vast array of devices available. These websites adapt themselves to the screen size/browser window size of the device being used to ensure the content is always readable.
Responsive content.
Whilst these methods have been used to control the placement of the content, and the size of images etc. they haven’t really been used much to control the text content. And as it’s primarily the text content that visitors are looking for, it makes sense to keep this at an optimum size.
The golden ratio.
The golden ratio is a mathematical formula that can be found in nature and is believed to have been used by artists, musicians, architects, scientists and mystics for hundreds of years. When adhered to, this ratio simply makes things look right. As well as being applied to the layout structure of a website this formula can also be applied to the text content of a website. So for any given line length there is an optimum font size and line height that keeps the text perfectly legible.
Responsive layouts, responsive content and the golden ratio.
So by following the golden ratio in the design of our responsive layouts and by incorporating its rules to control the font sizing and line heights we should end up with a website that offers perfect readability across all devices.