The Handy-Dandy Layout Library

August 6, 2006

One of the handiest "tricks" I've come across is having a layout template library at your fingertips. It's taken me a while to build mine, but now I have a tried-and-true layout for most of the common designs. It makes life a lot easier if you can grab a layout "skeleton," knowing that it will work for the design and won't present you with nasty little surprises halfway through. In my library, I've got both fluid and fixed two- and a three-column layout templates. Because I work with content management systems a lot, the order in which the HTML content is output is often important, so I add that information as well in the file name of the layout. For instance, if I open my library folder, I see I have these layout files: 3fixed-cont-side-side.html and 3fluid-cont-side-side.html. The first is a layout template for a three-column layout with a fixed width that works well for designs where the content appears first on the HTML page, followed by two groups of navigational or other "side" information. The second template works well for the same sort of HTML page, but is for a fluid (or elastic) design--probably with fixed side columns, just because it's what I prefer. The longer I design, the larger my template library grows. Every time I come across a new layout that works well, I'll stick it in the library. The trick is coming up with a file naming system that makes sense to me and conveys all the information I need to pick out the right template at a glance. So, maybe this trick won't exactly stun and amaze your friends. But on groggy-eyed mornings, it sure comes in handy.