PantherTrick: A Crash Course in "A List Apart"

Written by Joe Kohlmann

Chances are you’ve heard of A List Apart by now. Hopefully you’ve taken a tour of ALA and have checked out some of the [really] neat tricks that many of the articles describe, but hopefully you’ve also skimmed a few of the articles that take a standard technique used across the web and offer a better solution.

There are many of these articles, but here’s a sampling of the ones I very often refer back to when building a website:

Creating Liquid Layouts with Negative Margins

This technique solves a potential usability problem that the standard technique of creating a floating sidebar presents: why must the sidebar content come before the main content in the HTML code?

Usually we need to do this because of how CSS floats work – the floating element causes proceeding elements to flow around it. Though less of a problem with modern, CSS-compliant web browsers, consider how a web page using this technique will look on a mobile phone that doesn’t support CSS, or the order in which a screen reader will read the page to the user. In both cases, the sidebar will come first, and depending on your own design philosophy, this might not be what you had in mind.

The article presents a technique that allows you to place the main content before the sidebar in the HTML code, allowing the viewer to get straight to the most important content, no matter how they access or navigate the page.

Exploring Footers

Ever wanted a more versatile footer in your web page? This ALA article describes a technique for a footer that will display after the bottom of a page’s content, or at the very bottom of the browser window if the content is too short.

Faux Columns

You may have noticed that giving a sidebar a background color or background image does not cause that background to extend beyond the height of the sidebar’s content. Using a background image and some more tricks, you can style your page with a sidebar background that extends to the entire height of the browser window.

Cross-Column Pull-Outs

Though CSS 3 supports multi-column layouts, some web designers can’t wait for all major browsers to support these standards (because, frankly, they’d be waiting an excruciatingly long time!). Meanwhile, you can use the techniques in this article to create print-like columns and text flow on the web.

CSS Sprites: Image Slicing’s Kiss of Death

If you only read one of these articles, make it this one. Web design master Dave Shea describes the definitive technique for making CSS-based image rollovers. Sure, DreamWeaver can do image rollovers, but not as cleanly or as elegantly as you yourself can, using only CSS. This technique is easy to master, easy to appreciate, and, in my opinion, absolutely indispensable.

Also Recommended

A List Apart is a long-running web magazine that both amateur and professional web designers read and comment on daily. In this author’s opinion, there’s nothing else out there with the same amount of detail, quality, and polish as ALA.

6/7/09

A Crash Course in "A List Apart"