Skip navigation.

exploreopera

| Help

Sign up | Help

Slightly ajar

Opening the web, one site at a time.

Posts tagged with "mobile"

Momo Oslo, tonight

, ,

Just found out about this last minute (thanks Tor). Mobile Monday is having its first ever event in Oslo tonight. It's free to attend, so if you are in Oslo, and have any interest in the mobile space, then I encourage you to attend. Opera is right on the doorstep, so there is bound to be a posse of us in attendance, Opera Mini in hand. Our own Oleg Tukh is the Master of Sessions.

This will be my first Mobile Monday, so it should be interesting to attend. The name Momo reminds me of Liverpool's ex midfield general - Momo Sissoko.

The reality of "Mobile 2.0"

, ,

Over the last couple of conferences I've attended I've heard a whole lot about designing for iPhone and that it is the only browser worthy of being called Mobile 2.0 (whatever that is). A revolution is about to happen and it revolved around one shiny device (or make that recently two).

Of course, in reality that isn't strictly true. Opera Mini has been blazing its own trail for a long time, irrespective of iPhone. I'm stuck in D.C. Airport for a number of hours, so I thought I'd check on how we are crumbling below the might of the fruit company. Last month we had a commanding lead over that browser according to Net Applications. This month's figures are in, and with all the continued hype and the recent release of the iPod Touch, you'd have expected things to have swayed. Not so.

The iPhone has seen a respectable climb from 0.05% in August to 0.07% of the entire browser market in September. How did Opera Mini do in the same period? In August it had 0.27% of the entire browser market. September however eclipsed this with 0.39%. This growth alone is bigger than the rest of the mobile browser share market combined. Unless I'm delusional as I've not slept for a number of days.

What does this mean? Well don't believe the hype. There is no before iPhone and after iPhone. It is more before Mini and after Mini. Mini is destroying the competition. It's no surprise when two of biggest markets for mobile web access are India and China, and it is unlikely the iPhone/iPod will ever reach the masses in these territories, not to mention the emerging markets in Africa, Asia and South America. Many of these countries are places where the only way they have to access the web is via a mobile. There are also countries where home grown handset brands are very strong, particularly in the Far East. The mobile market isn't simply a one size fits all market.

It also means I'm failing to do my job. Why? Because I'm finding it very difficult to get designers to have any interest in Mini, in light of other browsers, while away from the development community it ca be seen it is catching on like wildfire. There is a huge market out there, that people are failing to look at or take into account. Maybe it is just because we don't have The Shiny. If Mini continues on its current course, it'll be impossible to ignore.

Opera Mini 4 Beta 2 and Mobile Web Design

, , , ...

All systems have been go, getting ready for the beta/alpha releases of our two flagship products. While Kestrel will spread its wings on Tuesday, I got a birthday present today with the launch of the second beta (if we were Web 2.0 that would be Gamma) release of Opera Mini 4. Many bugs have been fixed, including better integration with the Blackberry for all you crack(berry) addicts. As Mini 4 was a full re-write, many popular features were left out of the first beta. These are starting to return with today's release. Secure connections are back so it is safe to use your bank again. Content folding, and search engine customisation are also back. There are also more view options available, with landscape and full screen mode.

