Why we need Transcending CSS

I’m a designer. Some days, I wish I created iconic items such as classic cars or maybe the Apple iPod. Then, I could make me enough money to buy as many classic scooters and 1960s Minis as I can fit in my garage. But you see, for one, I don’t have a garage, and for another, I enjoy what I design too much. I love designing for the web.

I haven’t always enjoyed my job so much. Many times in my design career, I could have cheerfully put down my computer after days of frustration and gone to do something completely different. Sometimes, after struggling with one problem or another, the thought of spending hours in a shed growing leeks, with an old radio for company, seemed very appealing. But rather than talk to vegetables, I spoke to myself, and before too long, it was problem solved. My enthusiasm for the web was back. Funny though, I never expected web design would be so challenging; I mean, it’s not like climbing Mount Everest. People don’t choose to do it just “because it’s there.”

But many parts of the web design process can be challenging for people who are visual thinkers. Every day we use visual tools such as Adobe Photoshop, Macromedia Fireworks, and others to move pixels around a screen to achieve our design goals. Some of the technical aspects of making websites today can be unfamiliar or even seem counterintuitive.

CSS isn’t designer-friendly

One factor is that as a technology developed to solve design problems, CSS isn’t particularly designer-friendly, largely because technologists rather than designers created it. The basic principles are simple enough, though:

p { color : #000; }
body { background-color : #fff; }

For some designers, terms such as the cascade and inheritance are challenging to understand. Add to this, positioning, collapsing margins, or the box model, and you might understand why designers have taken a long time to adopt CSS. For the longest period after the launch of CSS, it was very much the domain of technologists. Their big brains were better equipped to understand concepts such as specificity as well as the CSS hacks necessary to implement designs consistently across browsers. These difficulties have done little to reduce the knowledge gap between designers and developers who implement their designs. These issues often leave designers feeling frustrated with CSS.

Web design tools failed

Although over the years, WYSIWYG tools such as Macromedia Dreamweaver improved the HTML and CSS they generate, none solved the significant problem facing designers who work on the web; translating their designs into semantic HTML and CSS. Understanding semantic HTML and CSS is now an essential part of a professional web designer’s job. Visual tools need to help designers see beyond their designs to the code.

Browsers stifled progress

Of course, web browsers also challenge us. From the earliest implementations of CSS in Microsoft Internet Explorer 3—the first mainstream browser to support any CSS)—working with CSS has often been exasperating. Browser bugs, rendering errors, or just the plain stupidity of certain browser behaviours all made our lives more difficult.

This situation did get better over time; Netscape 4.x was better than Internet Explorer 3, and Internet Explorer 5 for the Mac showed for the first time that CSS could work. Internet Explorer 6 had the best CSS support of any browser when it was released, despite its well-known catalogue of colourfully named bugs.

I imagine my fourteen-year-old son—now taking his first steps into the design world—might look back in years to come and laugh when he reads about the double-margin float or the peekaboo bug. He also might wonder whether the 3px jog was how designers today exercised before they ate breakfast.

CSS layout is a reality

Developers, including Tantek Çelik, Todd Fahrner, and Eric Meyer showed us that working with CSS was an actual reality. Throughout the years since the first CSS specification, dedicated people all over the world found workarounds for many problems faced by designers every day. People in education and members of the Web Standards Project—like Rachel Andrew, Drew McLellan, and Jeffrey Zeldman—also played a significant role in raising awareness of web standards. Without these people, CSS use would never have been the dominant tool it is today.

We have things easy today compared to the pioneering days of CSS. Many new web designers will never experience table-based layouts or the frustrations of making CSS layouts work in ancient browsers such as Netscape 4.

Time to get creative

Web browsers have now reached a level of maturity in their support for standards. They provide us with a firmer foundation on which to develop our designs, so it’s time to move forward, not standstill. The mechanics of table-based layouts confined our designs to a rigid grid and time after time reinforced the conventions of the typical two or three-column layout still seen on countless websites. CSS offers new creative possibilities through floats and different forms of positioning. It provides layering through z-index, and adds style to any element. These creative opportunities were not possible with table-based layouts.

Beyond the desktop

Two years before the publication of the first CSS specification and a full six months before Netscape launched its first web browser, Chris Lilley—who would become the chairman of the W3C (World Wide Web Consortium) CSS Working Group—predicted what would happen to the web during the rest of that decade:

If stylesheets or similar information are not added to HTML, the inevitable price will be documents that only look good on a particular browser, at a particular window size, with the default fonts, etc.

Chris Lilley, (former chairman of the CSS Working Group, at the time, snappily called the Style and Formatting Properties Working Group), May 1994

After years of hard work, the web has now made its way onto phones, gaming devices, and TVs. In the future, this will include all manner of portable devices too.

Hold that download

We don’t know where the web will crop up next. In years to come, my son will laugh at the idea the internet was ever hardwired to the desktop, just as I laugh that my first mobile phone came with a battery the size of a brick and weighed the same.

In such a rapidly changing medium, Lilley’s words now ring truer than perhaps they did when he wrote them. Today’s designers should at least be aware their designs should to adapt to different environments. Lightweight, semantic HTML and CSS are critical factors in transitioning a design from desktop to other devices; be they printers, small-screen handheld computers, personal media players, or mobile phones.

Accessibility isn’t optional

Good information architecture, usability, and accessibility have rightly become concerns for designers and developers. In particular, ensuring the broadest possible accessibility is an ethical and commercial issue. However, many designers, developers, and accessibility specialists have limited conversations about accessibility to merely serving people with disabilities.

Much of what’s been written about accessibility has focused on ensuring sites are accessible to people who are blind or visibly impaired. Much more has been written about ensuring websites comply with accessibility guidelines or laws. Although serving the needs of people with disabilities should be a concern, the far broader issue—that accessibility is a matter of usability—has rarely been discussed. As design professionals, we should design websites which meet the needs of as many people as possible, regardless of ability or the device they use.

For the travelling businessman, logging on to an intranet to check sales figures is both a usability and accessibility issue. Many movie sites offer branded goodies for your mobile phone without the ability to access pages using a phone. It’s essential to realise good design can remove as to access for many people.

Unfortunately, many designers still think considering accessibility will limit their creativity. Accessibility is too often viewed as an afterthought with sites tested after completion to ensure they comply with standards. As Joe Clark said:

If you look at accessibility as a feature, you’ll probably leave it out. Most developers are going to leave it out anyway; most developers don’t know the first thing about accessibility or even that it’s important.

Joe Clark, speaking at the IceWeb conference in 2006

Sadly, much of the work involved in ensuring content and services are accessible takes place late in the design process. When given a choice between a new Ajax interface and accessibility, many companies choose Ajax and may plan accessibility testing only as part of a later release. But, when you work from the content out using semantic HTML and CSS, you build accessibility into the design process from the start.

Note: In June 2005, I expanded on my opinion that for the needs of people with disabilities to be better served on the web, government-sponsored laws and regulations were counterproductive. “Accessibility and society of control” sparked many interesting comments about how best to move the cause of web accessibility forward.