Web design with Opera Mobile in mind
14th December 2011: This article is obsolete
This article is obsolete/out of date, so should no longer be treated as a current or reliable source of information. Please consult the following for more up-to-date information:
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:
- CSS issues
Visit our Opera Mini & Opera Mobile page for details and download instructions.
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
Mouse events and keyboard events
On mobiles without touch screen, JS mouse events will be difficult to handle - you can't do
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.
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.
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.
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.