Post #47

Opera and its Small-Screen Rendering technology

11th November 2003, lunch time | Comments (5)

Screen shot of this web site using Opera's Small-Screen Rendering technology

A nice man at Opera just told me about very neat feature in the latest versions of their browser:

The basic idea is to use different stylesheet for different devices. You can see how it works by downloading the latest Windows/Linux version of Opera from and browse to www.opera.com or my.opera.com. Hit SHIFT-F11. On any regular site this will reformat the page to fit the screen width of a mobile phone (using our Small-Screen Rendering technology), but on our own properties we have designed a special handheld stylesheet. If browsing there with the mobile version of Opera, this stylesheet will automatically be used.

This is all part of CSS (just like media screen, print, projection etc), but Opera is the first browser to support it. We are now trying hard to promote it do developers. The additional work needed to create a mobile version is quite limited, especially on sites such as your own with very clean XHTML+CSS code.

Bravo Opera. I’m going to be looking in to the area of web standards support on mobile devices more closely in the coming months, and Opera are helping kick off the project by loaning me a device to test.

New gadgets + Dunstan = Happy Dunstan.

Jump up to the start of the post ↑

Comments (5)

Jump down to the comment form ↓

  1. Tony Crockford:

    It's a neat feature, and I'm very pleased that my pet site: http://www.torbytes.co.uk/ works in "handheld" view.

    ;o)

    Posted 11 hours, 56 minutes after the fact
    Inspired: ↓ Dunstan
  2. Dunstan:

    It's good isn't it?

    I notice it tries to compress the images down to fit the screen width, which doesn't really work (not for the images I looked at on my site anyway). But maybe you can get around that using a handheld CSS sheet. I guess so.

    Anyway Tony, I'm glad torbytes passes the test!

    Posted 12 hours, 10 minutes after the fact
    Inspired by: ↑ Tony Crockford
  3. Paul Bennett:

    "This is all part of CSS (just like media screen, print, projection etc), but Opera is the first browser to support it."

    Um...no - this is part of the wap 2.0 spec which mobile device browsers have been supporting for quite some time. What is a clearer statement is that Opera MAY be the first desktop browser to support rendering xhtml mobile profile / css mobile profile.

    Nitpicky I know, but I just had to ;)

    Posted 13 hours, 25 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Dag Olav Norem
  4. Dunstan:

    Thanks for the detail Paul, I was blinded by marketing :op

    Posted 14 hours, 26 minutes after the fact
    Inspired by: ↑ Paul Bennett
  5. Dag Olav Norem:

    Dag wrote "This is all part of CSS (just like media screen, print, projection etc), but Opera is the first browser to support it."

    Paul wrote "Um...no - this is part of the wap 2.0 spec which mobile device browsers have been supporting for quite some time. What is a clearer statement is that Opera MAY be the first desktop browser to support rendering xhtml mobile profile / css mobile profile."

    Media types are in fact part of CSS2: http://www.w3.org/TR/CSS2/media.html
    They are also part of CSS MP (a subset of CSS2): http://www.w3.org/TR/css-mobile#section-mediatypes

    I guess I should have moderated my statement to "as far as I know, Opera is the first browser to support it". I don't know any other mobile browser which handles the handheld media type properly. But i have only tested on three others so I may be wrong.

    Note that when you hit SHIFT-F11 in Opera one of two things happens:
    1. The site has no handheld styleshet: It is reformated using Opera's Small-Screen Rendering technology and author styling is ignored.
    2. It has a handheld stylesheet: It is rendered as designed, using only the handheld stylesheet. See my.opera.com for an example.

    This emulates the default behaviour for the mobile versions of Opera and lets you use Desktop Opera as a development environment for your mobile sites.

    On the mobile devices Opera instead gives the option to toggle to "normal" rendering mode, which will display the site as it would normally look in a desktop browser using the "screen" or an unspecified stylesheet (likely resulting in a lot of horizontal scrolling).

    Posted 2 days, 9 hours after the fact
    Inspired by: ↑ Paul Bennett

Jump up to the start of the post ↑

Add your comment

I'm sorry, but comments can no longer be posted to this blog.