Web data grid design principles

Question

I am looking for good reading references of styling data grids for web. Not necessarily the technical details (how to do it), but more guiding principles (what to do). Something like the Apple's Human Interface Guidelines, but for web and more specifically for data grids.

Answer 1

I don't think datagrids on the web (that is, inside web apps) are that different from desktop apps. It's all about being functional.

Consider the desktop apps you use which have functional data grids and think about how they've designed them (ie. font face/size, zebra stripes, borders, etc).

Whitespace in particular is important - Luke W has a usability article on whitespace which illustrates this point in table design.

Answer 2

I agree with Sam - grid based design is grid based design, regardless of where it's implemented (web page, desktop app, billboard, newspaper). That said, a search for "grid based web design" returned the following:

• Ultimate Guide To Grid-Based Web Design: Techniques and Tools
• Designing With Grid-Based Approach
• Design by Grid

I glanced through these and they seemed to include all the information that I expected to see.