November 20, 2007 | 3 Comments »
A very common response I get from clients when I show them the initial design concept for their new website is, “Why is there so much extra space on the sides. Can we get rid of that and use all the space?”
Designing for the web has a lot more restrictions than some other design media such as print. With print, you know how a person will be viewing your final piece. With a website, you don’t know what kind of computer, operating system, browser and screen resolution a person is using – each one of these variables could affect how the website is displayed to the end user. These days, we have figured out most of the quirks and differences between operating systems and browsers and how to overcome them. When it comes to screen resolution though, we have to make concessions.
Most users keep their monitor resolution at the default factory settings. A few years ago most monitors were set to 800×600 – meaning that you could see 800 pixels wide and 600 pixels high within the monitor frame. Nowadays, most monitors and almost all users have their resolution set to at least 1024×768.
So what does this mean for designing websites? These numbers dictate the width and height a website should fit into before a user has to scroll. Every website should fit within a users browser window without having to scroll horizontally – so width is the key factor web designers take into account. Previously it was also considered very important to keep vertical scroll to a minimum, but it has been proven that having vertical scroll actually has no effect on users and their interaction with a website.
So, to start, we have 1024 pixels to play with horizontally. However, browser windows have a frame of a few pixels and the scroll bar takes up a few of those pixels – so we really have about 1000 pixels now. Another thing to consider is that most users do not have their browser window fully maximized to the full width and height of their monitor – people like being able to still see the desktop. This is another issue we need to take into consideration, but exactly how much is hard to say. Within the last year, AshWebStudio has adopted a policy of starting most designs at 900 pixels wide. If a website has minimal content, we’ll make it more narrow. If it a design will really benefit by being another 50 pixels wide, we’ll go for it. However, we definitely have an absolute max of 1000 pixels.
Another option some designers take is to make fluid layouts – this means to make the website scale to match whatever browser window size the user has. We avoid fluid layout designs for usability reasons. If someone is on a larger resolution, the browser window could be really wide. As a result, the flow of text on the website could become very long. When lines of text are really long they become harder to read (it’s hard to visually move your eyes a long distance and find the next line of text). Another reason we avoid liquid layouts is that it limits our design because every item must be able to scale – it’s nice having at least little control over how a website is displayed.
So when clients say they can see extra space, it is because they have their resolution settings higher than 1024×768. Is that space being wasted? Not if you care about usability. Is there a perfect size that every website should use? Of course not, every website has a specific goal, target audience and other factors which every designer should take into consideration when they begin every website design.