Skip to main content

Re: Return of the Mobile Style Sheet

In one of the recent articles on ALAP, a Return of the Mobile Style Sheet is discussed. For a whole lot of reasons, I dont think this would really be going to be a return. Or atleast it will not be a happy camper in the web community.

At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they'll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.

Before I jump on to throw dog-pile on this "re-emergence", I would like to say, using handheld media switch in css linking is a very good way to QUICKLY make your site go mobile-friendly. All you have to do is to write up a new css link to your template and vola, your site is right up on iphone, Cool. But will you be willing to leave it to the browser to handle this for you?

Assuming you are of the type who would: lets see, most sites these days are dynamic, either on the server side or on AJAX front. Dynamic here reads not just appearance, data and behaviour too. Pages, most commonly are templated, generated at run time, with lot of data in it. For one thing, It would be easier to maintain a seperate template altogether and switch the content presentation based on user-agent on the server side. More over, sending all the bits over the wire and then NOT showing it just because on the other end it is a small device doesnot make sense. Even Ajaxy things - You would have to write another js and switch it some how to achieve the desired effect. Over all, you are only band-aiding something which needs a total surgery.

Lets say, it is still up for those semantic web vouchers; How will you sell this idea to Google, or Facebook. The case there is further more complex, but even for a simple home page like google's, a user-agent based switch of the template itself on the serverside has been preffered (that is how iphone's safari opens www.google.com). To let users choose the classic version, a link is provided at the bottom. Talk about freedom to choose :)

images from google blogs, infomotions

Popular posts from this blog

Powered By

As it goes, We ought to give thanks to people who power us. This page will be updated, like the version page , to show all the tools, and people this site is Powered By! Ubuntu GIMP Firebug Blogger Google [AppEngine, Ajax and other Apis] AddtoAny Project Fondue jQuery

Decorator for Memcache Get/Set in python

I have suggested some time back that you could modularize and stitch together fragments of js and css to spit out in one HTTP connection. That makes the page load faster. I also indicated that there ways to tune them by adding cache-control headers. On the server-side however, you could have a memcache layer on the stitching operation. This saves a lot of Resources (CPU) on your server. I will demonstrate this using a python script I use currently on my site to generate the combined js and css fragments. So My stitching method is like this @memize(region="jscss") def joinAndPut(files, ext): res = files.split("/") o = StringIO.StringIO() for f in res: writeFileTo(o, ext + "/" + f + "." + ext) #writes file out ret = o.getvalue() o.close() return ret; The method joinAndPut is * decorated * by memize. What this means is, all calls to joinAndPut are now wrapped (at runtime) with the logic in memize. All you wa...

Faster webpages with fewer CSS and JS

Its easy, have lesser images, css and js files. I will cover reducing number of images in another post. But If you are like me, You always write js and css in a modular fashion. Grouping functions and classes into smaller files (and Following the DRY rule, Strictly!). But what happens is, when you start writing a page to have these css and js files, you are putting them in muliple link rel=style-sheet or script tags. Your server is being hit by (same) number of HTTP Requests for each page call. At this point, its not the size of files but the number server roundtrips on a page that slows your page down. Yslow shows how many server roundtrips happen for css and js. If you have more than one css call and one js call, You are not using your server well. How do you achieve this? By concatinating them and spitting out the content as one stream. So Lets say I have util.js, blog.js and so.js. If I have a blog template that depends on these three, I would call them in three script tags. Wh...