And now for a little progressive enhancement

So I finally got around to working on my feeds page. It wasn’t very impressive as you can see in the screen cap below.

Screen capture of old feeds page

Old feeds page

At first I had a hard time trying to figure out how to accommodate so many feed chicklets. I have 5 feeds times 8 chicklets each, bronchitis that comes out to 40 little images that needed to be laid out in such a way so as not to look so busy. (Even more have been added since the writing of this post. At last count we’re up to 60 chicklets.) I finally came up with the current solution as illustrated in the screen caps below.

Screen capture of new feeds page in IE

New feeds page in IE

Screen capture of new feeds page in Firefox

New feeds page in Firefox

Screen capture of new feeds page in Firefox with one feed panel expanded

New feeds page in Firefox with one feed panel expanded

You’ll notice that one version has all the feed chicklets visible, ask that’s in IE. Firefox on the other hand has only the little orange XML icon visible and gives you the rest once you hover over it. Now I used the term progressive enhancement in this post’s title because–like this site’s rounded corners you only see in Firefox–you’re able to experience the show/hide functionality in Firefox due to its more comprehensive support of CSS2 (granted the rounded corners are a proprietary Mozilla feature but who’s going to wait around for CSS3? ;-). In other words, the better the browser the nicer the experience.

For bonus points try and find a “progressive enhancement” feature in this very post!

Tags: