I am currently looking into mobile web browsers for an upcoming project where I'm designing and developing a web app for mobile access.

Although I know the basics about designing for mobile, things change fast online (as we all know), especially when considering the dramatic rise in iPhone use amongst those wobbly pink things I've seen flinging themselves about outside (people).

The basics, as I understand from reading and dabbling, are still:

• Keep designs "liquid" wherever possible - meaning that the design adjusts to fill the screen, regardless of resolution
• Make sure designs are simple and not overly graphical
• Test, test and test again! Opera Mini has a useful online simulator: http://www.opera.com/mini/demo/ - requires Java though (shudders).

Now, it's worth noting that - with Opera Mini - the HTML, CSS and JavaScript is interpreted by an Opera server, meaning the amount of control the designer / developer has is limited. Don't get Opera Mini confused with Opera Mobile. Opera Mobile is for modern phones, while Opera Mini is generally used on the old 'thin' mobile phones.

CSS support in mobile web browsers

This is one of my main considerations. Can I use CSS2 fully? Can I even get stuck into some CSS3 coding?

As always, I start by trying to find some statistics to answer these questions for me. My concern for the project is the usage of browsers in the UK and Europe. So, after a bit of googling, I found the following site which shows some interesting, up-to-date stats:

http://gs.statcounter.com/#mobile_browser-eu-monthly-200808-200909-bar

So what do the stats tell us?

Well, the top 9 (as of Aug 08 to Sep 09) are:

• iPhone (29%) - WebKit
• Opera (24%) - Opera Mini Presto
• Nokia (19%) - S60 WebKit
• iTouch (11%) - WebKit
• Blackberry (4%) - Bolt WebKit
• Sony Ericsson (4%) - Opera Mini Presto
• NetFront (3%)
• Sony PSP (3%) - Netfront
• Android (1%) - WebKit
• Other (3%)

Looks promising? Well, that's what I thought - what with all the WebKit and Presto references. They are leading the way in terms of modern web standards support, so "no troubles bubbles", right?

But ...

... then I stumbled across a slide show from Peter-Paul Koch titled "State of the Mobile Browsers" - 72 slides of useful information that show how complex the market currently is. We learn that, although many browsers use the same underlying engine, they still don't necessarily rendered pages the same in each case. Meh. Also checkout http://quirksmode.org/m/ for compatibility tables and tests.

I'm also concerned with the 3% of Other. Quite a high unquantifiable consideration.

What's more, I'm surprised not to see any Gecko based layout engines (from FireFox fame) in the stats? Perhaps the full release of Fennec (the FireFox mobile browser) will turn the tide on this lack of show. Time will tell I guess.

So, how shall I approach my mobile project, based on the above?

It's going to have to be simple, liquid and with CSS3 used only in the odd splashes of "progressive enhancement". Bit like the web as it is now - bless its restrictive little cotton socks :P

No massive steps forward, but a worthwhile research exercise nonetheless. Hope ye'all found it interesting, and if you know stuff I don't about it, please comment away.

Special thanks to Jon Hicks and Matt Wilcox for providing some twitter based help during my time foraging for answers on the interwebs :)