There’s a lot of buzz these days about how “touch web” browsers, especially the iPhone’s Safari, but also the WebKit based browsers on Android, Palm WebOS  and recent Symbian devices are  revolutionizing mobile browsing.  It’s certainly true, especially in the US and other developed countries, that advanced smartphones with powerful “full-web” browsers have opened a lot of eyes to the fact that using the Web on mobile phones is not only practical but fun and useful.

But not everyone can afford an iPhone and the expensive data plan that it and other smartphones require.  And the iPhone’s great browser is not so great on slow GPRS or even Edge networks.  If you look to the developing world you won’t see many iPhones. In the US prepaid market you won’t see any at all.  In places like Africa, India and the Philippines millions of people are using and enjoying the “touch web” and the full web on slow networks with basic feature phones or old smartphones.  They are using Opera Mini, a great little Java ME browser that runs only almost any phone.  Opera’s server assisted technology reduces page size and bandwidth by up to 90%,  saving money of metered data plans and making even large pages load quickly on creaky networks.  It’s not just the developing world either, Opera Mini is popular everywhere.  It’s usage is growing rapidly with over 50 million people using it every month! That’s bigger than  the iPhone’s estimated installed base of about  34 million devices and close to the combined iPhone plus iPod Touch total of 58 million.

With Opera Mini being as popular as the iPhone, you would think that it would be on every mobile web developer’s radar and  that sites and web apps would be tested on and optimized for Mini as they are for the iPhone.  Strangely the opposite seems to be true.  While Opera Mini can render almost any site, many pages do not look their best in it.  The biggest culprit is pages that are designed to fit screen width on the iPhone and other touch web browsers but overflow the window and require horizontal scrolling to see the whole page in Opera Mini.  Here’s are a few examples:

The culprit is often wide images, especially header banners. In many cases, the  fix is as simple as one line of CSS: style=” img {max-width:100%;height:auto;}” I don’t recommend hard-coding that into the page though as Mobile Internet Explorer and some other browsers will resize image width but not height resulting in skewed images.  It’s easy enough to detect Opera Mini, every version sends “Opera Mini” as part of the User-Agent header.

Mobile web designer’s ignorance of Opera Mini goes beyond delivering less than perfect layout. In some cases, entire sites are totally broken in the browser. Two major mobile focused sites, Boy Genius Report and IntoMobile actually serve pages to Opera Mini users that are devoid of any content! Both sites detect Mini and send it a supposedly mobile optimized view of the site.  The only problem is that the entire body of every single post on both sites is missing when viewed in Opera Mini. The image on the left shows how BGR looks in Firefox when using the User Agent Switcher extension to impersonate Opera Mini.  On the right is BGR in the real Opera Mini.

I’m not sure what is wrong with these pages that causes the post bodies to disappear.  The html for the bodies is present in the source code but somehow it’s getting hidden, probably by some broken CSS or Javascript.  The only way to view the posts on these sites is to go back to the front page and hit the button that lets you turn off the default mobile theme. The desktop version of BGR works fine in Opera Mini.

Update: a few days after this post was published IntoMobile fixed their site, which had been broken for months, and it now works perfectly with Opera Mini.

It’s pretty obvious that the people who built these sites never once tried viewing them in Opera Mini!

If you create web sites for mobile or desktop, please do 45 million Opera Mini users a favor and test your pages in it. Not only is it good for the users, but it ought to give your page views a shot in the arm as well. It’s not that hard, Mini runs on just about any old Java capable phone.  And while I don’t usually recommend testing with mobile browser emulators, you can run the actual Opera Mini code in MicroEmulator on a PC.  Microemulator even has a re-sizable device skin that lets you quickly test with various screen sizes.

Incidentally renowned web design consultant PPK (Peter-Paul Koch) published a piece yesterday titled “The iPhone obsession” which is all about the folly of designing sites only for the iPhone.  It should be required reading  for everyone working in mobile.