Mobile Stylesheets

Filed under: mobile,opinion,web development — jaydublu @ 2:41 pm

In an article on A List Apart ‘Return of the Mobile Stylesheet‘, Dominique Hazaël-Massieux starts by reviewing the ‘ideal’ approach to making a site mobile friendly:

Ideally, site authors would be able to meet the growing demand for a quality mobile experience without changing a line of code. But the reality is that a site designed specifically with mobility in mind will always provide a much better user experience to mobile users, even when they are equipped with the device du jour. It’s not merely a question of network costs and delays or memory and CPU limitations. Rather, the mobile experience merits its own design, as discussed in a growing body of literature, including the W3C’s very own Mobile Web Best Practices, released in July 2008 as a W3C Recommendation. The formula for a mobile experience provided by Little Springs Design sums up the goal nicely: mobilize, don’t miniaturize. Mobile users operate in a very different usage context than PC users, and providing them with an experience customized to their needs is likely to be the best service you can offer to them.

But then he goes on to describe “a first step toward mobile design that uses CSS to maximize interoperability across platforms” asserting that “by starting simple, you can provide a decent initial experience, solicit user feedback, and iterate toward a more mobile-friendly design.

Shame – because the likelihood is that if you put all your effort into a CSS solution, which is sub-optimal (in my view) because devices still have to load bloated code, and you probably end up with compromises for bot mobile and ‘normal’ browsers amongst other reasons, you’re much less likely to make the bigger step of producing a version of the site optimised for the mobile experience.

Many platforms make it quite simple to do this – there are mobile modules and plugins I’ve seen (and used) for WordPress, Drupal etc. – if you’ve got server side logic, and preferably some form of content management / delivery system going on, it should be not much more than switching to a simpler theme for your presentation when a mobile device is detected.

But then that’s easy for me to say, because I still haven’t done it in anger to any large extent (yet).

Printing jQuery manipulated pages

Filed under: css,jquery,web development — jaydublu @ 5:26 pm

I’m working on a page which is using jQuery to show one block of content at a time from a group of blocks, managed by a navigation. It’s working very nicely, but geting to the later stages I start trying to get print styling working.

Ordinarily, I’d attach a print stylesheet and hide irrelavant things like navigation, and show anything that I want to print that is hidden as per Eric Meyer’s classic article in A List Apart ‘Going to Print‘ – in this case it would be ideal to have all the content blocks printed. But jQuery has rewritten all styling so the print stylesheet which loaded with the initial page rendering can’t help. Or can it?

After much research, herad scratching and good old ‘suck it and see’ experimentation, I’ve determined that yes the theory still holds, you just have to apply a bit more brute force.

jQuery manipulates page styling through use of inline styles. Linked stylesheets can still override inline styles if given a ‘!important’ suffix. So for instance: <style media=”print”>.switchable {display: block !important;}</style> should keep content hidden by $(“.switchable”).hide(); visible.

Bye-bye handheld stylesheets?

Filed under: mobile,opinion,web development — jaydublu @ 5:55 pm

opera.jpgFirst Safari mobile on the iPhone, now Opera Mini 4, it would seem that the trend for mobile browsers is to pretend they’re a Desktop, and to persuade sites not to dumb down the presentation enabling the browser to wow us with zooming etc. they’re ignoring handheld stylesheets. However, new CSS3 features like media queries which allow different stylesheets to be included based on for example screen size.

As discussed on Unintentionally Blank a few weeks back, the reasoning seems to be to save the users from the developers who apparently all want to dish up ‘dumbed down’ sites for mobile devices.

But surely we all agree that mobile devices are not desktop devices – you use them in different contexts and have different requirements. Whilst I appreciate that not all mobile users want a dumbed down site, let’s have choice rather than imposition. And taking away tools that can have a positive benefit if used properly is removing choice.