@media 2005: Douglas Bowman

« · By Faruk Ateş on Jul 7, 2005 · »

Douglas Bowman is widely known from his design consultancy, Stopdesign. He is responsible for very popular redesigns such as Wired News, Blogger and, more recently, Capgemini. In London, Douglas shared his wisdom with us twice. His first presentation was The Beauty of CSS.

Before getting into the web standard named CSS, Douglas first wanted to remind us of what a standard actually is. A dictionary sample pointed out two key aspects. A standard is:

widely recognized
regularly used

Nowadays, CSS is not only a web standard in name as given by the W3C and the WaSP, but also thanks to its widely adopted nature.

Standards benefit everyone, Douglas explains. They aid the people who build the tools, as well as the people who build with the tools. Beyond just the various forms of developers, however, standards also (or maybe more so) benefit the end-user. A great example was a hypothetical situation that Douglas provided:

Imagine yourself going to a DVD store and buying that new DVD of The Bourne Supremacy. You return home and eagerly pop it in your DVD player, only to encounter an error screen. It tells you that the DVD is not compatible with your TV, and if you could please upgrade to a SONY 42" (or larger) WEGA™ HDTV flat-panel display.

Obviously, such a situation is very unlikely to happen in today's world, because we have standards that effectively govern such problems, protecting the end-user. Not only are standards convenient to build with, but they're invaluable to the end-user experience.

CSS

One of Douglas' favorite aspects of CSS is how its beauty is parallel to nature's beauty. It goes straight to the core, the structure, and with CSS that means the markup. In the old days of the internet, websites would look great visually, but beneath the surface was a horrible, ugly mess: lots of nested tables, spacer GIFs, presentational markup and unnecessary scripts. CSS has changed that, taking a clean and beautiful inner core (structure, HTML) and adding the visuals in an equally clean and beautiful manner.

It doesn't end there, as CSS is often a package deal, Douglas explains with great delight. Oftentimes when you build a website using CSS, you'll have a great deal of additional improvements, such as accessibility. He notes, however, that CSS alone does not make an accessible website. After two great presentations on the vast array of problems true accessibility brings, even when using CSS for presentation, the audience was sure to agree with him.

By the way, I'm blind

So Douglas loves CSS, that much was clear already. But what made him such an advocate of its beautiful nature? He explains it and takes us back to the time of the Wired redesign.

After finishing and launching the redesign, feedback started pouring in. Now, the globally accepted rule of feedback is something along the lines of "90% of the people that don't like it will let you know, and 10% of the people that do like it will do the same." In short, Wired (and thus, Douglas) received a lot of feedback from people that didn't like the redesign, and only very little feedback from people that did.

However, after both Jeffrey Zeldman and Eric Meyer got wind of this major site's standards-compliant redesign, they both linked to Douglas' own website, praising him for his fantastic job. This drew attention from a standards-compliant audience, which promptly proceeded to send feedback to Douglas directly through his own site and this feedback was overwhelmingly positive.

Then one night, Douglas received another email like all the others, praising him for the Wired News redesign and how happy the person was with the new site. Nothing out of the ordinary. But then Douglas got to the last line, which read: by the way, I'm blind.

This hit him like a ton of bricks. It completely changed his view on web development, design and accessibility. Not only can we enjoy the visual grace that CSS can bring us, but it allowed blind people to enjoy the grace of a semantic, well-structured markup.

The web is without limitations such as you would encounter in buildings. Making a public building accessible to, for instance, wheelstair users, oftentimes the building will have to be thoroughly adjusted. With historical monuments, legislation prohibits any major change to the building. Such things don't apply to websites, meaning that any website can be accessible.

The Early Days

Before "we" were all using CSS to building our sites with, there was the era of the CSS Samurai and it was in that era that you could pinpoint three groups of sites that used CSS: pioneers like the WaSP, personal websites of people that were savvy for their time, and "commercial suicides," which only got that label because back in those days, nobody saw the commercial gain from using CSS - which effectively meant dropping support for a number of browsers (and thus, visitors).

The pioneers all added their share to promote CSS-based design: Jeffrey Zeldman has been a key figure in promoting web standards for 10 years already. Eric Meyer's CSS Edge showed us a vast number of possibilities with CSS. Rob Chandanais' Blue Robot gave us a CSS layout reservoir to build more complex sites with, as did Eric Costello's glish.com. Owen Briggs documented the box model and added many, many examples on The Noodle Incident. And everyone who has been around long enough will have seen and possibly used at least one of these fine people's examples and tutorials.

When the Wired redesign launced in October 2002, other companies started seeing the value of using standards-based web design. Their position changed from "why should we?" to "why shouldn't we?" - something we still see happening today. The Dutch Cinnamon Interactive was one of the first to follow suit, presenting a beautiful CSS-powered website with an immensely useful portfolio for others to learn from.

Other great sites jumped onboard as well, such as Fast Company, done by Dan Cederholm, and ESPN, done by Mike Davidson. The latter was an incredible achievement, because it was the first major website that didn't have a tech-oriented target audience. ESPN targets sports fans, often people who care little to not at all about technical details.

