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.
- 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
- 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.
- 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.