Search

3/24/2008

Fixed vs Liquid vs Elastic @ The Autistic Cuckoo

Fixed vs Liquid vs Elastic @ The Autistic Cuckoo

Fixed Width
A fixed-width design is one where the widths of the page's content
and its various components are specified in an absolute unit of measurement
(usually pixels, but it is conceivable that points, inches, centimetres etc.
could be used). The most important trait of a fixed-width design is that the
reader cannot change the width, either by resizing the browser window or by
changing the text size.

Liquid
A liquid or fluid design means that all page components
have their width specified as a percentage of the viewport's (browser window's)
width. If the reader makes the window wider or narrower, the design adapts, but
it isn't affected by changes in text size.

Elastic
An elastic design means that the widths of page components are
specified in units relative to the text size (em or
ex). Such a layout will grow or shrink as the reader changes the
text size, but remains unaffected by changes in the viewport size.

Fixed Width
pros: The advantage of a fixed-width layout is that the designer has full
control over where the different page elements end up.
cons: A reader with a mobile phone or
a handheld computer will have to scroll laterally; a reader with a
high-resolution monitor will see a narrow strip in the middle of the screen;
when printing, the right-hand side can end up off-page. Besides, when the
reader increases the text size, the text will sooner or later break out of a
narrow column and we have an overlap that can render the page unreadable.

Liquid
pros: The advantage of a liquid design is that the reader will never have to scroll
sideways, regardless of his or her monitor size.
cons: the
lines of text become way too long on a large monitor, and overlap is hard to
avoid in small windows when a column becomes too narrow to contain long words.

elastic layout
An elastic layout has most of the same advantages and disadvantages as a
fixed-width design, except that it doesn't break because of changes in text
size.

沒有留言: