8. big screen
family photo
happy :-)
tab tab “keyboard”
click click “mouse”
Designing a desktop site
http://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/
Wednesday, January 19, 2011
9. mobile developer :-(
piece of crap (?).....
Designing a mobile site http://www.flickr.com/photos/hendry/763193147/sizes/l/
Wednesday, January 19, 2011
10. different screen size != iphone
small screen
hard to debug
memory issue
the real mobile phone http://www.flickr.com/photos/osde-info/2270663393/sizes/l/
Wednesday, January 19, 2011
11. 3 approaches
to create a mobile site
Wednesday, January 19, 2011
20. 3. one site to rule
them all
Wednesday, January 19, 2011
21. 3. one site to rule
them all (including ipad)
Wednesday, January 19, 2011
22. 3. one site to rule
them all (including ipad)
viewport media queries
Wednesday, January 19, 2011
23. media queries
@media all and (max-width: 480px) {
// insert CSS rules here
}
@media all and (min-width: 480px) and (max-width:
800px) {
// insert CSS rules here
}
Wednesday, January 19, 2011
24. viewport
visual viewport actual viewport
http://www.quirksmode.org/mobile/viewports2.html
Wednesday, January 19, 2011
25. viewport
<meta name=”viewport” content=”width=device-
width”>
Wednesday, January 19, 2011
26. viewport
http://www.quirksmode.org/mobile/viewports2.html
Wednesday, January 19, 2011
27. media queries viewport
<meta name=”viewport” content=”width=device-
width”>
@media screen and (max-width: 360px){
// CSS style here
}
max/min-width relates directly to the viewport width
value
Wednesday, January 19, 2011
28. 1. do nothing
2. separate site
3. one site to rule them all
Wednesday, January 19, 2011
29. Mobile Web is growing.....
Wednesday, January 19, 2011
30. iphone
ipad
Mobile Web is growing.....
feature phones
android
Wednesday, January 19, 2011
31. iphone
who uses what ?
http://www.flickr.com/photos/goincase/4973847949/
Wednesday, January 19, 2011
32. iphone
5% users in EU5 countries
http://www.flickr.com/photos/goincase/4973847949/
Wednesday, January 19, 2011
33. the rest use something else...
http://www.flickr.com/photos/wonderlane/276890512/sizes/o/in/photostream/
Wednesday, January 19, 2011
34. hard to debug
debugging the mobile phone
Wednesday, January 19, 2011
39. Page-view growth since November 2009: 404 %
Unique-user growth since November 2009: 315 %
Data transfer growth since November 2009: 370 %
Page views per user: 438
8th country for Opera Mini
http://www.flickr.com/photos/kiwanja/3169448569/
Wednesday, January 19, 2011
40. What sites do you browse on mobile?
Wednesday, January 19, 2011
41. Top 10 sites in Nigeria (unique users)
1.facebook.com
2.google.com
3.yahoo.com
4.bbc.co.uk
5.goal.com
6.wikipedia.org
7.my.opera.com
8.youtube.com
9.getjar.com
10.cnnmobile.com
Wednesday, January 19, 2011
43. Top handsets for November 2010
1.Nokia 5130 XpressMusic
2.Nokia 2700c
3.Nokia 3110c
4.Nokia 2330c
5.Nokia 2690
6.Nokia 2600c
7.Nokia N70
8.Nokia N72
9.Nokia 6300
10.Nokia E63
Wednesday, January 19, 2011
44. Interesting facts
In Nigeria, 26.6% of page views are search related
http://www.flickr.com/photos/carbonnyc/58021795/
Wednesday, January 19, 2011
45. Nigerians spend about 150 NGN or 0,99 USD,
saves the most (together with U.S.) using Opera
Mini.
how much do you save?
http://www.flickr.com/photos/kiwanja/3169449999/
Wednesday, January 19, 2011
47. Q&A
twitter:zibin
slideshare.net/zibin
Wednesday, January 19, 2011
48. Credits
My colleague Andreas Bovens
http://www.slideshare.net/andreasbovens/mobile-web-development-techniques-and-operas-developer-
tools
A dude Bryan Rieger
http://www.slideshare.net/bryanrieger/going-mobile-2010-by-yiibu
Image credits are listed in every image
Wednesday, January 19, 2011
