stevelawson.net

Steve's Blog: Solo Bass & Beyond



New Adventures In Mobile (CSS)

March 15th, 2009 | No Comments | Categories: Geek · site updates · tips for musicians |

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!
facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Similar Posts elsewhere in this blog:

`

Tags: · , , , , , ,

No Comments so far ↓

  • Jim Offerman

    The downside of using CSS to hide things is that those hidden elements _are_ transmitted to the phone… people with limited data plans might not like that. It would be really awesome if there were an easy way to have WordPress (or some other script) not output those sections in the first place.

    Still, kudos on the mobile site!

  • steve

    Hi Jim, thanks very much for that – it’s true. I think I’ve found a way to not download the sidebars at all, by putting the mobile exclusion css class in the index.php single.php and archive.php templates. Haven’t tried it out yet, as don’t wan to break my site while it’s having the highest volume of traffic it’s ever had, thanks to the twitter post :)

    And I’ve managed to work out how to easily replace hi-res flickr photos with lower res ones with about 50 char of code. If I switch to re-directing to a separate mobile page, I’ve even got an output-buffering PHP script that will change the flickr URL automatically to switch to the lower res pic. My idea, made possible by the geek powers of @mikearthur :)

    The mobile CSS is definitely a work in progress! 😉