Stylesheets for Mobile Browsers (agh!)

I sat down this morning and asked myself what my blog post would be about. Since I’m coming off of a marathon CSS coding session last night, that leapt to the front of my mind.
You see, last night, I set out to redo the design for my website (www.ryanhoover.net – new design’s not up yet as of 01.30.2010). I took the easy route and started out with a CSS template off a creative commons-licensed site. I know, I know. Real designers don’t use templates – but who said I was a “real” designer. Anyway, that started out all well and good. I was able to migrate my site’s content and general philosophy to the new design pretty easily. I had a couple problems with dynamically changing a ’s height, but that’s another post.

Then, I decided to go for a style sheet for mobile browsers. Then, I was about 5 hours later still trying to get the highly rudimentary style sheet to load properly. I started out with two different style sheets, loaded upon a “media” condition:

Danged if I can’t get my WinMo 6.1 device to load the mobilestyles.css. Went to the Opera Mini testing ground, and for some reason, the media=”handheld” tag just isn’t being recognized.

And I was left thinking again about what I see as one of the biggest hurdles for web development – lack of absolute standards. There’s constant discussions among the various web design support communities about how to get a single page to load consistently across browsers. Chrome and Safari wholly conform to the formal standards set out by the W3 Consortium (at least to the best of my knowledge). Firefox, it comes really, really close. IE. Well, Microsoft decided back in the browser wars of the 90’s that it wasn’t going to play nicely with others and has set out on its own path.

And now we have mobile browsers. That is, browsers that operate on resolutions that max out at 320×240, don’t fully support CSS, handle only a fraction of javascript, don’t support Flash in any meaningful way, and have absolutely no pointing device. For that last one, think hover effects and pop-out menus – or the lack thereof.

My obligatory mentioning of the iPad here (we all have to, don’t we!). It seems to be, in the context of compatibility, a mobile browser with a larger resolution. That is, from a developer’s standpoint,  it’s not a whole lot better. The lack of Flash support is particularly troubling to me, but again another post.

The result of all that variability in standards support is that a single webpage will look completely different to different viewers. And it may even look different to a single viewer visiting it on different devices (Profhacker’s mobile version is a great example of this for me, as is the NYTimes). Now, from a visual rhetoric perspective, what that means is the message being communicated to different visitors is different. And, most likely, the publisher isn’t exactly sure what that message is (unless, the website is tested and validated on every browser available – yeah, right!).

So, my first reaction to this is – great! The visitor is getting to determine the presentation of the information received, and by extension the visual rhetoric, and by extension the meaning. But, wait. Is the visitor determining this, or is it the visitor’s browser? That is, all IE users get to see Microsoft’s version of the Internet’s information. And all Chrome users get to see Google’s. And all iPhone users, Apple’s. Now, there’s a post apocalyptic possibility here where we divide ourselves according to the browsers we use just like we do according to our political beliefs but that seems a stretch to me.

But that leads to a second reaction. The iPhone/Android/Palm/WinMo users will, almost without exception, see a stripped down version of the web. That is, after all, the most prominent advice you see when designing CSS for mobile browsers. Universally, the current advice is to strip out sidebars, footers, non-critical images, and provide only the bare-bones content. And, as we all know, more and more web browsing is being done from those devices (there was an article in the NYTimes I can’t find that said smartphone sales were supposed to surpass notebook sales in 2010 – I’ll keep looking for it).And, so, many individuals see one web when they’re on the mammoth-sized 13″ laptop (*grin*) and one when they’re on the petite smartphone. This, to me, puts a damper on the many claims that mobile browsing is going to make the Internet permeate our lives – that because we’ll always be connected, the Internet is going to be an all-pervasive force. My reaction is, which Internet? The stripped down one? Oh, yea!

Ok, ok. Mobile browsing is still in its infancy. In a few years, mobile browsers will probably be fully CSS and javascript compliant. And we as web designers will have adjusted our techniques in delivering content to match the capabilities, and advantages of mobile browsers.

But as I’m heading back to wrestling with getting my mobile style sheet to load, I realize we’re not there yet.

May you live in interesting times.