Weblogs: Web Standards

@Media 2005: The Beauty of CSS by Douglas Bowman

Saturday, June 18, 2005

Douglas Bowman is a professional web designer. He is the guy behind the highly acclaimed Wired and Blogger website redesigns. He talks about the beauty of CSS design, noting beauty is more than skin deep. His beautiful presentation slides are available online.

Bowman and CSS

Bowman has used CSS for about three years. His boss thought that the web was rubbish, and gave Bowman all the web-related jobs. He worked with Hotwired from 1996 until 2002, working alongside Jeffrey Veen. Veen was excited by CSS, even after he left Hotwired, Veen would drop by for a visit, always talking about CSS, and showing CSS to web designers. Bowman enjoyed CSS until he hit the Netscape Navigator 4 problem, and ignored it until 2002. He said "Not for me. Its broken. And stupid". Until the Wired redesign.

CSS is a standard, it is widely recognised and widely used. The use of standards creates a consistent target and platform.

Analogy of web standards

As an analogy, Bowman presents an example of the Bourne Supremacy, recently released on DVD. Without standards, trying to play the DVD would probably result in an error prompt from the television, urging an upgrade to a new Sony Vega wide-screen television. That's what typically happens without standards.

With CSS, because it is a widely supported standard, we can build one version that caters for all modern browsers. It pretty much works everywhere. Internet Explorer version 5 and above will support our standard, although Internet Explorer on both the Mac and Windows platforms is a bear to work with.

Visual and internal beauty

Bowman points out the beauty of CSS parallels with the beauty of nature. Natural beauty goes down to the core, right down to the structure. The web sites of 1998 looked good visually, but under the hood they were a mess. Now, with CSS, we can get rid of presentational markup and script-laden pages. We can build from the ground up with the ability of taking the idea of structural and inner core beauty (of the HTML) and add presentational beauty (of the CSS).

There's also an ecosystem around CSS. CSS has been bundled with accessibility, its often a package deal. There's no guarantee that using CSS gives an accessible website. That also need semantic markup.

Wired News feedback

After the web standards relaunch, the Wired website got about 200 to 300 messages a day about the website. The majority of the reviews to Wired would be negative feedback, since only complainers tend to feedback. With the generosity of Jeffrey Zeldman and Eric Meyer linking to Bowman's blog of the redesign, this brought in people with a web standards background. Many of the comments here were encouraging, praising the Wired redesign as a great step forward. One night, one comment praised Bowman for his efforts, and the last line was "P.S. I'm blind". That hit Bowman like a ton of bricks. This one comment completely and fundamentally changed his view of web design. Its possible to appreciate the beautiful colours and design, but also for blind people, we can appreciate the beauty of structure.

The Web doesn't have the limitations of buildings. Some physical buildings are classified as historical relics, and changes are not allowed, by legislation, that would change the structure or the visual aspects of the building. No website has this limitation.

One of the benefits of the web standards approach to web design is the real and apparent speed improvements. Content arrives at the browser first, the HTML is also simpler, making it quicker to parse and render. With the separation of content and style, there's greater flexibility. One version of the HTML (in theory) works everywhere. Although we may want to give specific content to a PDA - for instance less content.

CSS is easy to learn. We are familiar with the syntax and the language, so the basics are easy. There is a steeper learning curve as we get more and more into CSS.

Early days of CSS

At first there were three groups of sites that adopted CSS. The pioneers, the personal sites, and the "commercial suicides". The commercial suicide sites were those that the press reported as "jumping off a cliff" because they were using CSS layouts.

Jeffrey Zeldman recently celebrated 10 years on the web, in that time he's been actively involved in encouraging CSS layouts. Eric Meyer explorer the current boundaries of CSS with cutting edge demonstrations as to what can be possible with CSS. He's also the author of several excellent CSS books, and was a member of the original CSS Samurai.

Owen Briggs, on his website, the noodle incident documented how to box-model works and demonstrated practical examples. CSS layout repositories, such as Blue robot and Eric Costello's Glish.com sprung up, and even today these are still extensively used. Initially people were using position: absolute for layouts, but as float layouts were being produced they caught on. One major spark for this switch was A List Apart switching to a float-based CSS layout.

Commercial suicide

In October 2002, the new Wired website was launched. We asked ourselves "Why not us?", and went ahead with a CSS layout. Cinnamon interactive followed, demonstrating a clean structure, and its portfolio of sites was an amazing resource of sites people could turn to for inspiration. The Fast Company website was done by Dan Cederholm. ESPN (done by Mike Davidson) amazed people - it was the first large commercial site not geared to tecchie developers that used a CSS layout. It was initially controversial because of invalid markup and clunky CSS. The 2003 PGA championship website is a beautiful combination of Flash and web standards.

