• Home
  • Blog
  • Design Terms Part Two: Fixed vs. Liquid Layouts

Design Terms Part Two: Fixed vs. Liquid Layouts

Since nascent HTML began supporting images, colors and backgrounds, people have been experimenting with ways to dress up their pages. Website design has since flourished, with developments in code and technology giving designers the freedom to create layouts they could not have dreamed of ten years ago. But even with modern development capabilities, challenges still exist. Browser and operating statistics, coupled with on-site analytics, can help you predict what technology people will be using when they access your website. However, no predictions are perfect, and it is simply impossible to anticipate the limits (or abilities) of the devices on which your site will be viewed.

The best you can do is develop a site that will look as good as possible on all browsers and machines. There are multiple ways to approach this issue, which must be a consideration from the beginning of the design process. One question you should ask yourself is whether you want your site’s layout to be fixed or fluid.

Fixed width. Fixed width layouts remain the same size no matter how large the user’s monitor. The size of the page and everything on the page is set during the design process, and none of the elements will resize when visitors stretch or shrink their browser window. Typically, fixed width sites are centered. The design will hover in the middle of the page, giving the background room to fill the space on either size. This is a popular method for website layout that frequent Internet users are doubtless accustomed to seeing.

Fixed layouts offer the most control over a website’s appearance. Designers can make pixel-perfect tweaks with the knowledge that they will stay consistent. Since the width of the columns of text does not change, they also maintain their readability well from monitor to monitor. However, fixed layouts are less flexible and more likely to break if users adjust their font size.

Liquid. Liquid layouts adjust so that they always fill the full width of the browser window. This process can be clunky – and often was in the early days of coding such sites. As column widths adjust to fill large spaces, users can end up with pages full of awkwardly spaced, difficult to read text.

Liquid layouts are gaining popularity with the growth of responsive design. And they are becoming more agile. Flexible images will resize automatically to fill the whole screen of any device. The layout may adjust from three down to two or even one column depending on the space it needs to fill. The process is more complicated than simply stretching elements from one edge of the browser window to another. It involves planing a layout that will adjust gracefully to different user’s needs.

Let’s Build a Bigger Law Firm. Call 1.800.728.5306 ext. 1

Other Resources: The Bigger Law Firm magazine | The Bigger Lawyer Social Network | Legal News |Attorney Press Release Distribution

Be a Fan on Facebook

Follow us on Twitter

Join our Circle in Google Plus

See us on JD Supra

Google Places – Tampa, FL

Google Places – San Francisco, CA

Get Weekly Marketing Tips

Enjoy subscriber exclusive content like special reports and ebooks. Plus get reliable expert insights every week that will help you rise above your competition.

Welcome aboard!

Get Weekly Marketing Tips

Enjoy subscriber exclusive content like special reports and ebooks. Plus get reliable expert insights every week that will help you rise above your competition.

Welcome aboard!