Server-Side Rendering and the World of Opera Mini 5

written by aext on August 30, 2010 in Web Design and Web Development with 4 comments

According to Pew Internet Research, one-third of Americans use a cell phone or smartphone to browse the Internet. With this many people discovering the convenience of mobile browsing, it is no wonder major browsers are creating mobile versions.

Most people have a preferred browser they use, whether it is Internet Explorer, Firefox, Opera, Safari, Chrome etc. While others simply use the default browser that their computer comes with. The same seems to be coming true for mobile. Most major browsers now have a mobile version, and of course most smartphones comes with a standard browser, just like computers do.

Opera mini 5 is available on Java phones, Windows Mobile, Android, S60, Blackberry and the iPhone.

So why all the hype about Opera Mini 5? One of the reasons is because of the server side rendering Opera offers. Basically server side rendering is when Opera processes the information sent on the browser through their own servers and then shoot the information back onto the browser page. The cool thing about Opera Mini is that Opera Mini’s servers change the information so it is faster for phones to navigate through. Below is a graphic to help you visualize the process.

This technology is different than Opera mobile, which is more like a computer based browser. Opera Mobile is a full Internet browser for mobile devices. The full web-rendering engine – Opera Presto – is run on the phone using the phones’ hardware to download and display webpages.”

What it Means for Developers

One thing developers should take note is that javascript has limited support for Opera mini. Before the page is sent to the mobile device, its onLoad events are fired and all scripts are allowed a maximum of two seconds to execute. The setInterval and setTimeout functions are disabled, so scripts designed to wait a certain amount of time before executing will not execute at all.”

Take into consideration that Opera Mini uses the same layout engine that is included with Opera 9.5—meaning it supports most web standards. With that said, since it reformats web pages it won’t pass the Acid2 standards compliance test.

When developing or designing for mobile in general, not just for the Opera browser, you should be aware of the smaller screen visitors are viewing on. Opera Mini will default to a Small-Screen Rendering (SSR) mode—for any device that has screens that are 128 pixels wide or smaller. SSR reformats the page into one vertical column, this way the user only needs to scroll up and down, not horizontally too.

The user agent string for Opera Mini 5 is below. Some tips Opera gives developers about the string, “It is important to bear in mind that the user agent string’s build or Presto number may be changed in the future, so sniffing for an exact match to any particular user agent string doesn’t always yield the desired results. The Opera Mini/5.x portion of the string is probably the most relevant bit, where x is the minor version number. Also note that in general, Opera can be identified by using JavaScript to test for the window.opera object.”

Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.18635/1030; U; en) Presto/2.4.15

If you are dying to use those CSS3 techniques you have been reading about—mobile gives you that option. Because CSS3 allows you to do media queries, you can set up the code to let the browser figure out what size screen it will be loading to. Because Opera Mini is available on a myriad of phones, you can’t guarantee what size screen it will be going on. If you want to have the browser display for 480 pixel screen you would use the following code:

@media screen and (max-device-width: 480px) {
    //insert CSS rules here

Opera Mini 5 and the iPhone

Until April of this year Safari has been the only browser supported on the iPhone. We all know how Steve Jobs can be on certain subjects, and he is pretty particular what Apple approves in the App Store. With that said, after 20 days of deliberation, Opera Mini was given permission to be available in the App Store.

Opera now has the bragging rights to say they are the first alternative browser Apple has allowed on their mobile devices. The secret to their success was due to their server side rendering—allowing Apple “to deem it to not be a Web browser. As Daring Fireball’s John Gruber pointed out, though, Opera Mini doesn’t actually render Web pages. That’s done on Opera’s servers; rather, Opera Mini renders a boiled-down, compressed markup language called OBML, making Opera Mini in some technical ways closer to a PDF reader than to a Web browser,” reports PC Magazine. Because of this, some websites do not read as well in the Opera browser. Below is an example of the same website loaded in Opera Mini 5 (on the left) and Safari (right).

As you can see, because of the server side rendering, you aren’t able to zoom as well in Opera as in Safari. In Opera you have a full in zoom or zoom out feature, where you have a little more “wiggle” room in Safari.

Save Money

Opera also boasts that using Opera Mini 5 can also save you money on your data package. Server side rendering is the reason for this. “Opera Mini uses only a tenth of the bandwidth of other browsers, compressing Web pages by up to 90%. On Opera Mobile, turning on Opera Turbo compresses data up to 80% or leave Opera Turbo off to get full Web site data, as you would on a PC.”

All in all Opera Mini 5 seems to be a great choice. Like most things there are good and bad points, but overall the server side rendering allows for faster load times and a great user experience. Let us know down below your thoughts on the browser and any good or bad points you have experienced.