{"id":6354,"date":"2010-02-09T14:55:24","date_gmt":"2010-02-09T21:55:24","guid":{"rendered":"http:\/\/wapreview.com\/?p=6354"},"modified":"2010-02-12T21:42:38","modified_gmt":"2010-02-13T04:42:38","slug":"why-do-mobile-web-designers-ignore-opera-mini","status":"publish","type":"post","link":"https:\/\/wapreview.com\/6354\/","title":{"rendered":"Why Do Mobile Web Designers Ignore Opera Mini?"},"content":{"rendered":"

There’s a lot of buzz these days about how “touch web<\/em>” browsers, especially the iPhone’s Safari, but also the WebKit based browsers on Android, Palm WebOS\u00a0 and recent Symbian devices are\u00a0 revolutionizing mobile browsing.\u00a0 It’s certainly true, especially in the US and other developed countries, that advanced smartphones with powerful “full-web” browsers have opened a lot of eyes to the fact that using the Web on mobile phones is not only practical but fun and useful.<\/p>\n

But not everyone can afford an iPhone and the expensive data plan that it and other smartphones require.\u00a0 And the iPhone’s great browser is not so great on slow GPRS or even Edge networks.\u00a0 If you look to the developing world you won’t see many iPhones. In the US prepaid market you won’t see any at all.\u00a0 In places like Africa, India and the Philippines millions of people are using and enjoying the “touch web” and the full web on slow networks with basic feature phones or old smartphones.\u00a0 They are using Opera Mini, a great little Java ME browser that runs only almost any phone.\u00a0 Opera’s server assisted technology reduces page size and bandwidth by up to 90%,\u00a0 saving money of metered data plans and making even large pages load quickly on creaky networks.\u00a0 It’s not just the developing world either, Opera Mini is popular everywhere.\u00a0 It’s usage is growing rapidly with over 50 million people<\/a> using it every month! That’s bigger than\u00a0 the iPhone’s estimated installed base of about\u00a0 34 million devices and close to the combined iPhone plus iPod Touch total of 58 million<\/a>.<\/p>\n

With Opera Mini being as popular as the iPhone, you would think that it would be on every mobile web developer’s radar and\u00a0 that sites and web apps would be tested on and optimized for Mini as they are for the iPhone.\u00a0 Strangely the opposite seems to be true.\u00a0 While Opera Mini can render almost any site, many pages do not look their best in it.\u00a0 The biggest culprit is pages that are designed to fit screen width on the iPhone and other touch web browsers but overflow the window and require horizontal scrolling to see the whole page in Opera Mini.\u00a0 Here’s are a few examples:<\/p>\n

\"New \"PinStack<\/p>\n

\"Ars \"Barnes<\/p>\n

The culprit is often wide images, especially header banners. In many cases, the\u00a0 fix is as simple as one line of CSS: style=” img {max-width:100%;height:auto;}<\/em>” I don’t recommend hard-coding that into the page though as Mobile Internet Explorer and some other browsers will resize image width but not height resulting in skewed images.\u00a0 It’s easy enough to detect Opera Mini, every version sends “Opera Mini<\/em>” as part of the User-Agent header.<\/p>\n

Mobile web designer’s ignorance of Opera Mini goes beyond delivering less than perfect layout. In some cases, entire sites are totally broken in the browser. Two major mobile focused sites, Boy Genius Report<\/em> and IntoMobile <\/em>actually serve pages to Opera Mini users that are devoid of any content! Both sites detect Mini and send it a supposedly mobile optimized view of the site.\u00a0 The only problem is that the entire body of every single post on both sites is missing when viewed in Opera Mini. The image on the left shows how BGR looks in Firefox when using the User Agent Switcher extension to impersonate Opera Mini.\u00a0 On the right is BGR in the real Opera Mini.<\/p>\n

\"Boy \"Boy<\/p>\n

I’m not sure what is wrong with these pages that causes the post bodies to disappear.\u00a0 The html for the bodies is present in the source code but somehow it’s getting hidden, probably by some broken CSS or Javascript.\u00a0 The only way to view the posts on these sites is to go back to the front page and hit the button that lets you turn off the default mobile theme. The desktop version of BGR works fine in Opera Mini. <\/strong><\/p>\n

Update:<\/strong> a few days after this post was published IntoMobile fixed their site, which had been broken for months, and it now works perfectly with Opera Mini. <\/em><\/p>\n

It’s pretty obvious that the people who built these sites never once tried viewing them in Opera Mini!<\/p>\n

If you create web sites for mobile or desktop, please do 45 million Opera Mini users a favor and test your pages in it. Not only is it good for the users, but it ought to give your page views a shot in the arm as well. It’s not that hard, Mini runs on just about any old Java capable phone.\u00a0 And while I don’t usually recommend testing with mobile browser emulators, you can run the actual Opera Mini code in MicroEmulator on a PC<\/a>.\u00a0 Microemulator even has a re-sizable device skin that lets you quickly test with various screen sizes.<\/p>\n

Incidentally renowned web design consultant PPK (Peter-Paul Koch) published a piece yesterday titled “The iPhone obsession<\/a>” which is all about the folly of designing sites only for the iPhone.\u00a0 It should be required reading\u00a0 for everyone working in mobile.<\/p>\n","protected":false},"excerpt":{"rendered":"

There’s a lot of buzz these days about how “touch web” browsers, especially the iPhone’s Safari, but also the WebKit based browsers on Android, Palm WebOS\u00a0 and recent Symbian devices are\u00a0 revolutionizing mobile browsing.\u00a0 It’s certainly true, especially in the US and other developed countries, that advanced smartphones with powerful “full-web” browsers have opened a lot of eyes to the fact that using the Web on mobile phones is not only practical but fun and useful. But not everyone can … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":14585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[51],"tags":[1417,204,211,1428],"_links":{"self":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/6354"}],"collection":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/comments?post=6354"}],"version-history":[{"count":14,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/6354\/revisions"}],"predecessor-version":[{"id":6362,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/6354\/revisions\/6362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media\/14585"}],"wp:attachment":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media?parent=6354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/categories?post=6354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/tags?post=6354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}