Andrew Twigg Design Studio, Ltd

For the mobile designer – really time for mobile CSS?

>I try to build all of my websites without contingent code* unless the case calls for it. I actually don’t think I’ve built a site with contingent code since some time early in the 2000’s (well, early in the first decade of the 2000’s; aren’t we still early in them otherwise?). Those were the days of emerging (and diverging) browsers, Netscape’s death, AOL and all the other things that made designing for the interwebs challenging in their own way.

To over-simplify, cascading style sheets – CSS – can be used to control the appearance (and some light behavior) of websites. They provide form to the content on many websites and I use them all the time in my web development process to do just that. One of the options for web designers is to set up different style sheets for different browsing platforms.

A good application of this could be telling a website to use a different style sheet for displaying a website when it’s viewed on a desktop machine vs a mobile device such as a cell phone, blackberry, or iphone. This is technology I know about and choose to ignore frequently enough because I set up the site to degrade “gracefully” when browsing technology isn’t quite what I had in mind, such as a slow connection, no flash, or maybe -ahem- a cell phone.

With mobile computing emerging as a serious platform it might be time for me to rethink my strategy for some sites. It might be time for me to set up a mobile CSS for websites so when someone browses a site with a mobile device they get a design tailored for them, rather than sloppy seconds… or in my case, at least thoughtfully considered leftovers.

A List Apart, one of my favorite web design reads, features an article on this topic. If you design for the web a lot, this is a decent read: Return of the Mobile Style Sheet

*by contingent code I mean setting up code that will do thing in one environment (such as firefox) but a separate piece of code that will do the same thing or something gracefully equivalent in another (such as internet explorer). this is required frequently when using javascript, as an example, but can also be done in CSS. That’s oversimplified but should be adequate explanation of what I mean.

Leave a Reply