Fluid web design

What is it?

Users know

In 2002 we conducted a small survey amongst mature college students to find the most annoying things that they experienced while using the web.

Top of the list was pop-up windows - no surprises there. Second was having to scroll left to right to read the contents of a page.

From that moment on we decided to do our very best to ensure that the content of our pages would flow to fit any screen size or resolution. After all, that was one of the main reasons why html was needed in the first place, a universal method of distributing information across any system.

Designers have in the past been forced by the expectations of their clients to produce fixed-width pages. Now we have the tools to produce fluid design that can be truly elegant.

Try it out

If you're using Windows, try changing the size of the window that this web page is displayed in by dragging the borders. As you decrease and increase the size of the viewport watch how the page elements move around to fill the screen. This is fluid design.

[Image: Example of a fixed-width web page]

Above: Fixed-width web page displayed in a narrow window - the page is too wide to fit so the user needs to scroll left to right to read each line. This is how the page appears to a user with the commonly used screen resolution of 640 pixels wide. This probably won't be their favourite site.

Above: Fluid web page displayed in a narrow window - the page elements have moved around to fit within it. Text flows around the pictures like liquid. Note the lack of horizontal scrollbar. If the window is made larger, or the resolution is increased, the page expands to fill it.

Depending on the overall effect and content of any site it is not always possible or even desirable to achieve fluid layout but in most cases we will strive for it.

As the gulf between low and high resolution settings widens with advancing technology (PDAs, notebooks, larger monitors etc), we believe it is no longer viable to assume that most users will be using a particular screen resolution. Indeed, they may not be using a PC.

Why point this out?

Fixed-width layout is used by most professional designers in the UK.

[Graphic: Different] Why? Many have migrated or branched out into web design from a background of designing for print. Desktop publishing demands many skills but the dimensions of the finished product is always a known fact - a piece of paper with a fixed size. Fixed-width layout is the easy option.

Web design is different, make sure you choose a company who knows it. Inclusive web design works and that's what we do.

Next installment: How our methods help your business: Google»