However, ESPN realized the commercial gain from working with web standards and they figured it was more than worth their while. Some amazing details on the ESPN redesign stand as a prime example for the financial benefits that web standards can offer:

Page reduction:: 50 KB / page
Page views:: 40 million / day
Projected bandwidth savings:: 2 terabytes / day; 61 terabytes / month; 730 terabytes / year

Which would roughly equate to 1,093,514 CD's. If you project that into hard currency using a (fairly outdated) bandwidth/savings/dollars equation as used in the A List Apart article on Retooling Slashdot (2003-11), you get the following:

730 terabytes / year = 747520 gigabytes a year
At $1 per GB (as per the article), that's a bandwidth savings of $747,520

The technical benefits of switching to CSS will never be very beautiful to the people that hold the strings, but these financial savings will. In that perspective, Douglas' promoting of CSS as an all-round beautiful thing couldn't be more correct.

Rise and fall

As it is today, people are more and more looking into XHTML and CSS, or simply web standards-based development. A plethora of reasons is becoming apparent, such as the benefits from having purified data (separation of structure and presentation), the reduced file-sizes improving the end-user experience, accessibility gains, the modular thinking it demands and the fact that expectations these days simply run much higher.

But the increased popularity of CSS has also showcased its shortcomings very well. One of Douglas' (and designers all over) biggest gripes with CSS is its tendency to cause boxy design. The CSS box model is relied upon and embedded in designs far too much, yet there are few great alternatives. Through CSS trickery, generally combined with superfluous elements in the markup, we can come a long way, but not everyone is willing to make such concessions.

Another major issue is the Image Replacement technique that has become a dominant tool in the creation of many CSS-powered websites. Aside of there being many different approaches, most of them having accessibility issues despite the concept being created to aid accessibility, the question is whether Image Replacement is a good 'end product' from all of this. As chance will have it, Robert Nyman wrote about whether Image Replacement is really worth it just two days ago.

Image Replacement is generally used for headings, but it's no longer the only technique out there to create more elegant headings. SIFR, a collaboration of Shaun Inman, Mike Davidson, Tomas Jogin and Mark Wubben, has stepped into the picture. SIFR uses Javascript and Flash to create flexible, pretty headings.

What Douglas, as well as myself and still many others, doesn't like about SIFR however is its reliance on too many other technologies. It has a decent amount of graceful degredation, but there's not enough gain for some.

CSS' limitations have caused these techniques to be created, and while that's a good thing in a way (innovation is always good), it would've been better to see these shortcomings fixed.

Douglas continued to discuss some good practices in adding classes an ids to our markup. Often, we're getting into XHTML and CSS to separate structure and presentation, but we're not zealous enough at it sometimes. Presentational class and id names are almost as bad a mistake as having presentational markup.

Use the meaning of the element or content within, not what you want it to look like.

Bad turtle: class="red"
Good turtle: class="warning"

What's to come?

Moving on, Douglas presents us with a timelime, showing how five years ago, almost nobody had even heard of CSS. The awareness of web standards was minimal to absent, except for the rare few.

Today, most webdevelopers worldwide have at least heard of CSS, and many are already using it more and more for all their websites.

What will things be like, five years from now? Douglas can't tell you, either, but he has good faith that things will only get better. And that's not even limited to CSS being improved, no, he talks of things possibly replacing CSS entirely. Of course, one cannot disagree that if something better comes along that manages to find support with the vast majority of the world, people will welcome it with open arms.

Leaving the theoretical behind, a more realistic and practical possibility is CSS 3. This new version is being developed and deployed in a completely modularized fashion, meaning browser developers can simply choose which bits of CSS 3 to implement and which not.

So far, it seems that browsers wait for Candidate Recommendation status on CSS 3 modules before implementing them actively. The problem is, how long will it be before the biggest browser, Internet Explorer, will adopt any of these techniques as well? And what will happen to people still stuck with IE 5?

As promising as CSS 3 may be at this point, there are inevitable caveats caused by the fact that support for it may take a long while to become wide-spread.

And what else?

What innovations will we see between now and five years from now? Douglas can only guess, but there are ideas:

AJAX combined with CSS
WYSIWYG tools that utilize CSS without the need to learn or understand CSS
structural improvements in how CSS is dealt with when working with multiple people on a single CSS file

Then Douglas leaves us with some pipe dreams.

Imagine if people could make use of CSS blindly... without ever viewing, writing, or editing one line of CSS.

Imagine if one style sheet oculd be interoperable with hundreds of pages.thousands of sites.

This reminded me a lot of my own initial.css file, which I will discuss in more detail another time.

Imagine if the distribution model for browser software changed dramatically.

Concluding, a picture of a tranquil lake with snow-covered mountaintops reflecting in the water. Truly a moment of serene beauty, echoing and reminding us of the beauty of the entire presentation and the beauty of CSS itself that Douglas so convincingly portrayed to us.