<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>blog - coda.coza &#187; elastic</title>
	<atom:link href="/blog/tag/elastic/feed" rel="self" type="application/rss+xml" />
	<link>http://coda.co.za/blog</link>
	<description>dress up. leave a false name. be legendary.</description>
	<lastBuildDate>Wed, 26 Aug 2009 19:17:46 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>A summary of CSS-based layout techniques</title>
		<link>http://coda.co.za/blog/2005/06/16/a-summary-of-css-based-layout-techniques</link>
		<comments>http://coda.co.za/blog/2005/06/16/a-summary-of-css-based-layout-techniques#comments</comments>
		<pubDate>Thu, 16 Jun 2005 17:11:16 +0000</pubDate>
		<dc:creator>coda</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[constrained]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[elastic]]></category>
		<category><![CDATA[fixed]]></category>
		<category><![CDATA[fluid]]></category>
		<category><![CDATA[jello]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[progressive]]></category>
		<category><![CDATA[resolution]]></category>
		<category><![CDATA[standards]]></category>

		<guid isPermaLink="false">http://coda.co.za/blog/2005/06/16/a-summary-of-css-based-layout-techniques</guid>
		<description><![CDATA[Over the past few months, I've mentioned in my weblob a number of new and exciting layout techniques that have surfaced. Below is a summary of the traditional CSS-based, tableless layouts, and these new techniques that you as a web designer would hopefully consider while planning a standards-compliant site. I've also included what I believe [...]]]></description>
			<content:encoded><![CDATA[<p>Over the past few months, I've mentioned in my <a href="/weblob">weblob</a> a number of new and exciting layout techniques that have surfaced. Below is a summary of the traditional CSS-based, tableless layouts, and these new techniques that you as a web designer would hopefully consider while planning a standards-compliant site. I've also included what I believe are the pros and cons of each technique, links to examples, and where possible have credited their author and/or origins. This summary is a <acronym title="Work In Progress">WIP</acronym>.</p>
<p>I've used the word '<a href="http://www.google.com/search?hl=en&amp;lr=&amp;client=firefox-a&amp;rls=org.mozilla:en-GB:official&amp;oi=defmore&amp;q=define:viewport" title="Definitions of viewport on the Web">viewport</a>' in the context of the browser size and not screen resolution.</p>
<p>If you can't figure out the rendering differences between the techniques, you may want to try each at different viewport sizes (increase your screen resolution and/or browser width) and at different <a href="http://www.metnet.edu/textsize.html" title="How to Change the Browser Text Size">browser text sizes</a>. Use <a href="javascript:var rto=prompt('Resize this window to:','800*600');if(rto!=null){void(rtoX=parseInt(rto.match(/\d+/)));void(rtoY=parseInt(rto.match(/\d+$/)));void(window.resizeTo(rtoX,rtoY));}">this bookmarklet</a> (drag it onto your Bookmarks Toolbar or into your Favourites) to easily resize your browser width.</p>
<p>I'd like to keep this list fresh, factual and unbiased - please <a href="/archive/20050616/17:11:16#addcomment">comment</a> or <a href="/contact">drop me an e-mail</a> if you have something to contribute. And no debates over personal preference, please.</p>
<ol>
<li><strong><span class="hilite">Fixed</span></strong>: layout is determined by absolute dimensions, typically to fit a viewport with a width of around 800 pixels. With 1024x768 resolutions gaining popularity, there is a growing trend to design exclusively for this size.<br />
<em><br />
Pros</em>: Easy to implement.<em><br />
Cons</em>: Supports single scenario only. Typically breaks when browser text size is adjusted.<em><br />
Examples</em>: <a href="http://www.news.com">news.com</a> (800), <a href="http://www.download.com">download.com</a> (1024), <a href="http://www.theonion.com/content/index">theonion.com</a> (1024), <a href="http://www.macromedia.com">macromedia.com</a> (800), <a href="http://www.24sata.hr">24sata.hr</a> (1024), <a href="http://www.bmw.com">bmw.com</a> (1024)</li>
<li><strong><span class="hilite">Liquid</span> (aka. Fluid)</strong>: layout is determined by relative dimensions, typically percentage values to fit 100% of the viewport.<br />
<em><br />
Pros</em>: Accommodates all viewports. Larger volume of content is viewable without scrolling. Scalable and flexible for forward-compatibility.<br />
<em>Cons</em>: On wide viewports, readibility suffers from long lines of text.<br />
<em>Examples</em>: <a href="http://wired.com">wired.com</a>, <a href="http://sercotransarctic.com">sercotransarctic.com</a></li>
<li><strong><a href="http://www.themaninblue.com/writing/perspective/2004/09/21/"><span class="hilite">Resolution dependent</span></a></strong> (by <a href="http://www.themaninblue.com/writing/">Cameron Adams</a>): varying layout according to viewport width. When the width is adjusted, the layout is dynamically adjusted accordingly. JavaScript required, but degrades gracefully.<br />
<em><br />
Pros</em>: Full control over how changes in the viewport have an effect on the content. Flexible.<br />
<em>Cons</em>: Time-consuming, more maintenance required.<br />
<em>Examples</em>: <a href="http://www.themaninblue.com/experiment/ResolutionLayout/">Author's demo</a>, <a href="http://www.rammstein.com">rammstein.com</a>, <a href="http://www.smh.com.au">smh.com.au</a>, <a href="http://www.microsoft.com">microsoft.com</a> (last two require browser reload).</li>
<li><strong><a href="http://www.alistapart.com/articles/elastic/" title="Elastic Design - A List Apart"><span class="hilite">Elastic</span></a></strong> (by <a href="http://www.htmldog.com" title="A Good Practice Guide to XHTML and CSS">Patrick Griffiths</a> and more recently, <a href="http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/" title="Fixed or fluid width? Elastic!">Roger Johansson</a>, and again by <a href="http://www.stopdesign.com/log/2005/06/24/zoom-layout.html?style=zoom" title="Zoom layout">Douglas Bowman</a>):  resizes to browser font size. Similar to <a href="http://www.opera.com/support/tutorials/tips/index.dml" title="Scroll down to 'Zoom'">Opera's zoom function</a>.<br />
<em><br />
Pros</em>: Takes the user's preference into account. Flexible. Accessible.<br />
<em>Cons</em>: Time-consuming, more maintenance required. Difficult to make images scale.<br />
<em>Examples</em>: <a href="http://www.mozilla.org">mozilla.org</a>, <a href="http://www.yahoo.com/">yahoo.com</a>, <a href="http://www.aol.com">aol.com</a>, <a href="http://www.csszengarden.com/?cssfile=/063/063.css&amp;page=0">Elastic Lawn</a> (CSS Zen Garden)</li>
<li><strong><a href="http://uwmike.com/archive/jello-liquid-layout/" title="A Different Liquid Layout"><span class="hilite">Jello</span></a></strong> (by <a href="http://uwmike.com" title="uwMike">Michael Purvis</a>): a combination of Fixed and Liquid.<br />
<em><br />
Pros</em>: Scalable and flexible for forward-compatibility.<br />
<em>Cons</em>: Steep learning curve.<br />
<em>Example</em>: <a href="http://uwmike.com/layout/jello/index2.php">Author's demo</a>.</li>
<li><strong><a href="http://pro.html.it/articoli/id_620/idcat_31/pro.html"><span class="hilite">Progressive</span></a></strong> (by Alessandro Fulciniti): a combination of Fixed and Liquid. A Fixed layout under and over certain pixel widths, while Liquid inbetween. JavaScript required, but degrades gracefully.<br />
<em><br />
Pros</em>: Scalable and flexible for forward-compatibility.<br />
<em>Cons</em>: Steep learning curve.<br />
<em>Example</em>: <a href="http://pro.html.it/esempio/proglayout/2col.html">Author's demo</a>.</li>
<li><strong><span class="hilite">Constrained</span></strong> (aka. <a href="/archive/20040723/05:39:05" title="Rebranded. Redesigned. Redeveloped.">Untitled</a>): Liquid layout up to a maximum pixel width.<br />
<em><br />
Pros</em>: Scalable and flexible for forward-compatibility.<br />
<em>Cons</em>: uses IE's proprietary CSS rule to emulate max-width property.<br />
<em>Example</em>: <a href="/">This site</a>.</li>
</ol>
<img src="/blog/?ak_action=api_record_view&id=663&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://coda.co.za/blog/2005/06/16/a-summary-of-css-based-layout-techniques/feed</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>
