New Adventures In Mobile (CSS)

Screen grab of the opera mobile demo from opera.comSo, for the last couple of days I’ve been working on a mobile version of this site. It’s the same site, same pages, just the design is tweaked to make it look better on a mobile handset. It’s easy enough to do, using CSS. CSS stands for ‘Cascading Style Sheets’, and is a way of labeling elements on a web page, and then controlling the way that everything that has that label is formatted. But because the machine you look at a web page on can be identified as a computer or as a mobile, you can have a different stylesheet for each type.

Basically, it means that I can tell the mobile version not to show the sidebars with all the links in (I just change the CSS stuff in the ‘handheld’ stylesheet to say:

#sidebar { display: none;}

so it doesn’t show up. It’s a slightly clumsy way of doing it, as it means that you still have to download the code to your phone, even though it doesn’t show up, but it’s a lot better than trying to view the full version of the site on a phone.

If you had looked at it before today, the version of the site you saw was from a rather gorgeous WordPress plugin called Mippin – the reason I stopped using it is that Mippin only acts on the RSS feed of the site, and so you can only access blog posts, and not any of the other information pages. It also doesn’t let you click on a link to a specific post and be taken there. Everything defaults to the front page. Great if you just have a news blog, not so great for a site as big as mine. However, if you really liked the Mippin-version of the site, it’s still available here.

The reason for all this effort is that mobile web browsing is getting more common all the time. I do about 20% of my web stuff on my phone, and with the advent of the iphone and iPod touch, more and more people are browsing on handheld devices. So site designs optimised for screens at least 800 pixels wide aren’t ideal.

What I did discover while doing these tweaks though, is that the shop on this site works great on my Nokia N95 – I’m guessing the same goes for any smart phone. I didn’t try to check out with Paypal (which should work anyway…), but if you want to buy anything off the site directly onto your phone, or if you’ve already bought a download album, and want to download a copy onto your phone as well, you can do that through the shop. I might have to tweak the shop design to optimise it for mobile too! It’s really tough to find payment options that work on handheld devices, other than, obviously, iTunes on the iPhone and iPod Touch. I wonder if BandCamp have any plans to do a mobile version?

If you are wanting to get into viewing web pages on your phone, you could do a lot worse than to install Opera Mini – really nice browser for most kinds of phone. (the screen-grab at the top is of the phone-emulator on their site)

And as a treat for anyone reading this on a mobile, email me for a £2 off gift voucher for anything in the online store. This will only be viewable on the mobile version of the site, but you can log into the store either on your mobile or on your computer at home to spend the £2. Just send me an email!

© 2008 Steve Lawson and developed by Pretentia. | login

Top