A 'Liquid' List Apart

by Matthew James Taylor on 3 February 2008

A 'Liquid' List Apart
A list apart with a liquid layout

A List Apart is a great website that helps promote web accessibility and usability. It has become a top resource for many web designers both novice and professional alike and I have been a fan and avid reader for a long time. But it occurred to me the other day that their layout is not particularly user-friendly. Rather than taking advantage of the fluid nature of the web and using a liquid layout, they have a fixed-width design. This is somewhat ironic as you would expect such a website would 'do as they suggest' and make their website as accessible as possible.

Well I have decided to do something about it. I spent a few hours working on a new mockup that uses a liquid layout. Here it is:


A 'liquid' List Apart


I was quite surprised when I got deep into their CSS code, it's actually a bit messy and the homepage has 8 CSS hacks to say the least! I left most of their CSS in place and just folded in some rules from my 3 Column Holy Grail Liquid Layout to change the design. It might be a little rough around the edges but it gives you an idea of how it should look.


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor