On the one year anniversary of the article: Throwing Tables Out the Window, I thought it appropriate to reveal some behind-the-scenes info regarding the Microsoft example discussed in the article.
When I published that article last year, the words and advice contained within were welcomed warmly by large numbers of people. The article was translated into at least eight different languages, and continues to be referenced in other writings and in academic curricula. On the flip side, the same article was also the cause of flaming, accusations of ignorance, and general vitriol thrown my way, claiming I was over-hyping CSS and deceiving the multitudes of its capabilities. Those claims were voiced more loudly when readers couldn’t find any proving example code whatsoever. Those who refused to let go of their old ways assumed that I fabricated the entire case study.
I still stand behind that article. And I promise the example code is real, and still resides in the same location where it has been for the past year. You just had to know where to look for it.
I intentionally omitted any links or references to my working code examples in that article because the point was not to get hung up on details or to demonstrate the methods used. I wanted to step back and look at the overall picture. After experience with recoding Yahoo Search, I no longer believe in reworking (in CSS) some other organization’s site, then publicly rubbing anyone’s nose in it by posting the code for all to see. I wasn’t trying to target Microsoft for bad CSS support in IE, nor make a fool of its home page code. Rather, last year’s home page of Microsoft.com was chosen as an example because it was a high-profile representation of a very common design model used on thousands of sites: header across the top, three columns of content, and footer across the bottom. If a site doesn’t use a three-column content model, it may simplify the same model down to two columns:
I gave this presentation for the first time in Seattle, right around the corner from Redmond. So I thought the selection of reworking Microsoft would turn a few more heads. Those who attended my talk at Digital Design World had full access to the Microsoft example code during and after my presentation. It was never hidden from them, because it was used as a tool to aid in learning the methods and benefits of tableless design.
In an odd bundle of circumstances, Microsoft ended up redesigning its home page just one month after my Seattle presentation, significantly reducing the file size of its code. The design was simplified and the amount of text on the page was significantly reduced as well, so this wasn’t solely a reduction due to leaner code. However, all spacer gifs seem to be gone from the markup, and only eight tables remain in the current version, so that points to progress from last year’s 40-table version.
Fast-forward to today
Now that a full year has passed since the article was published, and because Microsoft no longer uses the design I made an example, I also moved on and now use another design for my tableless presentations. Because of these factors, it now seems appropriate to share more broadly the final example code I used, and the full set of slides I used during my Seattle presentation to cover the reworking of Microsoft.com.
- Example code: 2004 Microsoft home page using CSS
- Seattle presentation: No More Tables
The portion covering the recoding of Microsoft.com doesn’t start until somewhere around page 32 of the presentation. Once the presentation gets to Step #3, small links at the bottom of the page point to in-progress files representing the work done up to that step.
By sharing even more information surrounding this case study, I hope having everything in context to this case study helps enlighten others to the means and the power in using CSS to implement and control layout and all other details of design.
woo first comment,
nice work with the css, I remember when you talked about it at we04 =)
Thanks for the code and presentation.
However most of the links to the MS site in the presentation don’t work. Is this on purpose or am I just too early?
I no longer believe in reworking (in CSS) some other organization’s site, then publicly rubbing anyone’s nose in it by posting the code for all to see.
Out of curiosity, what happened with Yahoo? And moreover, what would be wrong, precisely, with posting the code immediately? You’re a reasonable fellow, and not given over to being didactic or rude, so I’m not sure how posting the code is rubbing their nose in an organization’s shortcomings. If your tone on your blog were different, I might agree that posting code would be rubbing their nose in it.
In any case, their design code is by definition available for all to see. Isn’t that more damning than any redesign you might come up with?
@simply: Sorry about that. The pitfalls of using the same code for multiple presentations last year — the order of steps was rearranged for the second presentation.
The Seattle presentation file is now updated so that all links point to working files. The steps are a little out of sequence, especially with regards to when the footer is tackled. But each file still represents the work discussed in that step.
That was a great presentation, thanks!
It cleared some of my doubts about floats and how I can use them more effectively.
And I agree with David, I don’t see anyone will think that you are rubbing someone’s nose, if you put the code online. In fact, I think it helps others realize power of CSS and removes the last obstacle in their switch to CSS.
JD
@David: Nothing bad happened with Yahoo. In fact I ended up running into one of the User Experience Directors at a party a month later, and she immediately tried to offer me a job.
I point to Yahoo only because that was the one case where I recoded an existing site without that organization first asking me to do so. (The Weblogs.com example was a case of Winer asking if CSS could do any better.)
Since reworking Yahoo Search, my perspective changed on whether or not it’s ok to do what I did. Redoing a site in CSS, then immediately publishing the code in a public place for everyone to see might be deemed offensive by the target organization. It might be seen as a a public touting of “I know better than you” or “let me prove you wrong” kind of thing, no matter how the reworking is described or offered. I know the tone of my writing is reasonable and never provocative, but you never know how an organization might respond to being shown an alternative to something its team spent days, weeks, and months creating.
I also think it’s a bad precedent to set by reworking someone else’s site without having been asked to do so, then posting the new version for everyone to see. I’ve seen many people with good intentions target a certain site (eg: Google) and recode it in valid HTML and CSS. And you know… the end result isn’t always better than what the original site serves up. The person who does the recoding isn’t always aware of the constraints and possible scenarios faced by the target organization.
In general, I’m now against public recoding of anyone’s site. If any improvements can be made, or a really strong case study could suggest significant improvements, send it straight to the web department of that organization, rather than post it to your blog or any public forum. That way, I think there’s more chance of it looking like constructive criticism, rather than a public offensive and insult on the web team’s skills.
I think that no matter what example you would’ve chosen, there would be high levels of flaming and vitriol. Microsoft just happens to be a “bad” combination of extra high-profile factors, the most important of which being that they are the developer of Internet Explorer, loathed by many modern web designers.
Of all the sites you could’ve taken as an example, I would place my bets that the MS homepage is the most “dangerous” one to choose. You did a great job, though, back then with the task itself and right now with providing the code and additional explanations.
“In fact, I think it helps others realize power of CSS and removes the last obstacle in their switch to CSS.” – JD
Nail on the head. While I’ve always wanted to go to a tableless design, I was never really confident on how to do it effectively and safely. I saw your presentation at WDW in Boston last December and it gave me the push I needed to redesign my company’s web site the right way.
And I’m relieved to say that as of last week our now-tableless web site went live and the home page file load alone was reduced by over 300%! I didn’t even bother trying to figure out the rendering speed saved from eliminating nested tables.
edit: well, you may find a stray layout table on some deeper pages (1200+). But that’s why I love working on living documents; you can always improve.
Thanks.
Doug, great presentation, and great example. It really helps to put the article from last year into perspective. I always find myself battling with various logical ways to setup a website. Seeing your presentation has really helped me to understand some of the best ways to analyze the whole process. Thanks
Though I have no evidence for it, I’ve always secretly believed that your post/presentation about Microsoft last year shamed them into redesigning their site, albeit with only a few of the improvements you suggested.
I’m really glad that you finally posted this too. It’s extremely helpful to see real world examples of how to bring a total ruin of a site back from the brink.
I remember that during your presentation at WE04 there were some that saw using CSS a problem because of the learning curve. Too busy, no time, etc.
It would be good to somehow gauge how many of those people have since embraced CSS and how many refused to learn and have clung to the old practices.
You could just ask the audience, but… well…
Thanks so much for posting these.
Doug, much as it would benefit us all to see the Yahoo code, you’re quite right to hold back the code. You can never be sure when a letter from an Intellectual Property lawyer might land on your doorstep.
Anyway, thanks for the presentation and files – it’s interesting to see someone else’s approach to structure and CSS, especially such a prominent real-world example.
The article a year ago was, to me, already a great example of what i’ve tried to explain to people surrounding me for more than 8 years.
This “1 year anniversary” rendering of the MS-example just again proves the point.
In my mind everyone should move towards CSS, and should have started doing so ages ago. It would make life so much easier and less time-consuming if more people would adhere to a well documented design standard. As far as I know CSS is the only standard available that can make it possible.
Thank you Douglas!
After reading Throwing Tables, I attempted a redesign of my company’s site. Fortunately, management was receptive, and now we’re rolling through a complete overhaul of the site, which has well over 300,000 pages (75% static!).
I’ve also been thrust into the role of CSS Expert, and I’m not sure that’s entirely deserved. But articles and examples from you (and plenty others) help me learn.
(A small note about the Seattle presentation: In Firefox (XP), the underline for the index, theme, and next (but not prev) links extend, presumably, -10000px to the left. Is that text-decoration? If yes, why isn’t the link to the previous page underlined?)
Good work, Doug. It’s amazing to see what this article has done in one year. It made me (and many others) convert my website to a tableless layout back then.
A few months ago I held a presentation based on your article for my class, and it helped me a lot in making my point. I’m also happy to know my Dutch translation was useful for many Dutch web designers as I got some good feedback about it.
I do agree with Faruk about the ‘dangerous’ example of the MS website, but, on the other hand, it does get people’s attention.
Thanks for sharing this article (then & now), especially the addition of the code. I remember reading Al Sparber’s article on Clarence the Pony back when I was still coding 26 nested tables. It is pioneers like you & Al, who made my life as a designer much, much easier!!!
Once more, thanks for sharing. I was wondering what your suggestions were for NS 4.7. We still have to support that. Also, are you going to include the javascript you mentioned as necessary to get the roll-over menus in IE? Thank you.
Great article. I’m now convinced that CSS is truly the way to go.
Question: Is it just me or are the roll over menus are not functioning in IE? They seem to be just fine in Firefox.
Very good examples — this is a great resource for those interested in standard-compliant web production.
Hope that the people over at Microsoft will pick up on your ideas. I wonder if they use… well, er, I guess by strict definition I can call it a web editor, frontpage, to design thier sites?
With everybody being so paranoid about html code being misused, I totally understand where your coming from Doug with posting the code, but I did like that yahoo search demo, very usable, much cleaner than even the version they have now.
It is great to know that web designers that support standards are educating people about standards. I love using standards more than designing jazzy flash designs. I hope colleges catch on quickly, and teach standards based methods
In short:
I am already growing tired of evangelizing.
This whole is getting to as if open source (free) hybrid cars are available, yet everywhere you go you have to deal with people (who drive convention two ton SUV’s) ragging about the price of gasoline !
While you caught alot of flak for your gutsy redesign of Microsoft.com, I for one appreciate that you went out on a limb to show others the benefits to be reaped in an all CSS layout. Sure, the big-name company caught more attention than a lesser known business, but I think that’s all part of the point, turning heads in order to evangelize the masses.
Now why is it that you keep the table cellspacing INSIDE the markup?
Lee: cellspacing is the one attribute that can’t be reliably and consistently controlled via CSS. Take out the cellspacing attribute, and you’ll always have gaps between the cells in certain browsers.
Oh…I always just used the “border-collapse” table property and set it to “collapse”. Is there something wrong with the “border-collapse” property?
Excellent presentation. That’ll help me with something I’m trying to do currently.
Great article.
isn’t it a good idea to maintain the border and cellpadding attributes just in case users turn off style sheets?
Great article. I think this presentation is one of the articles that already secured its place among “the cornerstones of web”.
I get that the article was a year ago, but why are people in the comments “still” talking about “moving to CSS?”
I was using CSS to eliminate FONT tags in the 90s and doing layouts entirely in CSS by 2000. As the support evolved, I naturally moved from absolutely positioned DIVs to floated DIVs, but in all likelihood that transition was over years ago.
Why are there still people out there building with TABLES? I need to get out of this business.
I can’t get the fly out menues to work in IE either. Is it because I am viewing it on Windows 2000?
Lee Smith (26): Yeah, it’s kind of a carry-over legacy thing. IE5/Mac doesn’t properly support border-collapse when applied to tables, so I keep the cellspacing attribute in the markup to avoid getting unwanted gaps.
jon (29): If you’re concerned about users seeing the site without your style sheet applied, then I guess you could go ahead and keep cellpadding and border in as well. I just don’t see that scenario as something to normally worry about. The data is still arranged in a table, it’s just not as pretty and easily parseable as a styled table.
anyone who reads TablesRule’s comment (31): Ignore it. I’d delete the comment, but technically it is on topic, and for the sake of all of us, I hope TablesRule *does* get out of the business with that kind of arrogance.
Justin Moreland (32): The flyout menus don’t work in IE. That’s the ironic catch of the whole thing that I stated in my presentation a year ago when I made it. Since IE doesn’t support :hover on anything other than <a> elements, and since you can’t wrap an <a> around a nested <ul>, there’s no way to make the flyout menus work in IE 5 & 6 with valid CSS only. You’d need some JavaScript to make them work in IE, and some say this is preferrable anyway, since all behavior should be controlled by JavaScript.
Great work on the reworking of the Microsoft site. I can understand why you can feel a little apprehensive about posting the code in the public domain, as you mentioned early on within these comments. It’s not always good to show people the errors of their ways, some people don’t take kindly to being shown a reasonably simple solution to a major problem.
However, I find it to be incredibly helpful. And for that, I send many thanks.
After experience with recoding Yahoo Search, I no longer believe in reworking (in CSS) some other organization’s site, then publicly rubbing anyone’s nose in it by posting the code for all to see
That’s nice. The folks over here would sure appreciate that. Being a developer for Yahoo!, we’re fully aware of the code that needs reworking. You should also take into consideration the year it was developed too. Let’s also not forget why some companies can get away with it: Eg: In praise of Sloppy HTML. Sure there’s arguments against it – and I don’t need to be convinced of them (I agree).
Using the Yahoo! search was quite the attention getter. It’s a simple formula.
1. Choose well-known website
2. Show everybody what’s wrong with it
3. Fix it and tell why it’s better
You’ve made a wise decision not to make public examples anymore. It shows maturity.
Congrats on the one year.
Let’s just hope Bill Gates himself is reading this too!
Thanks for this.
One small quibble, this link seems to point to the css file using “localhost” which makes it come up unformatted.
Thanks samhain. Fixed now.
Works a treat in Firefox, but the content-extra column refuses to float in IE6. It hangs about at the bottom of the previous column, properly indented, but not floating to the top.
Hopefully, now Microsoft and the rest of the worlds webdevelopers and some users are coming into terms with webstandards and how to use them. Hopefully we will get a IE 7 which is CSS2 compliant, and a Microsoft Website which is cleaner. I find it very hard to show people the benifits of not using tables.
The only situations I can see Tables fit is when your doing a site where you want one column fixed in its width and another column to fill up the empty space. Such as my site which I needed 2 columns with a couple of pixels in width, and the middle 100% but the rest is all CSS layed out
The only situations I can see Tables fit is when your doing a site where you want one column fixed in its width and another column to fill up the empty space. Such as my site which I needed 2 columns with a couple of pixels in width, and the middle 100% but the rest is all CSS layed out
You don’t even need tables to do that.
Some nice looking code you got there.
But I think as long as it is possible and easier for webdevelopers to use tables, they will continue to do so. Not that CSS should be forced onto them, but examples like this really show what is possible and also what the commercial advantages are.
Good work!
Congratulations on 1 Year.
As a self-titled king of Tables, the last few months I have been working really hard to ditch the habit and do full CSS layouts (including the upcoming redesign of my site).
This presentation (first time I saw the presentation version) is awesome! Very logical, simple, and well explained. It has helped my minds eye better visualize the layout, float, and columnar views. Thank You.
Heres to one more year!
I though the presentation was fantastic. However…
When I try to use div’s in Netscape, I wind up with an unreadable screen where areas are laid on top of each other. I am having this very problem with your microsoft page–I instruct Netscape 6 to display http://v5.stopdesign.com/examples/ms/ and wind up with overlays all over the place.
Any reason this doesn’t work in Netscape?
Thanks!
Mark (44): That’s because Netscape 6 is a horrible browser in terms of CSS support. Many CSS layouts fail in Netscape 6, and barely do better than Netscape 4. Even Netscape admitted that version 6 was released way before it was ready.
Netscape 6’s usage numbers are very, very low. That’s because most anyone who still insists on using Netscape has upgraded to at least version 7, if not the latest version 8. (v7 and v8 are much better with CSS support.) To stay current with any users who still use Netscape, I’d suggest upgrading as well. Or better yet, switch over to Mozilla or Firefox.
Netscape 6 isn’t worth worrying about.
Thanks Douglas. I installed Netscape 8 and everything worked fine. Version 6 sure was flaky!
It seems to me that there’s still too much variance across browsers/platforms to fully embrace table-less designs – especially at the enterprise level. I’ve seen some horribly borked sites on Safari owing to designers only making IE-compliant CSS.
@47
I’ve seen some horribly borked sites on Safari owing to designers only making IE-compliant CSS.
The problem is that they are focusing on IE. IE has a history of little concern for web standards, so it should be the exception, not the rule when developing CSS. I’m learning this early in my career, so I really don’t understand why these corporate designers haven’t led the charge.
Man…
I just was looking at the table header example code from the presentation (link on page 7) and figured out something I’ve been doing wrong all along and over-compensated for in my CSS (getting a border on the top and left of a table).
Thanx 4 the c0de! I’ll keep that nugget in my cranium for the next time I do some HTML/CSS work :D
Thank you!!!
Since two weeks I am trying around without tables and never felt so free before. Feel like having vinced gravity. It will take a while til these teachings take effect on my own homepage (clients come first), but definately will take effective effect. Just once more – THANK YOU VERY VERY MUCH for these nice and clear words about this issue!!!
Hi,
I was just looking at your work and went to your css file ( http://v5.stopdesign.com/examples/ms/css/final.css ).
Now I don’t get why I keep finding html>body before each #nav li.
Can you please tell me why this is necessary?
Sakke: It’s a means of hiding those rules from current versions of IE, since IE doesn’t support the child selectors. Using html>body is an easy way to ensure there’s a direct parent>child relationship. Sometimes, as in the rule your pointed out above, li might not always be a direct child of #nav. But body is always a direct child of html.
Thanks Douglas. I’ve been using CSS on-and-off for a couple of years now but everytime I attempt to replace tables with CSS something usually goes askew.
Your online presentation is the first resource I’ve found that actually clearly demonstrates proper use of absolute & float positioning. I finally get it, thanks mate.