The Opera Browser

Table of contents

• Introduction
• Device usage is changing
• Real Web pages are not perfect
• The horizontal scrolling problem
• How ERA can help
• Rendering technologies
• Benefits of ERA
• Uses of ERA
• Opera products including ERA
  • Opera Mini
  • Opera for mobile
  • Opera for Devices
  • Opera for Desktop
• Links

ERA is an all-encompassing technology that tailors Web-content to virtually any display media.

Introduction

Most Web pages are designed to work only at a specific range of screen resolutions, and do not cater for low-resolution screens, or handheld devices. To combat this problem, Opera introduced Small Screen Rendering ™ (SSR) in 2002, which could reformat pages to suit the small screens of handheld devices. However, as screens on various devices come in all sizes, the browser should be able to dynamically adapt Web pages to fit any sized screen. Opera met this challenge with the advent of Extensible Rendering Architecture ™, or ERA, in 2004. ERA encapsulates several of Opera's rendering technologies and enables the Opera browser to dynamically adapt any Web page to fit the width of any sized screen.

In short, Opera's Extensible Rendering Architecture (ERA) is a flexible technology that can make Web pages fit on a full range of displays, without the need for horizontal scrolling. This makes it possible for pages to be viewed on small computer screens, televisions, PDAs, mobile phones, and even printed, without the need for customized pages, or specialized stylesheets.

ERA also combines naturally with Opera's zoom feature to make pages more accessible, and available to a wider audience. For example, the visually impaired will find it useful to magnify a Web page two or three times, and still make it fit on the screen.

Device usage is changing

As the Web matures, the capabilities of computers improve, and it is common for Web sites to be designed to suit the latest hardware. However, older computers are still in use, and importantly, computers are no longer the only devices used to view the Web.

Mobile phone and device browsing is becoming more popular, and a large number of phones and digital television packages are being developed with Web browsers included, such as Opera. The majority of mobile phones have significantly limited resolutions, between 100 pixels and 300 pixels wide. Handheld devices offer a range of resolutions, generally a little more than mobile phones, but less than a television. Most televisions use a width of 720 pixels, with up to 20% lost through inefficiencies.

Real Web pages are not perfect

A well-written Web page can tailor its design to ensure that it works flawlessly on any display size, and can take small screens, printers, handheld devices, televisions, and verticals into account as well. In reality, this attention to design takes financial resources, so most designs cater for only the most common screen resolutions, typically 800 pixels wide or more. The majority of Web sites are targeted towards desktop computer browsing only, and do not provide alternate layouts for handheld devices, televisions or printing.

Many Web pages rely on rigid table-based designs that have strict limiting minimum sizes, with enforced column or cell structure. Other HTML structures such as framesets often have limiting sizes.

Even sites with fluid designs may run into difficulties when the window is made too narrow, where margins, padding, positioning, and countless other styles restrict the minimum width that can be achieved.

Most Web pages have a very specific design, often with corporate or organizational branding. Allowing the pages to suit any display size is often considered unacceptable, as it might affect the branding required by the site owners.

The horizontal scrolling problem

When the page becomes too wide for the available width, the typical response is to show a horizontal scrollbar, allowing the user to scroll left and right in order to view the content. This can be very frustrating for most users, as it means scrolling sideways for each individual line of text.

This can cause particular problems on devices, where the available controls may not provide any way to scroll horizontally. Most device content is laid out in a way that requires only vertical scrolling to access it.

Users with visual impairments will often need to increase text size, or use Opera's zoom feature to enlarge the text and images on the page. With rigid page designs, this has the same effect as using a smaller screen, and may break the page layout, as well as forcing the user to scroll sideways to see each line of page content.

How ERA can help

Extensible Rendering Architecture (ERA) is a framework that incorporates several of Opera's rendering technologies, each of which is capable of reformatting a Web page so that it can be displayed using screens of different sizes. As the available space changes, Opera dynamically selects the most appropriate rendering technology, and applies it to the page, without the need for any further user interaction.

Each technology is tailored to suit a range of resolutions, and attempts to reformat the page to fit that size, while retaining as much as possible of the original page design and branding. ERA makes this possible, even if the page author has not specified appropriate stylesheets or pages for the relevant resolution or device type.

By selecting an appropriate rendering technology, Opera can make even rigid pages function on a complete range of screen sizes, in a seamless way that cannot be easily achieved through the use of stylesheets alone. ERA also combines with Opera's zooming functionality to allow users to change the size of fonts and images, while still applying an appropriate reformatting to remove the need for a horizontal scrollbar.

Rendering technologies

The rendering technologies that ERA utilizes are Medium Screen Rendering (MSR), Aggressive MSR (AMSR), Small Screen Rendering (SSR), Color SSR (CSSR), Television Rendering (TVR), and normal screen rendering.

