Monday, May 14, 2012

Developing a mobile web site

Image: 'Traditional English Bow-top horse-drawn wagon

Going Mobile

This week we're going to look at building a mobile web site (albeit a rather small one).

Before we start, I have to say that there's quite a bit of debate about the best way of going about adding 'mobile content' to a site. As I see it there are 2 schools of thought:

  1. Create a separate site just for mobiles and direct any mobile based browsers to these pages. This has the advantage that you've built the best user experience you can for your mobile visitors, but the disadvantage of having to maintain 2 sets of pages
  2. Build a web site that's 'responsive' to different devices, scaling larger and smaller as screen size dictates. There are two groups in this camp: one that says you should start with a mobile phone sized version and then design in additional elements for progressively larger screens (such as tablets, netbooks and desktop computers, and possibly tabletop screens in the near future). The other school works down from desktop sized screens (presumably from an existing web site), trimming out 'extra' data or moving it down the scrolling mobile screen. The advantage of this second approach is that you only need to maintain one set of pages. The disadvantage is that these pages can be much more complicated to build and maintain. You can read more about responsive design on
For today's exercise I've decided to go with the first school and build a site from scratch.

The development environment

For testing there's nothing like a real mobile phone. You can build pages on your local machine and test on a mobile, but it's a bit fiddly: involving setting up a local web server, connecting to a wireless router and connecting the phone to the development machine's local IP address through that router. An easier method is to install the Ripple Mobile Environment Emulator in chrome.

Once you're set up you can download a mobile web development framework. There are a whole mess of these, but we're going to use the one that seems to be getting the most press at the moment: jQuery Mobile. Not only is it a stable, well supported piece of software, but it has some excellent tutorials and discussions on Quora and stackoverflow.

Here's a couple of tutorials for starters:

1 comment:

Mani said...
This comment has been removed by a blog administrator.