Open Standards, One Web, and Opera

There are many types of technology to choose from when implementing your Web application. There are many different types of device that can view the Web, from desktop computers to mobile phones, televisions and games consoles. And last but not least, there are many types of user browsing the Web with these devices, all with different levels of ability and technical knowledge, different needs and desires, with different connection speeds, who live in many different timezones, and have all kinds of other variable factors. In short, it's a bit of a mess, so how can we be expected to deliver sites that will suit all of these users? Telepahy? The Matrix? Digital Babel fish?

The short answer is "Use Web standards, and use standards compliant browsers." For the longer answer, you'll have to read on! Below you will explore the concept of the one Web, why open standards are important in helping the Web community achieve this, and why Opera browsers are such great tools for developers and users to develop and consume Web content.

To any non—Opera users reading this, we'd like to suggest that you just give the new breed of Opera browsers a try — we think you'll be impressed with what you find. If you have any comments to make about Opera, its software, or this article, don't be afraid to comment at the bottom. Praise is always appreciated greatly, as is constructive criticism; outright abuse is welcome, as long as you send your credit card details along with it.

Apart from a very small number of browsers (Mosaic, anyone?) Opera is pretty much one of the first companies ever to make a Web browser. That was in 1994, and 13 years later we're still going strong, with 9 major versions of Opera desktop, 8 versions of Opera mobile, 4 versions of Opera Mini, several other browsers for devices as diverse as TVs and game consoles, and a large number of partners.

We believe very strongly in 2 main principles:

1. One Web — first coined by the W3C, the one Web principle is what it implies — there should be one single Web that can be accessed by any Web—enabled device, not different content for different devices — this is unsustainable, and a maintenance nightmare — having to maintain several versions of the same content can be really frustrating. The "one Web" is made possible by...
2. Open standards. Technologies such as CSS and HTML are open — they are free for anyone to use and get involved in the evolution of, and because they are also standards, pages created using them should be viewable on any device by anybody, as long as user agent vendors follow the standards. Most vendors, including ourselves, are making a pretty good job of this these days, mostly (hint — there is still a bloated giant out there that has trouble with standards, despite controlling over 70% of the browser market. We won't name any names...) Proprietary standards, that is, standards that are not free for anyone to use and lock you in to having to use a single/few company's products, are bad for the one Web, and are often inaccessible (that is, not usable by users with disabilities) and expensive to develop with.

To support these principles at Opera, we make our browsers as standards compliant as we possibly can, and we also base all of our browsers on the same core codebase, so you can guarantee that a Web site that works in one browser will work on others.

The main 3 standards we have in use today on the Web are:

1. HTML — used to structure content and provide context and meaning for it ("semantics")
2. CSS — used to style and layout the HTML content
3. JavaScript — used to provide dynamic behavior on Web sites

We tend to refer to these as 3 layers — content, presentation, and behavior. These layers should be kept as separate as possible, because it helps make the site accessible to users with disabilities, easier to maintain, more likely to work cross platform, and many other reasons. You should never make the user rely on JavaScript for the Web site to function, in case they have it turned off — with JavaScript (or CSS) turned off, the site should gracefully degrade to a more static page that still offers the basic functionality you were intending to provide via your site.

We won't go into the technology too much, because there is a whole load of tutorials and articles out there on basic and more advanced standards. ¹

For an example, consider the Web page you are looking at right now. The text and images are structured using HTML. A separate CSS stylesheet styles and positions the text and images — it tells them where to be on the page, what font to use for the text, how much padding there should be between each page element. There are lots of advantages to this approach, just some of which are listed below:

Because the information is all marked up as text (and images are given summary text to describe what they are showing) the page is accessible to blind and visually impaired people, who can zoom in on the text, or use a screenreader to read it out to them.

Because the style information is contained in a separate CSS file, you can reuse that file to style all the pages on this site. If you want to make a change — colouring all the text red for instance — you only have to update one file, not every file on the page.

The browsers we have available are many:

1. Opera Desktop
2. Opera Mobile
3. Opera Mini
4. Opera for other devices, such as games consoles and TV

Our desktop browser is a cutting edge, feature rich, standards compliant Web browser — it has full support for HTML 4.x and CSS 2.1, and even supports future standards such as parts of the CSS3 and HTML 5 specs. It has many great features too, such as tabbed browsing, Opera Link to synchronize your bookmarks between different devices, session restoring of all tabs and windows should the browser ever get closed unintentionally, and more.

Our Opera Mobile browser has the same standards support as the desktop version — it is available for many mobile devices (check out the full list), and offers the full Web on your mobile phone.

Opera Mini is another Mobile browser. Why have 2? Simple: Whereas Opera Mobile is a higher—spec browser that offers the full Web on a phone, and may not work on lower spec phones, Opera Mini is designed to work on pretty much any phone capable of running a JVM. It works through a proxy — when you request a Web page in the client, it sends that request to a server cluster, which finds your Web page, renders it using an ultra compact binary language (OBML) that reduces the size of the page by up to 90%, and then sends it to your phone to view.

The possibilities this opens up are enormous, especially in countries where desktop computers are not that common and phones are more widespread, either due to cost or cultural differences.

We're Opera — we really care about the open Web and open standards, and want to help open up the Web to everyone, regardless of (dis)ability, location, choice of user agent, technical knowledge, or any other of those variables that make us all unique Web users. And as well as just opening up the Web to everyone, we want to produce awesome browsers that make using and developing the Web a joy.

Some resources we recommend are as follows:

1. http://www.westciv.com/style_master/academy/css_tutorial/index.html
2. http://www.webstandards.org/learn/tutorials/
3. http://www.webstandards.org/learn/external/
4. http://icant.co.uk/
5. http://www.456bereastreet.com/
6. This article is written by Chris Mills, Developer Relationship Manager, Opera Software ASA.
7. Illustrations by Michael Vacík.

If you like this article, then digg it.