If you want to check out how much the standards support has improved since Mini 3 then download the beta then check out Cameron Moll's Markup test pages If you don't have a phone that supports Mini (that'll mostly be you Verizon customers) then you can check it out on the Mini 4 beta simulator. Note that ordered lists (ol) are supported, unlike what the test suggests. This seems to be a obscure bug with that particular page. If you are interested in designing for mobile then the first part in a series of guides about Opera Mini and mobile web design will be published by yours truly very soon on Dev Opera It will cover Opera Mini basics, how it differs from the desktop browser, and an introduction to handheld stylesheets and media queries. A more in-depth look into the specifications, particularly the JavaScript support, and an article focused on handheld and media queries will come at a later date.

I can also highly recommend Cameron Moll's hotly anticipated Mobile Web Design book that has just been released. This is the one book you should buy above others if you are interested in this field. It is well worth the $19 cover price. If you need to justify why you should create a mobile web strategy then this book should convince you that it is worthwhile. It is also one of the few texts on the topic of mobile recently, that doesn't preach designing for one device and one browsers. It is good to see the standards movement doesn't all have blinkers on.

Opera Mini 4 — The Web to go

, ,

Opera Mini 4 beta has just been released. The main new features include a desktop-like overview mode similar to the Internet Channel for Nintendo Wii, a more powerful upgraded browser engine from the Core-2 Kestrel family and full support for Handheld stylesheets and CSS3 Media Queries (for the media types applicable for phones).

The new desktop-like view reformats the page to fit the screen width, and uses a virtual mouse pointer, and overview thumbnail that shows where the page will zoom into. The user can choose low or high quality images to either save bandwidth on slow costly connections or have a higher quality experience when using WiFi or unlimited data plans. The existing small screen rendering mode is also still available for users that prefer this mode and want to avoid horizontal scrolling and zooming to read the text. This option is currently called Fit-to-width.

The improved standards support and full respect for handheld stylesheets and media queries make Opera Mini 4 much better for web developers. Any layout can be fully customisable using these web standards technologies, to optimise for the mobile experience. Previously, Opera Mini 3 used to apply small screen rendering over the top of handheld stylesheets. A layout designed using handheld styelsheets and/or media queries should now display the same on both Opera Mini and Opera Mobile. We hope other browsers will follow suit in supporting handheld stylesheets, but media queries should already be available on iPhone and Nokia S60 browsers.

As can be seen on the features page, Opera Mini is a fast browser that compresses the pages to save bandwidth, likely beating out the much more hyped browser from another company that will be launched soon. Mini 4 shows the longs experience Opera has in building browsers for mobile and resource constraint devices, and the power of the Core-2 engine. I personally think the guys and girls in Sweden did a great job with this browser so far. By the time of the full release it should be even better. One issue to look out for in this beta is that SSL security is not switched on, so don't test this with secure pages like your bank. This feature will be switched back on in the final release.

Media Queries and Handheld stylesheets

, , , ...

When designing for mobile, one has a few options. These include doing nothing and relying on how the mobile browser reformats the page (using either small screen rendering, desktop view or both depending on the browser), creating a new mobile friendly site, or restyling the page using handheld stylesheets or Media Queries. I'll look at the latter two here.

As part of the preparations for the Opera Mini 4 launch this Tuesday, I've been developing our developer documentation. This includes examples of using both handheld stylesheets and CSS3 Media Queries. The first example uses Media Queries to reformat the page when the screen is 480px wide or smaller. The code could be optimised more, and the design is simple so small screen rendering on its own would probably do a good job, but it is an example of what can be done. On a more complex page with images the results would be more worthwhile. Both screen and handheld were specified as the S60 browser from Nokia and the Safari iPhone browsers both ignore handheld stylesheets, so the screen media type had to be specified for those browsers. I choose 480px for the width as that is the resolution of the iPhone when in landscape mode, but any width could have been chosen. max-device-width doesn't have to be used, I could have chosen max-width, or any other number of options. I don't have a S60 or iPhone browser to test, but I suspect they will both render similarly to Safari 3, minus the font differences. Opera Kestrel and above have improved Media Query support so that the changes kick in without refreshing the page. This means in the previous example it will apply the Media Query content as soon as the browser view port is 320 pixels wide. As you could imagine, once more browsers support this, it would be very useful for elastic layouts to stop content overlapping when the browser window gets too small. The contents could be set to clear instead for example.

The second example is based on the first and and uses handheld stylesheets. It sets the stylesheet in the above example to only apply to the screen media type and creates a new stylesheet with the handheld media type. This means that browsers that support handheld correctly will only apply the second stylesheet. This stylesheet then includes all the styles needed to create the design.

As can be seen in these two fairly simple examples, it is possible to optimise for mobile without too much difficulty, or learning many new techniques, as long as your mark-up is clean and without presentational aspects, such as tables for layout. Unfortunately, handheld support is not where it could be, but Media Queries are well supported in modern full HTML mobile browsers. If your web sites page will benefit from it, I'd recommend you give Media Queries a try. I'd recommend specifying in the stylesheet that images and any content have a max-width of under 100% so that horizontal scrolling is not needed.

MOTORIZR Z8 packs UIQ punch

, , ,

There is a lot of talk about the new MOTORIZR Z8 phone, recently unveiled in Barcelona. This is not a surprise with its RAZR-esque looks and unique kick-flip mechanism. One point that has been overlooked however is as it is a Symbian phone (I think a first for the four letter series of phones), and more specifically UIQ on top of Symbian, it means the phone and OS have more power and thus includes the full Opera Mobile as the default browser. Although this isn't the first of the RAZR family of offshoots to support Opera mobile -- The MOTORAZR MAXX does so via a custom port to Motorola's own P2K OS I believe -- It is significant as a full smartphone OS has been crammed into a premium fashion phone, and an OS where Opera is the default browser for the platform. The phone was developed by the former Sendo team, so I guess this is the super secret project no one could talk about and many people working on the project hadn't even seen. It looks well worth the wait.

As You may remember, Opera Mobile was also included recently on three Sony Ericsson UIQ phones. I think the M600 and W950 are particularly stylish and slim phones. Both share the same form factor and beat out the Blackberries and Treos of this world for size, style and portability (The Perl excluded). UIQ and Opera are certainly starting to get a lot of hot stylish phones now. This should help the acceleration of standards based, full (X)HTML browsers in the hands of potential users of the mobile web.

Even excluding all the phones Opera Mini can be installed on after shipping or by service providers (Opera has big deals with T-Mobile and Telefonica), Opera has been included on many of the most stylish and desirable phones coming out recently, iPhone excluded. I can't wait to see what Samsung come out with. Even Nokia got in on the act with the 6300. I've not bee a big fan of Nokia phones recently, as although they have been powerful, they've often been big and clunky. I prefer smaller phones, and the 6300 is the first slim phone I've seen from Nokia in long time, but running Opera Mini it has no compromises on the web front.

It is not only Mobiles of course where we are getting all the desirable gadgets. Apart from the iPod and iPhone, I think most of the hottest products are Opera powered, at least those that are web capable. We have the Wii and DS of course, and also the Archos 604Wifi (very sleek with it's brushed metal casing), Sony Mylo and the Nokia N800 Internet Tablet. The web to go has never been so stylish or convenient. The iPod/iPhone is the only devices I can think of where Opera is unable to run. The PSP would be kind of nice, but the DS is well outselling it and it's touch screen is much more suitable for web surfing than the d-pad of the PSP.

Bai – bai Mike

, , ,

Open the Web has changed a great deal since I started as the first full-time Web Opener just over a year ago. It is with great sadness that I announce that Michael™ Smith, our Web Opener for Japan, is leaving the Open the Web fold. Mike was our Mobile specialist at OtW, and has a great passion and understanding of the mobile web and the issues that we face in that domain.

He will not be moving too far though, as his knowledge in this area has led him to join the W3C to work on their Mobile Web Initiative. You can follow his work there at his new blog. While we are sad to see him go, we are sure to be working with him in the future as the MWI and Opera's goals are well aligned. He may even be able to convince .mobi and the like to remove the requirement of using XHTML Basic, instead of having the option to use regular XHTML, which breaks device independence by requiring a special version of a site to be developed. With the recent announcement of the Safari mobile browser plus the S60 WebKit browser (default on S60 phones), Opera Mobile (default on UIQ phones as well as wide reaching deals with the likes of T-Mobile, Motorola and Samsung), and Opera Mini (almost everything else), real HTML browsers are now widespread and pushing legacy WAP and WAP2 browsers out of the playing field. Yes, Safari isn't the first useable HTML browser, far from it. There is now no excuse for having to require dumbed down specs instead of the full standard. All the major platforms have browsers that can cope with the full web. Even none smartphones with Opera Mini. Now is a great time to kick the mobile web into a whole new gear, and Mike is a great person to help this push. We wish him all the best on his new crusade.

Of course, Mike leaving has left a gap in the Open the Web team, so we are looking to hire a new Open the Web specialist, who has a great desire to push web standards deployment forward, improve site compatibility, and is fluent in both Japanese and the Japanese web development scene. Any knowledge of web development beyond the desktop is a big advantage.

Flickr on the move - Mobile web delivered?

, , ,

Screenshot of Flickr in Opera Mini

The mobile Flickr rendered in Mini

The mobile version of Flickr has recently been updated, along with a few new desktop features. While Opera (including myself) promote One Web, where one site is used for all devices, and customised with the likes of handheld stylesheets and/or media queries, this doesn't preclude the use of mobile specific web sites where it makes sense. One thing we think is important is user choice, and that the user can access the original site if they wish.

The new Flickr is the perfect example of a situation where a mobile version makes sense, and a great example of this delivered almost faultlessly. The advantage a mobile version of the site gives them is that Flickr is a fairly complex web application, with a lot of options. With a mobile optimised site, they can cut the fat and expose only the options that are most likely used on the move, with the minimal of clicks to get the user there. If the user wants more control, the link to the regular Flickr is upfront on the first page visited. An example of this ease of use can be hi-lighted by using the new Opera Mini 3 Beta. Four clicks of the down arrow (or one click on the link if you have a touch screen) gets you to the photo upload, and if you have a camera phone, unlike me, one click on the upload button allows you to take a photo straight from the browser. Bang, your new photo is ready to be included in your Flickr photo stream. There can't be any faster way to upload photos on Flickr than the combination of this new easy to use site, and Mini's speed and advanced new features. The mobile web may have just found its first killer app. My only qualm would be that, in my opinion, the photo upload feature should be higher on the menu list than fourth place.

While not a fan of dotMobi, I think this is one example where it would be useful, as flickr.mobi would be much easier to guess than m.flickr.com. One basically doesn't know Flickr mobile exists unless one has read about it somewhere first.

If your site isn't an advanced application, with tons of links and even more JavaScript, in general the best approach is still to define a handheld stylesheet, and make sure to hide what you don't need with display:none; (Opera doesn't load this content, so bandwidth isn't wasted), otherwise it may be worth going down the route Flickr has. Just make sure you let the user go to the regular desktop page if you do.

As well as this site, Yahoo! created the FIFA World Cup Mobile site, which is another brilliant example of a well crafted mobile web site. They maybe one of the very few companies that really get the mobile web at present. Does anyone know of any other best of breed mobile sites, whether mobile specific or through use of handheld stylesheets? Not to blown our own horn, but I think Opera.com and my.opera.com are two other great examples -- even if they don't qualify for a dotMobi domain because of the insane requirement of needing to use XHTML mobile profile. Why? Mobile browsers are perfectly capable of displaying full (X)HTML, what's wrong with XHTML Strict? That one requirement breaks the who concept of "One Web" and device independence.