Free Liquid Web Templates
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!!
Enter Liquid 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.
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. (We're talking file size here - Not page size)
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.
Your web page retains the structure that you designed for viewing.