nigeria & designing for the mobile web
DESCRIPTION
TRANSCRIPT
![Page 1: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/1.jpg)
NigeriaState of the Mobile Web
Mobile Web design approaches
http://www.flickr.com/photos/niyyie/2211858493/
Wednesday, January 19, 2011
![Page 2: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/2.jpg)
hi !twitter:zibin
slideshare.net/zibin
Wednesday, January 19, 2011
![Page 3: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/3.jpg)
Mobile Web is growing.....
Wednesday, January 19, 2011
![Page 4: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/4.jpg)
6.8 billion people
Wednesday, January 19, 2011
![Page 5: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/5.jpg)
1.8 billion Internet Users
Wednesday, January 19, 2011
![Page 6: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/6.jpg)
3.4 billion people with mobile
Wednesday, January 19, 2011
![Page 7: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/7.jpg)
Approaches to design
Wednesday, January 19, 2011
![Page 8: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/8.jpg)
big screen
click click “mouse”
tab tab “keyboard”
family photo
happy :-)
Designing a desktop sitehttp://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/
Wednesday, January 19, 2011
![Page 9: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/9.jpg)
mobile developer :-(
Designing a mobile site
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/
Wednesday, January 19, 2011
![Page 10: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/10.jpg)
the real mobile phone
small screen
different screen size
hard to debug
!= iphone
http://www.flickr.com/photos/osde-info/2270663393/sizes/l/
memory issue
Wednesday, January 19, 2011
![Page 11: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/11.jpg)
3 approachesto create a mobile site
Wednesday, January 19, 2011
![Page 12: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/12.jpg)
1. Do Nothing
Wednesday, January 19, 2011
![Page 13: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/13.jpg)
1. Do Nothing(at least not too much)
Wednesday, January 19, 2011
![Page 14: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/14.jpg)
1. Do Nothing(at least not too much)
liquid layout
semi liquid layout
Wednesday, January 19, 2011
![Page 15: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/15.jpg)
2. separate mobile site
Wednesday, January 19, 2011
![Page 16: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/16.jpg)
Wednesday, January 19, 2011
![Page 17: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/17.jpg)
browser sniffing....
Wednesday, January 19, 2011
![Page 18: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/18.jpg)
Wednesday, January 19, 2011
![Page 19: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/19.jpg)
selection & cookie
Wednesday, January 19, 2011
![Page 20: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/20.jpg)
3. one site to rule them all
Wednesday, January 19, 2011
![Page 21: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/21.jpg)
3. one site to rule them all (including ipad)
Wednesday, January 19, 2011
![Page 22: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/22.jpg)
3. one site to rule them all
viewport media queries
(including ipad)
Wednesday, January 19, 2011
![Page 23: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/23.jpg)
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
![Page 24: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/24.jpg)
viewport
visual viewport actual viewport
http://www.quirksmode.org/mobile/viewports2.html
Wednesday, January 19, 2011
![Page 25: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/25.jpg)
viewport
<meta name=”viewport” content=”width=device-width”>
Wednesday, January 19, 2011
![Page 26: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/26.jpg)
viewport
http://www.quirksmode.org/mobile/viewports2.html
Wednesday, January 19, 2011
![Page 27: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/27.jpg)
viewport
<meta name=”viewport” content=”width=device-width”>
@media screen and (max-width: 360px){// CSS style here
}
media queries
max/min-width relates directly to the viewport width value
Wednesday, January 19, 2011
![Page 28: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/28.jpg)
1. do nothing2. separate site3. one site to rule them all
Wednesday, January 19, 2011
![Page 29: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/29.jpg)
Mobile Web is growing.....
Wednesday, January 19, 2011
![Page 30: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/30.jpg)
Mobile Web is growing.....
iphone
android
ipad
feature phones
Wednesday, January 19, 2011
![Page 31: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/31.jpg)
iphone
who uses what ?http://www.flickr.com/photos/goincase/4973847949/
Wednesday, January 19, 2011
![Page 32: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/32.jpg)
iphone
5% users in EU5 countrieshttp://www.flickr.com/photos/goincase/4973847949/
Wednesday, January 19, 2011
![Page 33: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/33.jpg)
for Mobile Webhttp://www.flickr.com/photos/wonderlane/276890512/sizes/o/in/photostream/
the rest use something else...
Wednesday, January 19, 2011
![Page 34: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/34.jpg)
debugging the mobile phone
hard to debug
Wednesday, January 19, 2011
![Page 35: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/35.jpg)
Mobile Emulator
Wednesday, January 19, 2011
![Page 36: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/36.jpg)
Remote Debuggingdemo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick
Wednesday, January 19, 2011
![Page 37: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/37.jpg)
NigeriaState of the Mobile Web
http://www.flickr.com/photos/niyyie/2211858493/
Wednesday, January 19, 2011
![Page 38: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/38.jpg)
Wednesday, January 19, 2011
![Page 39: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/39.jpg)
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 Minihttp://www.flickr.com/photos/kiwanja/3169448569/
Wednesday, January 19, 2011
![Page 40: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/40.jpg)
What sites do you browse on mobile?
Wednesday, January 19, 2011
![Page 41: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/41.jpg)
Top 10 sites in Nigeria (unique users)1.facebook.com2.google.com3.yahoo.com4.bbc.co.uk5.goal.com6.wikipedia.org7.my.opera.com8.youtube.com9.getjar.com10.cnnmobile.com
Wednesday, January 19, 2011
![Page 42: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/42.jpg)
What phone do you use?
Wednesday, January 19, 2011
![Page 43: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/43.jpg)
Top handsets for November 20101.Nokia 5130 XpressMusic2.Nokia 2700c3.Nokia 3110c4.Nokia 2330c5.Nokia 26906.Nokia 2600c7.Nokia N708.Nokia N729.Nokia 630010.Nokia E63
Wednesday, January 19, 2011
![Page 44: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/44.jpg)
Interesting facts
In Nigeria, 26.6% of page views are search relatedhttp://www.flickr.com/photos/carbonnyc/58021795/
Wednesday, January 19, 2011
![Page 45: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/45.jpg)
how much do you save?
Nigerians spend about 150 NGN or 0,99 USD, saves the most (together with U.S.) using Opera Mini.
http://www.flickr.com/photos/kiwanja/3169449999/
Wednesday, January 19, 2011
![Page 46: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/46.jpg)
Future is now
Wednesday, January 19, 2011
![Page 47: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/47.jpg)
Q&Atwitter:zibin
slideshare.net/zibin
Wednesday, January 19, 2011
![Page 48: Nigeria & Designing for the Mobile Web](https://reader033.vdocuments.site/reader033/viewer/2022051816/545c7af6b1af9f280a8b4796/html5/thumbnails/48.jpg)
CreditsMy colleague Andreas Bovenshttp://www.slideshare.net/andreasbovens/mobile-web-development-techniques-and-operas-developer-tools
A dude Bryan Riegerhttp://www.slideshare.net/bryanrieger/going-mobile-2010-by-yiibu
Image credits are listed in every image
Wednesday, January 19, 2011