Web design with Opera Mobile in mind

By Chris Mills

Introduction

Opera Mobile is a fully featured web browser, developed to run on high-end mobile devices. It is based on the same core rendering engine as its Opera cousin, and as such has the same web standards support (with the exception of a few features like native video support, which are device-dependent). There are however a few caveats to consider if you want to make sure your web sites will work as desired in Opera Mobile, and these are all detailed below. This article is structured as followed:

1. CSS issues
2. JavaScript issues

Visit our Opera Mini & Opera Mobile page for details and download instructions.

CSS issues

CSS support in Opera Mobile is largely very good, but there are some issues to consider - these are mainly due to the device limitations rather than browser limitations.

Font styles and languages

Availability of fonts and languages on mobile is very limited. On the desktop you typically have fonts available for a reasonable number of fonts*, in hundreds of languages with characters of almost any size for each font. On mobile you typically have fonts only for a few languages (region based and they also vary between devices) and each character in a font is often only available in 2-3 sizes. Bear this in mind when you are designing your site typography, and don't go too overboard with different font combinations or obscure font choices.

On the desktop, Flash is becoming a viable tool for typography - check out siFR (Shaun Inman Flash Replacement) - and there is Flash support in Opera Mobile, but use it carefully, keeping in mind the file size and screen size limitation you are working with on mobile devices. At the end of the day, you need to test, test, test. Opera on Windows Mobile also supports Flash Lite 2.1.

* Let's face it, the web is terrible for font choice - print designers moving to the web have a hard time - but there are some good ones available, such as Georgia and Helvetica.

Positioning and layout

The biggest thing to consider with CSS on Opera mobile is that due to the size of the screen, a lot of CSS layouts won't really work. To handle this, most phones default to CSSR (Color small screen rendering.) This rendering mode reformats the whole page into one column, disregarding a large portion of the stylesheets (positioning, visibility, font sizes, etc). This can be overridden by the use of a @media handheld stylesheet, but be aware of the limitations you are playing with in the mobile space. Opera Mobile also supports CSS3 media queries, which is great news, but bear in mind that it only works with pixels.

On newer and more powerful phones, Opera Mobile defaults to a rendering much closer to that of its desktop cousin, using pan and zoom features to navigate around the page. The ERA textwrap feature (also known as Limit Paragraph Width or MSR light) wraps lines to the width of the browser window so that they are readable without too much panning. Some CSS tweaks are included here, for example height becomes min-height.

JavaScript Issues

Again, JavaScript support on Opera Mobile is very good, and most of the issues presented here are to do with the device, not the browser.

Mouse events and keyboard events

On mobiles without touch screen, JS mouse events will be difficult to handle - you can't do onMouseOut, onMouseMove etc when you have no mouse, so on sites that you want Opera Mobile users to make use of, provide alternatives to mouse selection.

On the flip side of the coin, you can't rely on keyboard events on devices with no keyboard. Providing both mouse and keyboard input mechanisms is simply the best way to deal with this, plus it also confers accessibility benefits on the desktop.

JavaScript differences between specific implementations of Opera Mobile

Some vendor-specific implementations of Opera Mobile disable various JavaScript features, for example some devices have XMLHttpRequest disabled. It is very difficult to document all of these possibilities, but bear this in mind if you are ever troubleshooting one of your sites, and you are pulling your hair out because you can't figure out why it won't work on a certain phone.

Memory constraints

In terms of JavaScript on Opera mobile, memory is the major concern - mobile devices obviously have much lower memory capacity than desktop computers, and scripts that demand several mb to run cannot be expected to run on low memory phones.

Summary

This article has detailed the main issues to be aware of when developing web content with Opera Mobile in mind. Apart from the above, you can pretty much guarantee that other functions and techniques will work as expected in the Opera desktop version.

Chris Mills

Chris Mills is a web technologist, open standards evangelist and education agitator, currently working at Opera Software in the developer relations team. He spends most of his time writing articles about web standards for dev.opera.com and other publications (such as .net mag and A List Apart), giving talks at universities and industry conferences, and lobbying universities to improve their web education courses. He believes that education is the answer to everything, but in particular he is passionate about using education to improve the overall content quality, accessibility, usability and future-viability of the Web.

He is the creator of the Opera Web standards curriculum, contributor to the WaSP InterACT project, and coauthor of InterACT with web standards: A Holistic Approach to Web Design. In August 2011, he also accepted the position of co-chair of the newly-formed Web Education Community Group.

Outside work he is a heavy metal drummer, proud father of three and lover of good beer.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.