nigeria & designing for the mobile web
Post on 07-Nov-2014
978 Views
Preview:
DESCRIPTION
TRANSCRIPT
NigeriaState of the Mobile Web
Mobile Web design approaches
http://www.flickr.com/photos/niyyie/2211858493/
Wednesday, January 19, 2011
hi !twitter:zibin
slideshare.net/zibin
Wednesday, January 19, 2011
Mobile Web is growing.....
Wednesday, January 19, 2011
6.8 billion people
Wednesday, January 19, 2011
1.8 billion Internet Users
Wednesday, January 19, 2011
3.4 billion people with mobile
Wednesday, January 19, 2011
Approaches to design
Wednesday, January 19, 2011
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
mobile developer :-(
Designing a mobile site
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/
Wednesday, January 19, 2011
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
3 approachesto create a mobile site
Wednesday, January 19, 2011
1. Do Nothing
Wednesday, January 19, 2011
1. Do Nothing(at least not too much)
Wednesday, January 19, 2011
1. Do Nothing(at least not too much)
liquid layout
semi liquid layout
Wednesday, January 19, 2011
2. separate mobile site
Wednesday, January 19, 2011
Wednesday, January 19, 2011
browser sniffing....
Wednesday, January 19, 2011
Wednesday, January 19, 2011
selection & cookie
Wednesday, January 19, 2011
3. one site to rule them all
Wednesday, January 19, 2011
3. one site to rule them all (including ipad)
Wednesday, January 19, 2011
3. one site to rule them all
viewport media queries
(including ipad)
Wednesday, January 19, 2011
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
viewport
visual viewport actual viewport
http://www.quirksmode.org/mobile/viewports2.html
Wednesday, January 19, 2011
viewport
<meta name=”viewport” content=”width=device-width”>
Wednesday, January 19, 2011
viewport
http://www.quirksmode.org/mobile/viewports2.html
Wednesday, January 19, 2011
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
1. do nothing2. separate site3. one site to rule them all
Wednesday, January 19, 2011
Mobile Web is growing.....
Wednesday, January 19, 2011
Mobile Web is growing.....
iphone
android
ipad
feature phones
Wednesday, January 19, 2011
iphone
who uses what ?http://www.flickr.com/photos/goincase/4973847949/
Wednesday, January 19, 2011
iphone
5% users in EU5 countrieshttp://www.flickr.com/photos/goincase/4973847949/
Wednesday, January 19, 2011
for Mobile Webhttp://www.flickr.com/photos/wonderlane/276890512/sizes/o/in/photostream/
the rest use something else...
Wednesday, January 19, 2011
debugging the mobile phone
hard to debug
Wednesday, January 19, 2011
Mobile Emulator
Wednesday, January 19, 2011
Remote Debuggingdemo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick
Wednesday, January 19, 2011
NigeriaState of the Mobile Web
http://www.flickr.com/photos/niyyie/2211858493/
Wednesday, January 19, 2011
Wednesday, January 19, 2011
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
What sites do you browse on mobile?
Wednesday, January 19, 2011
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
What phone do you use?
Wednesday, January 19, 2011
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
Interesting facts
In Nigeria, 26.6% of page views are search relatedhttp://www.flickr.com/photos/carbonnyc/58021795/
Wednesday, January 19, 2011
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
Future is now
Wednesday, January 19, 2011
Q&Atwitter:zibin
slideshare.net/zibin
Wednesday, January 19, 2011
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
top related