One of the major challenges in web design is the need to make web pages that look good on a variety of –
- browsers (Netscape, Internet Explorer, AOL, Web TV, Opera, Chrome etc.)
- platforms(Mac or Windows)
- screen resolutions(usually 800 x 600 or 1024 x 768 pixels)
- user preferences(window size, text size, color .etc)
- hand held devices
- no. of other variables
What you see is rarely what you get across all the blend of factors listed above. Hence, you must design your web pages with flexibility in mind. Some questions to ask:
- What will happen if the font you use isn’t installed on the user’s computer?
- What will happen if the default font size on the user’s computer is larger or smaller than the font you’re looking at?(this is one of the biggest Mac/PC differences)
- What will happen if a user has a different screen resolution from the one you’re using?
- What if a user doesn’t have the right plugin or has a very slow modem, has an old browser, or is otherwise “technology-impaired”?
The approach that will consider the above factors is Liquid Web Page Design. It is also called as Fluid/Flexible/Responsive web design.
What is Liquid Design?
The term “liquid” implies that a website should flow smoothly into whatever space it is given. If you use a high resolution monitor, this may mean that you need to resize your browser a little, which most people in that situation do. If you have a low resolution monitor, you will still see the information; it will just be a little more compact. Simply it can be said that the page flows easily to fit its “container”-the specific combination of browser, platform, screen resolution and user preferences and also looks good in all combinations.
The goal of liquid page design is not to find a way to make your page look the same across platforms, but to make it look excellent across platforms. Liquid design means that the web site adapts itself to the available space, the same way water takes the shape of the glass it is in.
A liquid design is one, like Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.
Almost every new client these days wants a mobile version of their website. It’s practically crucial- one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. Liquid web design approach suggests that the design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget in the market.
Is liquid design adequate for any web site?
In order to make a decision whether liquid design is suitable for a web site, factors such as type of content, structure, amount of information must be taken in consideration. Liquid design is ideal for sites with a lot of information. The flexibility of such sites increases readability.
Liquid design is entirely new way of thinking about design.