The mobile web
Chris Mills, Opera Software ASA
- What is the mobile web?
- Mobile web limitations and advantages
- Different approaches to mobile optimization
Who am I, and what the hell do I do?
Introductions!
Say hello to the mobile web
What is the mobile web?
What is it?
- It’s the web, as viewed through moile devices…
- …not some other web
- It’s also the web viewed on the move...............
Large market...
Large market
It’s an enormous market
- Over 20 million Opera Mini users viewed 7.3bn pages in February 2009
- Increase of 290% on February 2008.
- Many countries view the web primarily on mobile
- There are a predicted 100m smartphones out there, but 1.1bn phones in total that have web access available.....more than there are desktop computers
The African Continent
Africa
- Last year saw 180% growth in usage
- Zambia and Swaziland using Opera Mini simulator on desktop, to access sites!
- South Africa and Egypt lead the way for mobile Web adoption, followed by Kenya and Nigeria.
South East Asia
South East Asia
- Conflicts, eg Singapore has high broadband penetration rate, and cambodia has very low (which can point the way to lots of mobile browsing)
- Heavy users often opt for the latest phone model that comes with 3G
- Indonesia and Malaysia lead mobile Web adoption, followed by Thailand and Brunei
Worldwide Trends
- Developed countries using Blackberrys and Sony Ericssons
- Nokia is dominant in developing countries
- Yet, everyone visiting the same sites (or same types of sites)
- Search is big, especially Google
- However, in certain markets, Google is second to other localized search engines
USA: Top Websites
Top websites
- Google
- Facebook
- MySpace
- Wikipedia
- Yahoo!
- NYTimes.com
- YouTube
- Gamejump.com
- Accuweather.com
- CNN.com
USA: Top Handsets
Top handsets
- BlackBerry 8330
- BlackBerry 8130
- Sony Ericsson W580i
- BlackBerry 9000
- Nokia N70
- BlackBerry 8320
- Nokia N73
- Samsung i617
- Samsung SPH-M800
- BlackBerry 8120
UK: Top Websites
Top websites
- Google
- Facebook
- Yahoo!
- BBC.co.uk
- Live.com
- Wikipedia
- Bebo
- Youtube
- Gamejump
- My.Opera.com
UK : Top Handsets
Top handsets
- Nokia 6300
- Nokia 6500s
- Samsung SGH-G600
- Nokia N95
- Samsung U600
- Sony Ericsson W810i
- Sony Ericsson K800i
- Nokia 6500
- Sony Ericsson W580i
- LG KE970
Russia: Top Websites
Top websites
- vkontakte.ru
- yandex.ru
- mail.ru
- odnoklassniki.ru
- rambler.ru
- google.com
- my.opera.com
- wikipedia.org
- wapos.ru
- seclub.org
Russia : Top Handsets
Top handsets
- Nokia 6300
- Nokia N73
- Nokia 6233
- Sony Ericsson K750i
- Nokia N70
- Sony Ericsson K790i
- Nokia 6120c
- Sony Ericsson W810i
- Nokia 3250
- Nokia 5300
China: Top Websites
Top websites
- Kong.net
- Baidu
- Google.cn
- Sina.com.cn
- xiaonei.com
- Qq.com
- hao123.com
- Sohu.com
- OperaChina.com
- 3g.cn
China: Top Handsets
Top handsets
- Nokia N70
- Nokia 3230
- Nokia N73
- Nokia 6300
- Nokia 2610
- Nokia 5300
- Nokia N72
- Nokia 7610
- Sony Ericsson k750c
- Nokia 6030
India: Top Websites
Top websites
- Google
- Orkut
- Yahoo!
- GMail
- GameJump
- Songs.pk
- Rediff
- Peperonity.com
- Wikipedia
- My.opera.com
India: Handsets
Top handsets
- Nokia N70
- Nokia N73
- Nokia 6233
- Nokia 6600
- Nokia 3110
- Nokia N72
- Nokia 6300
- Sony Ericsson k750i
- Sony Ericsson w700i
- Nokia 2626
One web
One web
- It’s not a separate www!
- There is only one web, and it’s worldwide
- People want the same sites on mobile as they do on desktop
Case study: Orkut in India
Orkut
- Orkut is huge in India
- A while ago Google changed Orkut so the cut down mobile version was served to Opera Mini by default, not the full version
- We were buried by complaints from Indian users, thinking we’d broken their favourite website!
Mobile standards support
The mobile playing field is not level
Uneven playing field
Mobile browsers differ a lot in capabilities:
- The full web — eg Opera Mobile, iPhone WebKit
- Constrained browsers — ie WAP or limited standards support, or proprietary markup
- Proxy-based browsers
- Other devices such as games consoles
Opera Mini: How it works
Opera Mini workflow
Opera Mini: How it works
Opera Mini workflow
Opera Mini: How it works
Opera Mini workflow
Opera Mini standards support
Mini standards support
Mini shares the good standards support of its desktop cousin
- (X)HTML
- CSS
- XSLT and XPath
- Most image formats, with the exception of animated GIFs
- JavaScript…mostly.
So you can use what you already know, in terms or web standards and design principles, such as IA, etc.
Mobile web limitations
Different screen sizes
Screen size
Screen size variance — how usable will your 1024 x 768 design look on a 240 x 320 screen?
Different screen sizes
Screen size
Some mobile browsers help out, with things such as zoom mode, but you should still plan
- Make your designs simple and fluid
- Or use mechanisms such as media queries and capability detection to tailor content
Limited/varying controls
Varying controls
Lack of memory and processing power
Memory and processing power
- Phones have limited memory
- And slower processors
- Phone browsers might choke
- Think carefully about number crunching
Fonts suck!
Limited fonts
- You thought you had it bad on desktop?
- It’s a lot worse on mobile
- One font, and perhaps an italic variant?
Limited colour palettes
Colour palettes
- Some mobiles have smaller colour palettes than desktop…
- Some are still monochrome!
- Test to see how your designs are affected
Mobile web benefits
Location-based services (LBS)
Location-based services
How to find yourself!
- IP addresses are unreliable/imprecise
- GPS becoming more commonplace
- Other methods available, like web services and triangulation
Location-based services (LBS)
Location-based services
Location-based services (LBS)
Location-based services
You can display and store the data in standard ways, such as the geo microformat:
<span class="geo">
<span class="latitude">0.000000</span>
<span class="longitude">0.000000</span>
</span>
The tel: protocol
the tel: protocol
<a href="tel:12345678">Call me at 12345678</a>
Other device-specific advantages
Other device-specific advantages
Cameras!
Being mobile…
Consider the user experience above all
It won’t be the same across all devices!
Test, test, test
Mobile web optimization
Making your site look good on mobile!
Mobile optimization
3 approaches to mobile support:
- Do nothing except follow web standards
- Create a completely separate mobile site
- Create one site, but optimize it depending on the device/browser looking at it
Just follow web standards
Just use standards?
- Most browsers should display it ok, and be able to get to your functionality…
- Graceful degradation and unobtrusiveness are key here
Completely separate mobile site
Be careful here
- Two separate sites is polar, and open to abuse
- If auto-redirecting people, give them a choice
- Tens of new sites come out every day. Are we gonna make a mobile version of all of them? Very counterproductive!
One site to rule them all…
Optimizing a single site
Optimizing your site how?
- Server-side detection, eg UA string or HTTP header querying
- Media types
- Media queries
Server-side detection issues
Server-side detection issues
Be careful with server-side detection:
- Open to abuse
- Do capability detection, not device detection
- Arguably more complicated than other approaches
Media types
Media types
Serving different styles to different device types — desktop, handheld, projectors, printed page
<link rel="stylesheet" media="screen" type="text/css"
href="main.css" />
<link rel="stylesheet" media="print" type="text/css"
href="print.css" />
<link rel="stylesheet" media="handheld" type="text/css"
href="mobile.css" />
But again it’s open to abuse
Media queries
Media queries
A technology allowing you to dynamically adjust web page layouts depending on viewing device, browser window width, etc.
LIVE DEMO TIME!
Example on Mobile device
Media query mobile view
Thanks for listening
Thanks
E-mail us with and thoughts, suggestions, jokes or insults — cmills@opera.com, brucel@opera.com
Or seek us out on Twitter — @chrisdavidmills, @brucel
Slides soon available at my blog — http://my.opera.com/chrismills, published under Creative commons. Feel free to reuse them