We found that with CSS layouts, the HTML file size dropped. On Wired, there was a 54% reduction on the homepage alone. ESPN saved 50Kb per page, and over an average of 40 million page views per day, that makes a 730 terabytes per year saving on bandwidth. A terabytes of data is difficult to imagine, but if we take a CD as holding 640Mb, then 730 terabytes amounts to over a million CDs.

With the Wired site, we can make one change to the CSS which has immediate effects across the entire site. We can be quick to react to customer feedback.

Recent Commercial CSS layouts

Collections or repositories of CSS layout can be found at the following sites:

Massive uptake of CSS

There are positives to CSS layouts, for example purified data and content. Technorati now parses XHTML to determine the kind of links created on the web, its now a viable technique. Reduced file-sizes, and now accessibility is on the radar - its getting a lot more coverage and attention. The modular thinking leads to clean separation of content and style. There are now higher expectations from clients, bosses and developers for websites.

Mistakes

Boxy design has become to common because of an over-reliance on the box-model and making the box visible. This is a symptom of starting with CSS to early.

Image replacement, particularly the Fahrner Image Replacement (FIR). Initially conceived as an aid to accessibility. What more could we want, pure text in the HTML replaced in the stylesheet with an image. We later found out that screen readers had problems as well as search engines. There are now multiple versions of image replacement, and last year's SXSW deprecated FIR.

We should try to steer away from Image replacement (although image replacement is one of the reasons behind the success of CSS Zen Garden).

SIFR is an interesting approach, however it relies on too many technologies, Flash and JavaScript.

We are tending to use presentation-specific class and id names (e.g. class="large" or id="borderedbox"). Use something more semantic, like id="page-title", class="subhead".

We make accessibility assumptions, like assuming that accessibility is all about blind people, or PDA users. Accessibility is not always about one thing.

We learn by view-source and deconstructing things, which leads to imitation. We are currently stuck in a cycle of little innovation, and stagnation. We need to focus back on design and accessibility aspects, not just cool things about CSS.

Looking ahead

Five years ago CSS was unheard of. Back in 2000 Jeffrey Zeldman and Eric Meyer were on the case, but in those early stages there was no general awareness of it.

In 2005 everyone has heard of CSS and feel pressured to use it.

What about 2010? CSS may not even exist. It might have been replaces by something completely difference. But its the best we have right now.

We should focus on the whys, the principles and benefits of CSS. And not spend too much time or focus on selectors and browser hacks.

CSS3

Is it viable? The modularisation means browsers can choose to implement pieces of CSS. This helps browse vendors to get CSS features in the browsers quicker. This might be an absolute nightmare, since we have to deal with the possibility of some browsers supporting a particular module of CSS, and other browsers not.

There's also a user-adoption problem. Many people are still stuck on IE5. How long will it be before CSS3 support is widely available?

There are good things about CSS3, for example the target properties for links which replaces the deprecate HTML attribute target on links.

Sophisticated media queries mean that we can supply different stylesheets based on factors like minimum screen width. Also a not operator allows us to specify a stylesheet particularly not for handhelds.

The content properties provide use with a true image replacement. The column model could change how we do position layouts, one element can be divided into many columns with its own guttering and margins.

Innovations with CSS

Where can we look for innovations with CSS:

Web design is increasingly becoming a commodity available to the mainstream - like IKEA. Layouts will be portable as focus moves to templatisation. Smaller pieces can be used to make up the whole. Web site owners can try swapping out pieces and sampling other content. This raises intellectual property issues.

Imagine if

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

Imagine one stylesheet interoperating with hundreds of pages. Oh wait, we are there already. Imagine one stylesheet interoperating with thousands of websites. Global stylesheets could be used as a base format, and enhanced with additional stylesheets. Microformats are taking off in the HTML world, CSS can do something similar.

Consider one web-application with 75 stylesheets associated with it. How to make one web application compatible with 700 devices, how do we manage this?

Imagine if the distribution of browser software changed dramatically, for example automatically updating the rendering engine. What is the viability of CSS8?

Beauty in design is not only about what can be seen, but also what isn't seen

Questions and answers

About style hacks. We wish hacks didn't need to exist, but they are a necessary evil. There are methods of isolating hacks in separate stylesheets using filters, so unlinking or deleting the file is enough to turn it off.

Other coverage

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]