E-mail List Archives
Thread: define "liquid design"
Number of posts in this thread: 15 (In chronological order)
From: Sandra Fernandez
Date: Tue, May 03 2005 4:11PM
Subject: define "liquid design"
No previous message | Next message →
I'm having a difference of opinion with someone on my redesign committee about the meaning of "liquid design." Can anyone direct me to a credible source or sources that covers this topic?
Sandra
From: Christian Heilmann
Date: Tue, May 03 2005 4:22PM
Subject: Re: define "liquid design"
← Previous message | Next message →
>I'm having a difference of opinion with someone on my redesign committee
>> about the meaning of "liquid design." Can anyone direct me to a
>> credible source or sources that covers this topic?
A lot,
http://time-tripper.com/uipatterns/index.php?page=Liquid_Layout
http://9rules.com/whitespace/design/death_of_liquid_layouts.php
http://www.saila.com/usage/glossary/defn.shtml?liquid
HTH
Chris
-- Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
From: Sandra Fernandez
Date: Tue, May 03 2005 4:32PM
Subject: Re: define "liquid design"
← Previous message | Next message →
Thanx. I have been given a design that's being defined as liquid. However, it starts at a fixed width for an 800x600 screen, then becomes larger when you increase the font size, not when viewed with a larger resolution screen. I was trying to find something that supported my assertion that that's not really liquid design.
Any and all suggestions, comments, etc. are appreciated.
Christian Heilmann wrote:
>> I'm having a difference of opinion with someone on my redesign committee
>> about the meaning of "liquid design." Can anyone direct me to a
>> credible source or sources that covers this topic?
>>
>
>
> A lot,
>
> http://time-tripper.com/uipatterns/index.php?page=Liquid_Layout
> http://9rules.com/whitespace/design/death_of_liquid_layouts.php
> http://www.saila.com/usage/glossary/defn.shtml?liquid
>
> HTH
> Chris
>
From: pixeldiva
Date: Tue, May 03 2005 4:40PM
Subject: Re: define "liquid design"
← Previous message | Next message →
On 5/3/05, Sandra Fernandez < = EMAIL ADDRESS REMOVED = > wrote:
>> Thanx. I have been given a design that's being defined as liquid.
>> However, it starts at a fixed width for an 800x600 screen, then becomes
>> larger when you increase the font size, not when viewed with a larger
>> resolution screen. I was trying to find something that supported my
>> assertion that that's not really liquid design.
>>
>> Any and all suggestions, comments, etc. are appreciated.
To my mind...
Liquid design = fills the page, no matter what size the window/screen
resolution.
Flexible design = expands when font size is increased (can also, but
doesn't usually, contract when font size is reduced)
pix
http://www.pixeldiva.co.uk
________________________________
From: Christian Heilmann
Date: Tue, May 03 2005 4:44PM
Subject: Re: define "liquid design"
← Previous message | Next message →
>Thanx. I have been given a design that's being defined as liquid.
>> However, it starts at a fixed width for an 800x600 screen, then becomes
>> larger when you increase the font size, not when viewed with a larger
>> resolution screen. I was trying to find something that supported my
>> assertion that that's not really liquid design.
>>
>> Any and all suggestions, comments, etc. are appreciated.
Well it is a mixture of everything.
There are several "standards"
Fixed Layout - doesn't resize at all.
Liquid Layout - resizes with the viewport
Constrained Liquid Layout - resizes with the viewport but has a
minimum and maximum width.
Flexible Layout - defined by EMs, to allow it to grow with the font size
So yours is a flexible layout with a pixel defined width... Tricky.
The benefits and caveats:
Fixed Layout - The designer has full control over the layout. Resizing
the font might completely break it though, and small screens will
force the user to scroll in both directions.
Liquid Layout - On large viewports, line length is getting too long to
read easily. On very small resolutions elements might overlap,
especially when the font is big.
Constrained Liquid Layout - defines a "perfect" length and prevents overlap
Flexible Layout - keeps a consistent aspect ratio, but might also
force the user to scroll.
What is the best? The classic "Depends on your users". :-)
-- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/
From: Jon Gunderson
Date: Tue, May 03 2005 5:58PM
Subject: Re: define "liquid design"
← Previous message | Next message →
Here is a tutorial on how to convert from fixed width table
design to a liquid CSS design.
http://cita.rehab.uiuc.edu/presentations/2005-03-css-tutorial/
Jon
---- Original message ----
>>Date: Tue, 03 May 2005 17:32:23 -0500
>>From: Sandra Fernandez < = EMAIL ADDRESS REMOVED = >
>>Subject: Re: [WebAIM] define "liquid design"
>>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>
>>Thanx. I have been given a design that's being defined as
liquid.
>>However, it starts at a fixed width for an 800x600 screen,
then becomes
>>larger when you increase the font size, not when viewed with
a larger
>>resolution screen. I was trying to find something that
supported my
>>assertion that that's not really liquid design.
>>
>>Any and all suggestions, comments, etc. are appreciated.
>>
>>Christian Heilmann wrote:
>>
>
>>>>>>I'm having a difference of opinion with someone on my
redesign committee
>>>>>>about the meaning of "liquid design." Can anyone direct me
to a
>>>>>>credible source or sources that covers this topic?
>>>>>>
>>>>>>
>>
>>>>
>>>>A lot,
>>>>
>>>>http://time-tripper.com/uipatterns/index.php?page=Liquid_Layout
>>>>http://9rules.com/whitespace/design/death_of_liquid_layouts.php
>>>>http://www.saila.com/usage/glossary/defn.shtml?liquid
>>>>
>>>>HTH
>>>>
>>>>Chris
>>>>
>>>>
>
>>_______________________________________________
>>To manage your subscription, visit http://list.webaim.org/
>>Address list messages to = EMAIL ADDRESS REMOVED =
Jon Gunderson, Ph.D., ATP
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)
Voice: (217) 244-5870
Fax: (217) 333-0248
E-mail: = EMAIL ADDRESS REMOVED =
WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/
From: Jukka K. Korpela
Date: Tue, May 03 2005 9:57PM
Subject: Re: define "liquid design"
← Previous message | Next message →
On Tue, 3 May 2005, Sandra Fernandez wrote:
>> I'm having a difference of opinion with someone on my redesign committee
>> about the meaning of "liquid design."
The best approach is to accept any definition they give for "liquid
design" and then start discussing what makes pages more accessible.
If they call their inaccessible design idea "liquid design,"
agree with them, and concentrate on showing how it is inaccessible.
Things are more difficult, of course, if you have to play by rules that
set "liquid design" as a goal (or criterion), without defining what it is.
-- Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Michael Moore
Date: Wed, May 04 2005 6:12AM
Subject: Re: define "liquid design"
← Previous message | Next message →
There is a very good article on "liquid design" here,
http://www.sitepoint.com/article/liquid-design
You can also find a large number of useful artilcles on the subject at http://www.alistapart.com
Mike
Christian Heilmann wrote:
>> Thanx. I have been given a design that's being defined as liquid.
>> However, it starts at a fixed width for an 800x600 screen, then becomes
>> larger when you increase the font size, not when viewed with a larger
>> resolution screen. I was trying to find something that supported my
>> assertion that that's not really liquid design.
>>
>> Any and all suggestions, comments, etc. are appreciated.
>
From: Tim Beadle
Date: Wed, May 04 2005 6:18AM
Subject: Re: define "liquid design"
← Previous message | Next message →
On 5/3/05, Sandra Fernandez < = EMAIL ADDRESS REMOVED = > wrote:
>> Thanx. I have been given a design that's being defined as liquid.
>> However, it starts at a fixed width for an 800x600 screen, then becomes
>> larger when you increase the font size, not when viewed with a larger
>> resolution screen. I was trying to find something that supported my
>> assertion that that's not really liquid design.
As someone else pointed out - that's flexible design, although I've
more often heard it called elastic design.
Patrick Griffith's "Elastic Lawn" at the CSS Zen Garden is a good example:
http://www.csszengarden.com/?cssfile=/063/063.css&;page=0
Jeremy Keith wrote about the fixed vs liquid debate:
http://adactio.com/journal/display.php/20050415012704.xml
http://adactio.com/journal/display.php/20050418221414.xml
Regards,
Tim
From: Tim Beadle
Date: Wed, May 04 2005 6:21AM
Subject: Re: define "liquid design"
← Previous message | Next message →
On 5/3/05, pixeldiva < = EMAIL ADDRESS REMOVED = > wrote:
>> To my mind...
>>
>> Liquid design = fills the page, no matter what size the window/screen
>> resolution.
I don't mean to be pedantic, but a liquid design doesn't have to
*fill* the page/window. There could be a 100px margin around the
content, but if the content changes size when the window size is
changed, then that's liquid design.
It's all about what mechanism alters the size of elements. It's either:
1. The window (liquid design),
2. The current font size (elastic/flexible design), or
3. Nothing (fixed design).
Best regards,
Tim
From: pixeldiva
Date: Wed, May 04 2005 6:57AM
Subject: Re: define "liquid design"
← Previous message | Next message →
On 5/4/05, Tim Beadle < = EMAIL ADDRESS REMOVED = > wrote:
>> I don't mean to be pedantic, but a liquid design doesn't have to
>> *fill* the page/window. There could be a 100px margin around the
>> content, but if the content changes size when the window size is
>> changed, then that's liquid design.
Okay, but if we're being pedantic, isn't that 100px margin around the
content part of the design?
As in, it's been designed to have 100px of white space around the
margin, and so the "design" does fill the page/window, but the
"content" doesn't necessarily.
>> It's all about what mechanism alters the size of elements. It's either:
>>
>> 1. The window (liquid design),
>> 2. The current font size (elastic/flexible design), or
>> 3. Nothing (fixed design).
That's a better way of putting it than I managed to come up with late
last night.
pix
http://www.pixeldiva.co.uk
From: Tim Beadle
Date: Wed, May 04 2005 7:01AM
Subject: Re: define "liquid design"
← Previous message | Next message →
On 5/4/05, pixeldiva < = EMAIL ADDRESS REMOVED = > wrote:
>> Okay, but if we're being pedantic, isn't that 100px margin around the
>> content part of the design?
>>
>> As in, it's been designed to have 100px of white space around the
>> margin, and so the "design" does fill the page/window, but the
>> "content" doesn't necessarily.
Good point. You're obviously a designer (I mean that as a
compliment!). Not everyone sees space as a design element...
>> That's a better way of putting it than I managed to come up with late
>> last night.
Thanks!
Tim
From: Austin, Darrel
Date: Wed, May 04 2005 8:39AM
Subject: RE: define "liquid design"
← Previous message | Next message →
>As someone else pointed out - that's flexible design,
>> although I've more often heard it called elastic design.
I've also seen 'elastic design' used to define a liquid layout that also
takes measures to ensure a working min and max-width to the content.
In the end, these are all just terms used loosely, so, like Jukka said,
concentrate more on the solution and less on the terminology ;o)
Personally, sites that are fixed proportion and scale as a whole based on
font-size aren't terribly usable. It assumes that if I need large type, that
I must also have a large browser viewport and that if I'm OK with small
type, then I must be OK with all of the page content being shrunk down into
a narrow column. I tend to see that type of design 'lazy liquid design for
designers that are too anal to let go of print design concepts' ;o)
-Darrel
From: Laura Carlson
Date: Wed, May 04 2005 12:46PM
Subject: Re: define "liquid design"
← Previous message | Next message →
Some references:
http://www.d.umn.edu/goto/usability#liquid
___________________________________________
Laura L. Carlson
Information Technology Systems and Services
University of Minnesota Duluth
Duluth, MN, U.S.A. 55812-3009
http://www.d.umn.edu/goto/webdesign/
From: Terence de Giere
Date: Fri, May 06 2005 12:17PM
Subject: Re: define "liquid design"
← Previous message | No next message
One reason for liquid design is that it allows the user to set the width of the window for a line length that is optimum or most comfortable for reading, which can vary from user to user, especially if they need to change font size. Large screens's usability advantage with a graphical user interface is multiple windows can be open and seen without 'window thrashing' - having to change windows in the interface so see content hidden by other windows.
There is evidence that users of larger screens do not usually have the windows maximized. It is often argued that line length with liquid designs is too long with large screens, but with exceptions like large spreadsheets and large graphics, it is not necessary to have windows maximized; that's the reason for a large screen, to have many windows open and all visible. On the other hand, visual impairment may require a large screen with a window at full width and large fonts for readability, and a liquid design is ideal for this, and with many setups no special additional technology is required except a large screen.
I have, however, encountered non-disabled users that don't seem to know they can resize a window, and complain that line length in a liquid design is too long. So the question is: do we shortchange disabled access for accommodating users that don't know how to benefit from the equipment they have?
Terence de Giere