A 'Liquid' List Apart
by Matthew James Taylor on 3 February 2008
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:
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.
Tagged:
Enjoy this article?
If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)
Horizontally Centered Drop-Down Menus A detailed article explaining how to add drop-down submenus to my centered menus
Exploring web typography: An experimental CSS hover layout An experimental website layout using the CSS hover pseudo-class and plain XHTML
Ultimate Liquid Layout Drupal Themes Thanks to Gaus Surahman my ultimate liquid layouts are now available for download as themes for the Drupal CMS
Link Source Ordering Master link source ordering and you will be able to redirect link popularity to key pages in your website
Equal Height Columns with Cross-Browser CSS A step by step tutorial explaining how to create multicolumn layouts with divs and CSS where every column is the same height