Skinning Web Applications with CSS

Posted on February 22, 2004

8 comments

The common approach to skinning web applications lies in reshuffling controls on a page. Traditionally developers define templates with different color schemes and/or control positioning, tables and inline font tags. While this used to be a perfectly viable solution the overhead of run-time application of these skins is staggering. A much better way is to separate skin structure from presentation and let CSS take care of the layout and typography.

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!

8 comments

Deeptha
on August 11, 2004

Can you direct me to any example which uses CSS for .net application?
Or
Can you show me a sample css file for a .net application?


Milan Negovan
on August 12, 2004

Well, unfortunately I don't. Yet. However, any site that uses semantic markup is a good candidate for this kind of skinning. You need to define several stylesheets and wire up the style switcher. Dan Cederholm has a simple skin switcher on his site.


Deeptha
on August 12, 2004

Thanks Milan,

I need some help.
I have a style sheet. I want to link it to an .aspx form file.
How do I do it?

There are few text fields and buttons on the form.
I have written a css style. How to link it to the buttons?

Thanks
Deeptha


Milan Negovan
on August 13, 2004

All you really have to do to link a style sheet is include a "link" tag in the "head" section of your page. Do a view source on this page and see how I've linked my style sheets.

Second, assing buttons styles you defined in CSS, and you're all set!


Ian
on November 25, 2005

What do you do if your web applicaiton displays complex tables of data. Surely you can't achieve the table layput you require for 10 or more columns in CSS, yet this table layout forms part of the 'skin'.

I am attracted to skinnable web applications, but I need to be convinced it can do everything, or it isn't worth it.

Ian


Milan Negovan
on November 26, 2005

Ian, tabular information should be presented in tables---that's what tables are for. Converting tables to a div galore has never been advocated. In fact, you'd be surprised how many people don't realize there are many CSS properties available to style tables.


Leblanc Meneses
on August 04, 2006

css skins are not enough sometimes a design needs an extra div or a different arrangements of divs with the same content.

master pages


EK
on February 23, 2007

You may laugh at this, but...CSS is reamedy for miserable standard named HTML that fell on us from hell.

HTML may have been a nice idea but it is so unpractical and is hard to understand well, fix or deal with without an editor and not 100% portable across browsers.

Or may be the HTML is not the problem - Maybe the whole "Browser" thing is the stupid one!

I am surrprised that this is what we had to deal with in 2007!

EK
MSCD