Mark Newhouse

In: Interviews

By Craig Saila

Published on June 17, 2003

Digital Web: You’re speaking at WebVisions 2003 about Web standards and what you’ve called the “three-legged stool.” Can you briefly explain that metaphor?

Mark Newhouse: The Web is a platform, and like any real world platform you need at least three supports, or legs, for stability. A while ago, on my blog, I was exploring those supports, mostly for my own learning. It turned into somewhat of a series and finally became an article on Real World Style.

The three legs are (X)HTML, CSS, and Accessibility. I see JavaScript and the DOM as those cross pieces that hold the legs together so it can support even more weight. The article goes into more depth and is filled with helpful links to even more information on each topic.

Digital Web: With a few notable exceptions (Wired News, ESPN), why do you think so few large sites actual use the three-legged stool?

MN: There are probably many reasons that these companies might give, but they all come down to money. It takes time to redesign based on standards. In many cases, it will take additional training for the Web designers. It may require reworking an existing Content Management System (CMS), or creating or purchasing a new one. And then there is the issue of backwards compatibility. Many sites are not content to let the Netscape 4 users (or even IE5/Windows) have a different experience than those with the latest and greatest standards-compliant browsers.

The irony is that if they are relatively high traffic sites, they stand to save quite a bit in bandwidth costs. It is not unreasonable to see a standards-based redesign save 50% (and more) in markup and images. If you are delivering gigabytes of data every day, this means immediate and tangible benefits. On a site like ESPN, which is pushing terabytes of data every month, there is real, ongoing savings associated with their redesign.

And it will only get better for them as they migrate their entire site to adhere to standards.

Digital Web: What big site would you like to see redesigned to be standards-friendly?

MN: Although I personally don’t use it much, I’d love to see Amazon jump on the standards’ bandwagon. I just took a look at their home page, and they have tables nested five deep in some places. Some of these tables are completely unnecessary—replacing things like unordered lists—while others could be replaced with a few DIVs and some positioning or floats.

The main reason I’d like to see Amazon switch is that everybody points to them as the way to do things right on the Web. As the recognized leader in so many areas, they would give a real boost to the standards movement.

Digital Web: What would be some non-technical arguments you’d use to convince that site to switch to standards-based development?

MN: I’d probably start with the bandwidth savings, faster downloads, ease of maintenance, and the flexibility in redesign. I’d certainly point to Wired and ESPN who took very different paths to their recent embrace of standards.

The interviews that Eric Meyer did with Douglas Bowman on Wired’s redesign and Mike Davidson on ESPN’s redesign are incredible resources for anyone who is contemplating, or trying to convince higher-ups, that a standards-based redesign is worth the effort.

Digital Web: How can a site develop with standards if it still has to support browsers like Netscape 4?

MN: There are several options. The first thing I’d look at is the visitor logs for the site. Are there really enough people visiting the site using Netscape 4 that you have to worry about it? If not, then you can ignore it. I’d still use some sort of technique to hide problematic CSS from that browser out of courtesy for those who are still using it for whatever reason. Then those users will still get a structured document; it just won’t look as nice.

If there is good reason to support Netscape 4, then there are still a number of options. Does the site need to look the same in NN4 and standards-based browsers? Then maybe you need to use a simple table to give the page some structure and use CSS for enhancement. Or you could try some of the basic templates that have been made available that work with Netscape 4.

If it doesn’t need to look identical in all browsers, then I’d advocate making the page look decent in NN4, via style sheets, and give the more advanced CSS to the browsers that can handle it. I’ve been moving in this direction at NOAO where we still have a large contingent of astronomers stuck with NN4 on their aging Unix boxes.

Digital Web: There’s been a lot of buzz about how hard it is do things in CSS that were easily done with simple HTML. The examples on your site, Real World Style, would seem to put the lie to the argument. How hard is it to develop these things in CSS?

MN: I spent a good amount of time on those examples, and they still aren’t the perfect solution for everyone’s needs. In some ways, they are almost as restrictive as a simple table (since they rely on floats it forces the markup to be in a certain order). However, these were designed to work in an ancient browser.

Doing things in CSS does not need to be any more difficult than creating nested table layouts. In fact, the markup is much simpler. And the beauty of CSS is that you can keep tweaking it until it works the way you want it to, and you don’t have to change the underlying structure of the (X)HTML.

Getting back to the question, CSS is not more difficult—it is just a different way of thinking.

Also, there are many things you can do with CSS that you cannot do with tables and spacer GIFs. Take a look at Eric Meyer’s css/edge, Chris Casciano’s Daily CSS Fun experiment last year, and there is always the CSS Zen Garden for inspiration.

Digital Web: If you’re developing a site that will use CSS, should you still use tables for laying out a page?

MN: Should is a strong word…

I am not so much of a standards zealot that I would never use a table for layout. However, if there is a more powerful option, like CSS, then I am more likely to go with that. My primary beef with tables for layout is the constricting effect they have on your markup. I am working on a site right now that is a typical three column layout with a header and footer. I grabbed a template from Alex’s CSS Enterprise. It allows me to put the content in any order I want, and have it appear where I want on the page. And it works (pretty well) with NN4.

This is a case where the site looks okay in NN4, but not exactly the same as it does in better browsers. If it had to look exactly the same in all browsers, I would have had to go to a simple table.

Digital Web: So tables aren’t dead?

MN: Not yet. You can have a valid page that uses tables for layout. But I hope they are a dying breed, when it comes to layout anyway. CSS is simply a more powerful tool in the designer’s arsenal.

Digital Web: Besides convincing sites to switch, what are some of the biggest hurdles facing developers who want to use standards?

MN:

• (Mis)perception: it’s too hard; it locks out everyone but those who have the latest and greatest browsers and computers; the site should look the same in every browser.
• Legacy CMS: they often rely on tables, font tags, and spacer GIFs.
• Taking/having time to learn something new: Time is something we all wish we had more of, and learning a new Web design technique like CSS and proper markup can take a lot of time—especially for busy designers who can code nested tables in their sleep.

Digital Web: What are three easy standards-based things that can be done to improve any Web site?

MN: I guess I would characterize these things as simple but not always easy. They require a bit of knowledge about standards in order to do them, but they are certainly straightforward…

1. Lose all font tags and replace them with CSS. This will often reduce the page weight by as much as 50%, especially when you are dealing with nested tables. Plus you get the added benefit of better control over typography (leading, indentation, margins and padding).
2. Reduce the number of nested tables and use CSS to replicate their layout. In the case of Amazon, there are several places where they appear to be using tables to create leading and other vertical white space. Correct markup and proper use of CSS can create the same look on the page.
3. Validate. Take the necessary time to ferret out any major validation issues. You don’t have to have an error free page (although it is a good thing to strive for), but the (X)HTML and CSS validators can be very helpful in tracking down bugs in your markup and CSS.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: CSS, XHTML, Web Guru