Skinning Web Applications with CSS

By Milan Negovan

Print

Those web applications that I've seen so far practice templated type of skinning rely on FindControl() to locate controls on respective skins and assign them text or color values. FindControls() is quite a slow method and abusing it adds unnecessary overhead.

Another issue with templated skins is the sheer bulk of markup. These skins are traditionally laid out with archaic nested tables, font tags and other meaningless markup. Don't get me wrong—tables are an inalienable part of HTML but their use—or more of abuse—to design web applications has lead to bloated pages and degraded performance.

Skinning With CSS

There's a better way. A much better way. Enter CSS.

The power of web standards is to separate structure (XHTML, HTML) from presentation (CSS). Some benefits of CSS design over tables, font tags and other outdated methods are:

1. Web pages become smaller. In a perfect scenario all they contain is structure. Thus the payload decreases significantly. Yes, you are paying for bandwidth. The busier the site the more money you are wasting. Would you like to pay less? No? Read this interesting interview with Mike Davidson of ESPN and see how much they saved by redesigning ESPN with structural markup and CSS layout.
2. CSS is about presentation. It allows you to easily create different color schemes and control layouts while keeping the underlying structure intact. In other words you may have the same page presented differently by only switching style sheets! I am not going to provide an example in this article. Instead I want you to visit the CSS Zen Garden run by Dave Shea. The idea is simple—given one page with the exact same structural markup you design your own style sheet. That's right, one style sheet to rule them all! Check out the gallery of designs and see for yourselves to what levels you can take skinning with CSS. To me it's been a great source of inspiration.
3. A host of wireless devices have entered the scene over the past couple of years. Those devices never supported the convoluted markup of the past and therefore will fall on their face trying to display the majority of sites out there. If, however, you keep only structural markup in the skins and let CSS take car of typography, layout and colors those devices will display at least a simplified "version" of your site.
4. Accommodating people with disabilities. Did you know that about 1 out of 12 web visitors have some type of color deficiency? (Source). The most common one is the red-green deficiency, i.e. 1 out of 12 won't be able to distinguish between red and green. A simple CSS switcher may do the job. A lot of sites which provide alternate stylesheets these days use Paul Sowden's switching script. You can see it in action at Netscape DevEdge. In some countries there are laws that govern accessibility on the web. For example, in the UK there's a law, the UK Disability Discrimination Act, which is supposed to enforce accessibility guidelines.

This is by far not an exhaustive list of benefits of using CSS. See this nice summary of top 10 reasons to learn CSS and CSS Based Design.

This article would sound like a sale pitch if I didn't mention some drawbacks of using CSS for skinning:

1. The browser war has taken its toll on design practices. Table design has been considered a safe haven since all browsers are equally good at rendering tables. With CSS the situation is somewhat different. Each major web browser has its own implementation corks. Ironically, Internet Explorer for Windows, while being the dominant browser by far, has the most inconsistencies in implementation of the CSS specifications. To those who still think that the CSS spec is more of a set of "recommendations"—no, it's a standard whether you want it or not. Browsers with a much smaller market share, such as Mozilla/FireFox/Netscape, Opera, Safari and Konqueror are much more in line with the standards, although they are dubbed "downlevel browsers" in the ASP.NET lexicon. I always recommend debugging your style sheets in Mozilla first and then work your way down to the buggy IE. Unfortunately nobody knows when and if these inconsistencies will be fixed (see Developers gripe about IE standards inaction).
2. A switch from tables and font tags to clean structure + CSS requires a different mindset. It's an exciting change which allows you to be much more creative, though. Ditch those spacer.gif's and start thinking creatively.

Shift Happens

This could be a long and heated debate about the level of compatibility of modern browsers with the web standards, or tables vs clean markup, and so forth. But I want you to remember this much—web standards are here to stay. Whether you follow them or practice old ways of developing web applications it's up to you.

With the help of CSS you have an excellent opportunity to spice up your web sites with cool skins with a fraction of the effort compared to templated skins. What is required of you is to take a commitment and start embracing web standards. Do you want a faster site? Do you want to pay less for reduced bandwidth? Do you want to allow more users to access your web application simultaneously? Do you want to make your site accessible to a larger audience of users? This road isn't an easy one but it sure is worth it!

Discuss

Liked it? Hated it? Discuss this article