Mobile Website Development

My recent web project has been to develop a mobile website for our clients. Not a mobile app, but a mobile website. Finding information on mobile website development was not easy – a lot of info was directed toward making mobile apps, primarily for the iPhone. One good resource I found was on the yahoo user interface blog.

In order to emulate the popular iPhone apps we decide to use jQtouch (good basic how-to article). It does a good job of wrapping most of the touch events, making a smooth looking site on iPhone and other touch devices. We were able to take advantage of a few HTML5 (the “placeholder” attribute) and CSS3 (border-radius and gradients) features which was fun. I was able to test and debug the site using Safari (developer tools allow you to emulate iPhone) and my Android phone.

Everything was coming together nicely until I had to test on the Blackberry. After overcoming the challenge of installing the Blackberry MDS service and a couple device emulators I was finally able to do some testing of my mobile website on the Blackberry browser. I had 3 devices I was using to test (client is in Canada, these are 3 of the popular Blackberrys offered by Rogers): Bold 9000, Curve 8900, and Curve 8520. I was surprised at the differences in html and css rendering across these devices, despite the fact they are all running 4.6 version of the Blackberry browser.

Here are a few of the things I learned about making a mobile website that can be used on a Blackberry device:

• Give inputs size attributes (both the Bold 9000 and the Curve 8900 required this)
• Buttons – use padding and margin (the Bold would not center align text)
• Images cannot have width: 100%
• Float right = bad. Use absolute positioning instead
• Text areas – sigh, still not sure what will work to make them scale nicely
• Use <meta content=”true” /> – tells the browser you have optimized the site for handheld devices
• If you are using XHTML – ensure that your HTML validates. Or use

 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Update: This could be handy: CSS3 media queries