Bulletproof Tuesdays - Ch. 3 - Expandable Rows

Hey, looks like you're new here. You may want to subscribe to my RSS feed. Thanks for visiting!

In week 3 of Bulletproof Tuesdays we’re going to talk about expandable rows. Bulletproof Web Design teaches us that ecommerce sites such as Target.com or BestBuy.com tend to have horizontal page components such as login bars, search bars, and deal alert bars underneath their headers.

A common way of designing these bars is using using nested tables and spacer gifs, which are undesirable because they prohibit vertical expansion. If you want to increase the text size or update the bar with more content, the layout becomes broken. Designing with tables and spacer gifs you end up with nonessential graphics, a fixed height, and code bloat on top of less flexibility.

A more Bulletproof approach is to not use tables at all, but to use divs. To start well need to parts, an unordered list and a div wrapped around a paragraph. I won’t bore you with code, and there is plenty of it in the book, but what makes using divs instead of tables far superior is the fact that you separate your presentation from your content and that it can expand with no extra effort on your end.

I don’t have any rows like this on my site to show as examples, but maybe I should add one to the redesign. Two great techniques that I took from this chapter are using opposing floats to put content on either end of a row and the use of style hooks. Using id’s to attach style to unordered lists and divs. Very clever stuff.

If you have any questions feel free to leave a comment. Otherwise I’ll see you next Tuesday with Chapter 4.

Popularity: 6% [?]