Designing With Opera Mini in Mind

By Opera Software

16th 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 Opera Mini: web content authoring guidelines for more up-to-date information:

Designing for Opera Mini is a special case of designing for mobile devices, you should have a look at the article Making Small Devices Look Great first, as well as the note on Phone Factors. As Opera Mini uses a different approach to the other Opera clients there are a few additional factors that are covered in this document.

Opera Mini uses the same engine as every other Opera product, be it for Desktop, TV, Mobile, or Embedded Devices. Unlike these Opera Mini has two separate components, a Java™ Opera Client thin client on the phone and an Opera Server on the backend doing the pre-processing. Opera Server converts web pages into an efficient code that the Client can understand. Opera Client is designed to be as small as possible and still be able to present web pages usefully.

Opera Mini Client will work on most devices with J2ME support, something most current phones have. Opera Mini Client supports both the older MIDP1.0 profile ("Opera Mini Basic") and the more advanced MIDP2.0 profile ("Opera Mini Advanced"). The web standards support is the same with both profiles, but the user experience is better with MIDP 2.0.

The Opera Mini™ Simulator shows how a page could appear on an Opera Mini device. A basic simulation of Opera Mobile or Opera Mini can be achieved by turning on View > Small screen (Shift+F11) in an Opera desktop browser and resizing the window to the target device size.

Display limitations

There are a few display properties the Opera Mini Client doesn't currently support:

Tables
Underlining, strike-through, and overlining
Blink and marquee

Use of Small-Screen Rendering in Opera Mini

Opera Mini always runs with Colour Small-Screen Rendering activated to adapt web pages to the small screen. Like with Opera Mobile this can be disabled by using a style sheet with media=handheld, but unless you are using a very fluid design (no tables, frames, or positioning) this is not recommended. There is no horizontal scrolling available and a phone screen can be as little as 100 pixels across.

Media types and media queries

Opera supports different media types for different media contexts. Desktop machines use screen, or projection in fullscreen (allowing for OperaShow presentations), print for printouts, and handheld for small-screen view (e.g. in panels). Handheld devices use handheld, the largest devices may also support screen. Home media may use tv or screen, and speech is used for text-to-speech. This media support allows for radically different presentations of the same content in different contexts.

Opera also has partial support of Media Queries. This can for instance be used to make one design for small handheld devices (e.g. less than 200px wide) and another for larger handheld devices. Opera 8 only supports media queries defined in CSS, not in the HTML media attribute. This will be fixed in future versions of Opera.

User interface and document windows

Phones don't come with an attached mouse, and they usually don't have a full keyboard either. Navigation and especially text input is more cumbersome than on desktop machines. Together with the small screen and slow processing the limited UI leads to designs that focus on what is important for the user. Selecting among options is easier than typing preferences, but keep select boxes reasonably small. Picking multiple choices in a select box is much harder to do than a single select.

Depending on memory constraint a web page can be split into multiple pages by Opera Mini.

Opera Mini only shows single window, design with that in mind. Opera Mini supports frames, but frames is not a suitable technique for smaller phones.

Don't do pop-ups
Don't depend on mouse-based interactions, in particular :hover and mouseover
Avoid dynamic menus
Don't force the user to type more than necessary

International text and fonts

Opera Mini supports internationalization, including the full range of character sets supported by Opera in addition to Unicode. However this is dependent on font support in the phone which commonly is limited. Bidirectional text is not supported in Opera Mini.

JavaScript

The thin client model also gives strong restrictions on JavaScript interaction. Event based scripts, for instance by triggering a button, can be run while background scripts will fail. Opera Mini only uses one window.

Not supported

Pop-ups are either blocked or replace the original document.
Background scripts
Events handlers using the 'this' keyword on other elements than form controls. This fails: <a href="http://labs.opera.com" onclick='window.location = this.href'>

Supported

document.write()
Event based scripts (with the exception above)

Server Sniffing (User Agent String and Location)

The User Agent String

Opera Mini will give the same UA string as Opera Mobile, but additionally it will identify itself as Opera Mini in a comment. Look for "Mini/N.M" (e.g. "Opera Mini/1.2") in addition to "Opera/N.M" (as Opera) or "Opera N.M" (spoofing).

Opera Mini/1.0 and 1.1: Limited regional releases for Northern Europe.
Opera Mini/1.2: Global release of Opera Mini.
Opera Mini/2.0: First major upgrade of Opera Mini.

IP-based location sniffing

IP-based location sniffing is based on the knowledge of the location where blocks of IP addresses are registered. This is usually enough to give a rough idea of the user's location, such as country or region. This is far from a fool-proof method, and the user should always have the option to correct the initial assumption. In particular assumptions on preferred language based on IP address should be avoided.

Opera Mini has an additional issue. The IP address of the HTTP connection is the address of the Opera Mini Server, and it can be very distant from, even be in a different country than, the Opera Mini Client.

The X-Forwarded-For header contains the more useful IP address of the Opera Mini Client. Services using the IP address to give localized content should first look for an X-Forwarded-For HTTP header, and only if such a header is absent use the remote IP address of the HTTP connection.

Cookies

Cookies are supported.

References

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