Flexible Design (Liquid Design)

Using a flexible design (also known as liquid design) accommodates a variety of browsers, screen resolutions, operating systems and monitors. As more and more people use phones and other mobile devices to surf the web the ability of your site to adjust to the visitor's device will become more and more important. There is nothing more annoying than visiting a site where the designer has used a fixed width design that doesn't fit the visitor's browser window. Just because monitors have gotten bigger on the home use front does not mean the user has their browser window maximized.

website_design

How Web Page Appears in Browser

How a web page appears in the browser depends on a number of factors:

  • User operating systemMacintosh, Windows or Lynx
  • Screen ResolutionMost users today are using 800 x 600 or 1024 x 768 resolution settings.
  • Browser and Browser versionEach browser interprets your web page differently. The version will affect what HTML tags features are available.
  • Monitor size and graphics cardMonitor size, like resolution, will determine how much space is available on the screen. The graphics card determines the quality of what the user sees on the screen.
  • Default font sizeThe size of the font the user has set in their browser (View, Text size in Internet Explorer).
  • Fonts availableThe fonts available on the user's computer. Windows and Macintosh have different default fonts available. You may have different additional fonts available on your machine.
  • User selected stylesheetThe user may have set-up their own stylesheet to override the web page stylesheet. (Tools, Internet Options, General tab, Accessibility in Internet Explorer)

How to Build Flexible Design (Liquid Design) Web Page Layout

To create a flexible design (liquid design) you use percentages instead of pixels to define your web page layout or the layout table if using tables.

Example using div containers and the stylesheet:

#content {
width: 90%;
}

Example if you are coding in HTML versions prior to HTML 4.01 Strict:

<table width="90%">

These percentages are relative to the available screen space the user has. E.g. 100 % will be the full area available, 50% would be half of the full screen area available.

Benefits of Flexible Design (Liquid Design)

With flexible design (liquid design) percentages are used therefore the content of the page resizes according to the percentages set and browser window size. This will eliminate the horizontal scroll bar if the content width (width of all images and spacing) is less than the browser window width.

When percentage widths for content columns (container columns or table columns) are used, the columns will retain their relative proportion independent of the browser window size.

You can mix fixed and percentage widths of you content columns.

E.g. You can set the navigation and gutters to be a specific widths and the column with the actual web page content portion to be the rest of the available space in the browser window.

If your visitor wishes to print your page and you have used flexible design (liquid design) the browser will adjust the flow of the content to fit the available space on the printed page. Again, this is as long as the total width of the columns, images and spacing that are forced to be side by side are less that the page width the user has the printer set up for.