Dave Winer asks:
A question for CSS design gurus. What’s the best you can do with a table that has three columns like the one on Weblogs.Com. Let’s see an example. I’d like the page to look good and load fast. Postscript: No one seems to understand — I want to do weblogs.com without a table. Column 1 is the number, column 2 is the name of the weblog. Column 3 is the time it last updated. Look at the page.
Hmmm. CSS design gurus. More lists. Ok, should be easy. (So I thought.) I haven’t contributed to any “markovers” yet, and this one seems like a simple enough challenge. There’s gotta be a way to do this one. Let’s take it on.
So there are speed issues, and most likely some accessibility issues. Like Simon Willison debated (where I originally spotted this), I initially wondered if this tabular list should be kept as a <table>. But it does kind of scream out as an ordered list (<ol>). An ordered list would number each item automatically, thus taking out one of the columns Dave mentions. But there’s still two more separate data pieces (columns) to worry about. The weblog name (linked) and the time it was last updated. Let’s assume Dave is completely happy with the design of the page, including the way the update time is tabbed away from the weblog, just like a normal table would do.
First, to quickly put the problem into context, the front page of Weblogs.com is a simple list of recently updated weblogs. Often, a massive list, and one that is constantly updated (thus a page that isn’t normally loaded from the browser cache). The list itself can have over 1,000 weblogs indexed at a time. Currently, the list is rendered inside a table, one row of three cells for every single weblog listed.
The raw file size of the HTML itself was around 174 KB when I sucked down the file, and it displayed 1,044 weblogs. The bigger problem here is that most browsers must load and calculate the layout of the entire table before rendering any of it. On fast connections, there may be a slight delay of 1 second or so, but dial-up users suffer a bit more. The single table Dave points out isn’t the only issue on the page though. The weblog list table is one of several tables on the page, and is in fact, nested within a table that lays out the structure of the entire page (left, middle, and right columns). So even if the inside list table were eliminated, some browsers would still require the entire content of the page to load before displaying any of the content within the layout table.
So I set out not just to eliminate the inside table, but all 12 tables on Weblogs.com’s front page. (Afterall, that’s what we did with Wired News, right?) And while I’m at it, might as well go overboard and push it all the way to valid XHTML 1.0 Strict too.
So without pontificating any further (geez, I can be long-winded) here’s the my solution.
[Before IE5/Mac users scream at me, yes, I know. It looks awful, thanks to what looks like a recursive left margin on each list item. (Did you know a page could get that wide?) But read on, there’s another solution below.]
A summary for now, then more later when I have time, simply because I think it may be useful for others to see what happened here :
- First objective: no tables – met.
- Second spin-off objective: smaller file size – from 174 KB down to 105 KB. That’s a nice reduction. Oh, and if you’re counting, the CSS file is only an additional 2.5 KB.
- Browser compatibility – Admittedly, I don’t have access to every browser considered “standards-compliant”. But of the ones I tested, this version looks almost identical in all of them. Win: IE5, IE6, Moz1.2, NN7, Op6. Mac: IE5.2, Moz1.1, Op5, Chi.6, Safari1.0b. Opera still gets CSS font-size keywords wrong, and IE5.0/Win displays bullets (discs) instead of numbers for the weblog list.
- Hidden styles – Older or non-compliant browsers have styles hidden from them, and thus, get an unstyled version of the page. This is nothing new for anyone familiar with my work in the last few months. (Some Netscape 4 users love how much faster this makes their pages, and could care less about any designer’s styling.)
- Order of markup – For this one, I didn’t like a solution where the left-side navigation list comes before the “Weblogs.com” image and UserLand header. Same thing with the footer not appearing at the absolute bottom of the page. Thanks to absolute positioning of the navigation list and the right-side images/icons, we can re-order the markup so that it makes the most hierarchical sense in the unstyled version too.
- Skip the header – A single skip link was added above everything, (which will show up in the unstyled version) allowing a jump down to the “Recently Changed Weblogs” heading.
- Design preserved – I came really close on this one. The only detail I couldn’t effectively reproduce (without causing bugs in certain browsers) is the drop-shadow behind the entire main column, (seen here in the original version). I’m sure others will have ideas on this if it’s absolutely necessary.
- Adjustments – I took several small liberties with the actual appearance of the page. Like bringing down the total width of the page by about 35 pixels to help it fit better within 800×600 resolution.
- Tiny easter egg – The single shadow I managed to recreate (beside the UserLand tab) is not part of the image referenced in the HTML. It looked too odd in the unstyled version, so it was cropped off and added back in via a CSS
background-image.
So on that IE5/Mac issue? Couldn’t reproduce it in any other browser. For those without the luxury, see this screenshot which shows the problem. Once again, it comes down to just one browser that can spoil a perfectly good solution for the rest of us. (Mind you, it’s not always IE5/Mac.)
So instead of applying a relative-width left-side margin (using em‘s) to the ordered list’s <li>, we end up applying a fixed-width margin (using px‘s) to the <ol> instead. This second solution ensures it works in IE5/Mac too. No difference in the HTML. Just a few adjustments to the CSS around “The Big List” section, including another required use of the box model hack to get around IE5.x/Win width and padding problems.
Don’t give up on CSS yet, Dave.