MSR is generally suited to smaller computer monitors, AMSR is generally suited to PDAs, CSSR is suited to mobile phones and low-resolution PDAs, and SSR is suited to low-resolution mobile phones. Each of these applies more aggressive reformatting and scaling, restructuring pages to remove the minimum widths enforced by tables or fluid designs. TVR is suited to most televisions, where problems caused by small fonts, interlaced displays, and high contrasts can also be avoided.

The rendering technologies employ a number of methods to make pages fit into the available space, such as:

• Scaling images and text
• Restructuring tables
• Compensating for contrast
• Combining framesets
• Line-wrapping
• Repositioning elements
• Removing unnecessary margins and padding
• Selected hiding of unnecessary content

They are able to combine with relevant CSS media types, or rely entirely on the specified media type, if it is available.

The ERA framework provides the additional benefit that it allows the reformatting methods to be easily tailored by Opera Software ASA to suit the unique requirements of individual devices.

Figure 1: Screenshots of Opera 8 for Symbian's Series 60 platform, displaying the BBC News Web site. These show the difference between how the page would be displayed using normal rendering, and how it is displayed when reformatted using ERA.

Benefits of ERA

By reformatting pages to suit the screen size, ERA saves both the author and the user money and resources.

ERA replaces the need for additional stylesheets for the individual media types and screen sizes. It replaces the need for device or printer-friendly pages. As a result, the author does not need to use resources to make the stylesheets or additional pages. The user does not need to download extra stylesheets or page versions, saving bandwidth charges for both the author and the user.

Users do not need to upgrade their computer monitors, televisions, or phones to a higher resolution. It is possible to view pages even if they are not specifically designed for the type of device, or screen size being used.

Content providers benefit because their content will be more accessible, and available to a wider audience. Users can also keep Web page content visible in their panel while browsing other pages. Service providers for televisions and devices do not need to incorporate reformatting proxy servers.

ERA makes it easier for Web page authors to retain the required corporate or organizational branding at a large range of resolutions. It makes it possible without having to disrupt the layout with links to device or printer-friendly versions.

Figure 2: Screenshot of Opera 8, with Sports Illustrated as a main Web page, and the Sony Ericsson site as a panel, using the total screen space of 800 x 600 pixels. Both pages are reformatted using ERA, with CSSR being applied to the Sony Ericsson page, and AMSR being applied to Sports Illustrated.

Uses of ERA

ERA is useful for viewing Web pages wherever screen space is limited. Table 1 (below) gives examples of a few of the most common uses of ERA, and what alternatives are not needed as a result of using ERA.

Opera products including ERA

Opera Mini

CSSR is enabled by default, performed by the Opera Mini server.

Opera Mini is available for the vast majority of Java enabled mobile devices, including mid and low-end mobile phones, currently over 700 million devices Worldwide.

Opera for mobile

CSSR or SSR is enabled by default, and can be tailored by Opera Software ASA to suit individual devices. Some devices will offer a way to disable CSSR.

Opera for mobile is available on many mobile phone and PDA platforms, including Symbian Series 60, Series 80, and Series 90, Windows Mobile for Smartphone 2003, UIQ, EZX, BREW, µitron, Linux Qtopia Phone and PDA Edition, and Psion.

Opera for Devices

TVR, MSR, or AMSR is enabled by default, and can be tailored by Opera Software ASA to suit individual devices. Some devices will offer a way to disable ERA.

Opera for Devices is used on millions of devices, including Nokia 770, Archos PMA400, Amino Aminet Series IPSTB, Telsey IPSTB, i3micro IPTSB, NDS MediaHighway Advanced digtal TV middleware, Sharp Zaurus PDA, and many others.

Opera for Desktop

ERA can be enabled by selecting View - Fit to window width. CSSR can be enabled individually by selecting View - Small screen.

When pages are added as a panel (Bookmarks - Bookmark page - Show in panel), CSSR can be enabled by selecting "Small screen" from the panel's View menu.

Opera for Desktop is available on the major desktop platforms, including Windows, Mac, Linux, FreeBSD, and Solaris.

Links

Links to further information:

• Opera Software ASA: http://www.opera.com/
• Opera Mini: http://www.opera.com/products/mobile/operamini/
• Opera for Mobile: http://www.opera.com/products/mobile/
• Opera for Devices: http://www.opera.com/products/devices/
• Opera for Desktop: http://www.opera.com/products/desktop/
• Incorporate Opera in your Internet device: http://www.opera.com/company/business/
• Opera's Small-Screen Rendering: http://www.opera.com/products/mobile/smallscreen/

Opera for Devices

Get the new Opera for Devices whitepaper.