Liquid vs Responsive Web Design
The internet has always been a place of change. If you refuse to change with it, you get left behind.
One of the fastest changing aspects of the internet are the appliances used to view websites.
We've come a long way since the 1980's, when your first and only choice was a clunky slow loading desktop PC.
If you could afford a color monitor, the graphics were fuzzy and the text was hard to read.
Today people are surfing the web with every kind of appliance imaginable. From 20+ inch wide desktop and laptop screens, to tablets that come in many different sizes and resolutions and cellphones that fit in the palm of your hand, variety creates a special challenge for web designers.
Screen displays used today are clear, crisp and colorful ,but screen resolutions can vary with each visiting device.
The need for websites designed so that they adapt to all of these different devices is no longer an option. It is a must!!
First came Liquid Web Design which eventually evolved into Responsive Web Design.
What is Liquid Web Design?
Websites built with web pages that adapt to the resolutions and widths of various devices are called Liquid or Fluid designs.
When you pour water into a container it adjusts to the size and shape of that container.
Dump an ice cube into a glass and it retains its size and shape.
What we call fixed width or static web pages are like ice cubes.
Fixed width web pages are set to absolute widths like 800, 1000 or 1200 pixels.
The resolutions of some of the appliances used to view websites can be as low as 320 pixels wide all the way up to and over 1900 pixels.
Yes, some of the newer, smarter, more expensive devices will adjust the web pages to fit their display.
Then there are the many low end devices that don't self adjust and this is where you will lose viewers if you stick to old methods of creating static web pages.
Compare Performance
Here are 3 web pages. One is Liquid, the second is Responsive and the third is Static. Open each, grab the right edge of the browser window and squeeze the page to the left as far as it will go.
- Example Demo Pages:
- 2 Column Liquid
- 2 Column Responsive
- 2 Column Static
Notice a difference?
Resolving the Myth
The biggest rap against using liquid web design is that you lose the entire structure of you web page when it is viewed on high resolution machines.
Okay. In the old days this was a problem. Then again we didn't have people viewing web pages on what people call game machine monitors that use monitor displays of over 1900 pixels wide.
It would seem that the old myth would be more of a problem today.
Let's go back to the old comparison of liquid web design.
Pour water into a container and it conforms to the shape and size of the container.
Pour water on to a bare floor and it pretty much disappears into a flat puddle. No boundaries. Result loss of structure
Who comes to the rescue? The inventors and developers of CSS.
With the advances in CSS today, you can easily (2 lines of CSS) add a boundary restriction to your web pages.
If you are building web pages on a high resolution monitor that displays at 1920 pixels or more, you can set a boundary on how wide you want the page to spread out.
If you design so that your page looks good at 1920 pixels it will probably be too large to view on a mobile device. That is of course unless you learn reponsive design techniques and CSS.
Add 2 lines of code to the style sheet and you can set the maximum pixel width that you want the web page viewed at to 1300, 1400, 1500 or beyond.
Learn to use Media Queries and you can adjust the page width to every viewing device.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.