PDA

View Full Version : Liquid Web Design


Elizbat
07-06-2009, 04:45 AM
I m interested in developing a website that is compatible with every display design.
What resources would you point me to? I have heard that liquid design is the solution. What is liquid design? Is it just a case of not setting the width in pixels or is there more to it?

Czar
07-06-2009, 06:10 AM
Hi Elizbat and welcome to Geek/Talk. :wave:

It almost is that simple. Liquid designs don't feature fixed widths. If you use tables (most designers don't these days), it means setting the main content table to 100% width and using relative/pecentage widths for other table columns. If using CSS/divs for layout, it means floating certain elements to the left and right, enabling elements to drop below one another to maintain their visibility on low-res displays, etc.

Liquid layouts are much harder to control and are harder for less experienced designers to create, but if you're comfortable using CSS-based layouts and are absolutely determined not to use a fixed width layout, it could be worth a go.

Otherwise, keep a fixed width layout but make it relatively narrow (perhaps 780 pixels wide) and use a nice background feature that extends out to the right and left to create areas of visual interest for those who are using high res displays.

Kerrals
07-06-2009, 06:11 AM
Liquid design is indeed a solution. It is a technology that has come forth to produce intelligent web pages that shrink and expand according to the size of the screen they are being viewed in. Not need to worry about the outlook of your website in different sized display devices, such as, wide screen display, high resolution display. No more browser compatibility issues.

<<snipped>>

Del
07-06-2009, 11:21 PM
Would a wide-screen monitor, set up as a tall-screen, mess up layouts? (This question is related because it is a variable to consider when trying to make a layout that will work with all resolutions.)

Czar
07-06-2009, 11:29 PM
Hey Del. Actually, most web layouts would likely look superb in a display that was taller than it is wide. That sure would reduce the need to scroll and since designers still tend to tailor their sites to suit a 1024x768 display, a 1080x1900 display or similar would be just brilliant. Better still would be a dual monitor setup with both of them vertical.

Come to think of it, I wonder why that's not done more often. I have a spare HP 23 incher sitting on my desk that rotates 90-degrees. I really should give that a shot.

Del
07-07-2009, 01:13 PM
Probably because the stand is only for widescreen; and as wide screen it is as tall as my box monitor, but as a tall it isn't as wide as my old monitor.

lunaticfrog
07-09-2009, 10:37 PM
Hey, dude.
People who find themselves faced with the task of creating or commissioning a Website tend to think in terms of print. It's what we know, after all. The fact that the Internet can be accessed with many different variations of browser, platform, settings or even devices often escapes these, our potential Web design clients, entirely.
Your visitors can use almost anything to access your information, from simple variations on popular themes such a Browsers with large fonts, Javascript and images turned off and "Alternative" browsers such as Opera, Mozilla, or Netscape to the more extreme ends of the spectrum such as:Web TV,Text-only browsers, Screen readers and braille browsers,Hand held devices.
So, what I mean here is , trying to impose strict, rigid, pixel-perfect design on such a fluid and unpredictable medium is futile.
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 moitor, you will still see the information, it will just be a little more compact.

If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user.

But it's not just about making a page 'flow' with the browser window. The principle of Liquid Design goes hand in hand with the principles of accessibility.
There are two major ways to tackle Liquid Design:
1. With Tables

2. With CSS-P

I'm a great advocate of CSS (Cascading Style Sheets) and for accessibility and Liquid Design (not to mention speed, good markup and SEO issues) it's a clear winner. Clean, uncluttered markup will not only make your pages load faster, but you'll also find the whole process of writing liquid layouts much more intuitive.

qutark
07-20-2009, 09:02 PM
Hey, dude.
People who find themselves faced with the task of creating or commissioning a Website tend to think in terms of print. It's what we know, after all. The fact that the Internet can be accessed with many different variations of browser, platform, settings or even devices often escapes these, our potential Web design clients, entirely.
Your visitors can use almost anything to access your information, from simple variations on popular themes such a Browsers with large fonts, Javascript and images turned off and "Alternative" browsers such as Opera, Mozilla, or Netscape to the more extreme ends of the spectrum such as:Web TV,Text-only browsers, Screen readers and braille browsers,Hand held devices.
So, what I mean here is , trying to impose strict, rigid, pixel-perfect design on such a fluid and unpredictable medium is futile.
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 moitor, you will still see the information, it will just be a little more compact.

If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user.

But it's not just about making a page 'flow' with the browser window. The principle of Liquid Design goes hand in hand with the principles of accessibility.
There are two major ways to tackle Liquid Design:
1. With Tables

2. With CSS-P

I'm a great advocate of CSS (Cascading Style Sheets) and for accessibility and Liquid Design (not to mention speed, good markup and SEO issues) it's a clear winner. Clean, uncluttered markup will not only make your pages load faster, but you'll also find the whole process of writing liquid layouts much more intuitive.
:angel: infomative dude , where did u get that
and the real problem is how to make use of the Liquid Design??
could u share?

Czar
07-20-2009, 09:38 PM
This site has a liquid design, for example. The tables of this forum adjust dynamically to fit monitors of any width.

Liquid Designs are fantastic for websites that need to be seen on multiple devices, that need to be highly accessible or that present huge amounts of content. They do present challenges for sites that are more visual and structured in nature, though, where fixed width layouts often provide greater control.

Del
07-21-2009, 01:03 PM
Geektalk looks really good in 768x1366 resolution. I have noticed that with many sites that require horizontal scrolling, the main content is the right size, but the menus and right-side banners are what make the page too wide. This works well too, instead of the two sides squishing the content article.

Czar
07-21-2009, 08:08 PM
That's good to know. Thanks for the feedback, Del. :D