No Resolution » Resources

Resources

Need help with liquid design? progressive design? good design? These links might help.

Liquid layouts using CSS - the joy, the pain, the tears: A presentation by Russ Weakley at the Web Essentials ‘05 conference on making liquid layouts work.
Liquid Design for the Web: An article from Evolt.org with advice and techniques on making liquid layouts work.
Experiments with Wide Images: A great article from Clagnut on using images in liquid containers. It attempts to show wide images in a variable width column, using CSS techniques to shrink or crop the image.
Liquid Image: An article by Michel Fortin on liquid images.

One clean HTML markup, many layouts: TJK Design managed to make 8 great liquid layouts with just one HTML page. If you need a robust and clean liquid layout, this is a great place to start!
Layout Gala: Layout Gala features 40 layouts, all built with the same HTML markup. Most are liquid and all are highly cross-browser compatible.
Ruthsarian Layouts: Offers great 2 and 3 column liquid layouts with nice accessibility features and great cross-browser compatibility.
YAML: Yet Another Multicolumn Layout: YAML is a great, flexible layout.
CSS Layouts - Saila.com: Liquid 3 column layouts from Saila.com.
CSS Layout Techniques - glish.com: 2, 3, and even 4 column CSS liquid layouts.
Layout Reservoir - BlueRobot: 2 and 3 column layouts.
An Adaptable, SEO Friendly 3-Column CSS Layout: An implementation of a 3-column layout based on the “opposite” or “opposing” floats concept that is partly fixed and partly fluid.
Perfect Multi-Column CSS Liquid Layouts - Matthew James Taylor: This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch.

Liquid Round Corners: Thanks to Francky’s Developers Corner we have Liquid Round Corners, a method for making transparent, rounded corners on fluid width boxes.
Fluid Flash: Gareth of morethanseven.net found a great way to make Flash content fluid, so you can make a Flash header that integrates seamlessly with any liquid layout.
Progressive Layout with Javascript: The biggest concern with liquid designs is the way they behave on resolutions larger than 1024 pixels wide. This can easily be fixed with the CSS attribute max-width, which is used on this site. Unfortunately, this attribute is not supported on Internet Explorer. This article offers a technique that uses Javascript to simulate the effect of max-width. For users without Javascript, a fixed layout is served.
Faux Columns for Liquid Layouts: This article explains how faux columns can be applied to liquid layouts.
Wicked Worn and Bulletproof Liquid: How to get the wicked worn look on your liquid layout, courtesy of Nils T. Devine.
Switchy McLayout: An Adaptive Layout Technique: An article on using Javascript to shift content with respect to the viewport size.
Flexible CSS Teaser Box: Roger Johansson has a great technique for making fluid, rounded-corner boxes with just two images.
Stretchy Images with HTML and CSS: A perfect example of how creative ideas can make fluid design both attractive and bulletproof.

About Fluid and Fixed Width Layouts: An excellent article from 456 Berea Street that describes all the details that went into its fluid / elastic design.
The Reboot Story at Escape Crate: How the amazing liquid layout at Escape Crate was done.
Elastico!: An entry by Francky at Gigastyle, a Belgian version of the CSS Zen Garden. His entry is a combination of elastic and liquid elements, and it shows some amazing techniques with fluid backgrounds.
Site in an Hour: Andrew Krespanis takes a complex design mockup and makes a solid fluid-width CSS layout for it.