Bruce Lawson's personal site

Opera Mini: what, why and how

Speaking to a few hundred developers this week at Future of Web Design Bristol and Glasgow, some attendees were surprised to learn that Opera passed the iPhone to lead the mobile-browser market. This seemed counter-intuitive as “everybody” in the web development world has an iPhone, just like “everyone” uses a Mac.

Of course, we know that in the real world, most people do not have an iPhone and don’t use a Mac. This is a demonstration of the potentially dangerous belief that “my customers are the same as me”. As everyone wants to make their sites mobile-friendly, and as today sees the release of Opera Mini 5 beta, now is a good time to explain what Opera Mini is and how you design for it and test it.

What is Opera Mini?

Web browsers are hugely complex beasts. Working out the interaction between HTML, CSS, SVG, JavaScript and rendering it all is highly processor-intensive. They rely heavily on Operating Systems (which is why making cross-OS browsers like Opera and Firefox is hard).

World-wide there are 100 million or so smartphones, each of which has an Operating System that can run a full web browser such as Opera Mobile or Safari.

But there is an estimated 1 billion lower-specced phones around the globe, many of them in the developing world (but by no means exclusively so; how many people do you know with featurephones rather than smartphones? A lot, I’ll bet).

Because it’s a world-wide web, and not just a wealthy Western web, we developed Opera Mini, which works on all phones—even on the lower-end ones, as long as they support Java.

There often isn’t enough processing power to render the page on these phones, so the requests are pre-rendered on servers running Opera’s layout engine and the result is sent to the phones from the server as a heavily compressed “snapshot” of the page. It’s by no means uncommon for this to be as small as 10% of the size of the original page.

Because of this heavy compression, displaying pages on the user’s device occurs much faster than if it had processed the page itself, and for those who pay by the amount of data downloaded it’s also a huge cost saving. This compression and data saving also explains why many Western users of smartphones use Opera Mini to reduce bankruptcy-inducing data-roaming charges when they travel to a neighbouring country.

How to ensure your site works in Opera Mini

The same way that you ensure your site works in every other browser: design using Web Standards and make sure your code validates.

A useful technique for cross-browser and cross-device development are to use the Hijax methodology for adding Ajax interactions.

Don’t be immediately tempted to start building a special mobile-only verson of your site (see my ZDNet article Forget the mobile web: One site should work for all). Using CSS Media Queries, you can send reformatted screen layouts to devices according to their display properties.

Leverage those accessibility synergies!

Another secret of developing with mobile devices in mind is to consider accessibility. If you think about it, having a small screen with no keyboard is somewhat like browsing with assistive technologies.

Many people on expensive data plans browse with images turned off, so sensible alternate text gets the content to them. Many older mobile devices have limited fonts and colours, so by not using those as the sole way of giving information makes your sites both accessible and available to mobile devices.

The W3C produced a useful cross-reference that rejoices in the title Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) which explains this in more detail.

Further resources

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

One Response to “ Opera Mini: what, why and how ”

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.