Liquid Website Design

(Update 2016 - Liquid Design has almost completely been replaced with Reactive Design)

The internet presents a problem, which many Print Based Graphic Designers struggle to understand: The View Port.

The issue comes when you look at the size (and now shape) of the screen on which people view the internet. When the internet was young most people had either 14 inch screens, with resolutions of 640x480 or 800x600. Since then we have gone through 15, 17 and 19 inch screens. Most of these were the same shape as old TV screens, with a 4:3 aspect ratio. Now many are larger still and we also have wide screens (16:9 and 16:10). These larger screens have resolutions like 1280x1200 or 1440x900 or 1600x1024. Some have now achieved full HD 1920x1080.

The first figure in the numbers above, accounts for the widest image which can be displayed without scrolling sideways.

This means that your website must be able to display properly on a variety of different sizes. There are a number of solutions to this...

• Make the content of the website narrow enough to be visible on all machines - this can be ugly on large screens, especially if pinned to the left side.
• Make the content of the website narrow enough to be visible on most machines - this is the most popular solution today, and can work for image intensive sites, especially if centered.
• Make the content of the website change width automatically to fit the available space.

The Last of these points is Liquid design, imagine the website content being poured into the screen, and it filling whatever width is available.

This has become even more important, with the growth of the mobile internet. Although most small-screen devices can now handle pages which should be wider than the screen of the device.

If your website could benefit from liquid design, please contact us for a free consultation.