Responsive Web Design in Africa - why it's time to adapt
106
Responsive Web Why it’s time to adapt Design in Africa
-
Upload
rian-van-der-merwe -
Category
Internet
-
view
21.192 -
download
1
Transcript of Responsive Web Design in Africa - why it's time to adapt
Responsive Web
Why it’s time to adapt
Design in Africa
The webisn’t what it used to be
This used to be the web
View gif
Source: A Response to ‘Responsive Web Design is Not the Future’
Source: The rise and fall of personal computing
In 1Q13 Worldwide PC shipments were down
compared to the same quarter in 2012
14%Source: PC Shipments Post the Steepest Decline Ever in a Single Quarter, According to IDC
But what about
Africa?
2002
2011
49m cell phones
500m cell phones
Source: Spotlight on Africa - Mobile Statistics & Facts 2012
smartphone
dumbphone
2011500m cell phones
Source: Mobile phones in Africa
That’s a problem,
right?
(ok, hold that thought)
Mobile contextisn’t what it used to be
Where are peopleusing
mobile devices?
93% 62% 39%
Source: The Myth of Mobile Context
at home at work poopin’
Source: Technogym
http://www.flickr.com/photos/37371208@N06/3629732897/
http://www.flickr.com/photos/wonderdawg777/662293238
Common
contextmyths
about
Adapted from Seven Deadly Mobile Myths
Mobile users are rushed & distracted
http://www.flickr.com/photos/misbehave/2352753067
Mobile is less
“If you click a link or type a URL, you should get the content you requested.”
— Brad FrostSource: Content Parity
Source: WTF Mobile Web
“But if there’s one thing I’ve learned in observing people on their mobile devices, it’s that they’ll do anything on
mobile if they have the need.”
— Luke WroblewskiSource: Mobile context revisited
Mobile is all about
apps
Source: A store in your pocket
See It's not a web app. It's an app you install from the web.
How do we
adapt?
http://finecitizens.com/defineResponsive/
The practice of developing digital
experiences that adapt to a user’s device, screen size, and orientation.
Responsive Web Design
++
Fluid grids
Flexible images
Media queries
why?
Google recommends it
See Recommendations for building smartphone-optimized websites
It’s device agnostic
One sitefor all
Good valuefor money
Betterexperience
162%Mobile conversions up
Source: You like apples?
383%Mobile transactions up
Source: You like apples?
371%Mobile revenue up
Source: You like apples?
(Non-mobile statswent up too, but by less than half the
amounts on mobile)
Source: You like apples?
14%Mobile conversions up
Source: Skinny Ties and responsive eCommerce
42%Mobile revenue up
Source: Skinny Ties and responsive eCommerce
But this isAfrica
It only works on smartphones
smartphone
dumbphone
2011500m cell phones
Source: Mobile phones in Africa
smartphone
dumbphone
(that’s 127m smart phones)
2015850m cell phones
Source: Mobile phones in Africa
10 million shipped93% YoY growth
Smartphoneshipment growth
Source: The Smartphone Snapshot Showdown
2011
“No feature phones for you!”
Safaricom in Kenya:
Source: Smartphones vs Feature phones
In SouthAfrica
29%
ActiveSmartphone
Users
(Vodacom)
80%
New devicesales —
smartphones
(Nashua Mobile)
20%
Data revenuegrowth
YoY
(Nashua Mobile)
RESSREsponsive web design + Server Side components
ProgressiveEnhancement
But also
understand yourtarget audience
because they may already be on smartphones
What to doGet to know RESS (And make Progressive Enhancement part of everything you do)
Define your target market(If you’re building something for high LSMs, chances are they’re already there)
Believe the data(Smartphone growth is real, and browser support is increasing)
It’s bad for site performance
The average web page is now larger
than 1MBSource: The growing epidemic of page bloat
1.7 MB238 requests
2.3 MB365 requests
2.8 MB120 requests
And what about the responsive ones?
1.2 MB130 requests
0.9 MB78 requests
“If your website is 15MB it’s not
HTML5, it’s stupid.”
Chris HeilmannSource: Performance as Design
Performanceis
Design
What to doFrom base experience up(Base stylesheet for all browsers, enhanced stylesheet for modern + IE)
Load assets as needed(Start with a link instead of display:none; start with as little JS as possible)
Be smart about images(Use tools like Adaptive Images; hold out hope for the picture and srcset elements)
It uses too much data, and data is expensive
2006
20100,2m mobile connections
15m mobile connections
2015250m mobile connectionsSource: African Mobile Observatory 2011
That’s compared to 15m fixed connections
2015250m mobile connections
Source: African Mobile Observatory 2011
By 2016, 58% of mobile data usage will be on smartphones or tablets
The Smartphone Snapshot Showdown
Data advancesFree international roaming
Load-based pricing
Bundled pricing
“The Middle East and Africa will have the strongest mobile data traffic growth of any region at 104%
CAGR by 2016.”— Jon HoehlerSource: The Smartphone Snapshot Showdown
Mobile internet isthe only internet
http://www.flickr.com/photos/70292973@N07/7192937172/
>50%
Mobile web users who never or infrequentlyuse the desktop web
Source: On Device Research
What to doDon’t use too much data(Remember, performance is design...)
Know the landscape(Find out what’s happening with mobile data in your region)
Be patient(Mobile data is getting cheaper by the month; access is growing)
It costs too much and takes too long
“Yes, Responsive Web Design costs more...
— Brad Frost
than doing nothing.”
Source: A Response to ‘Responsive Web Design is Not the Future’
https://twitter.com/skorks/status/321921772918300673
What to doEducate the team(Make sure everyone understands what it is and why it’s important)
Build in extra time(Collaboration and iteration becomes essential — that’s a good thing)
Use existing patterns(There’s no need to build everything from scratch)
There are too many UX limitations
What about separate mobile sites?
What you have is an Information Architecture problem, not a mobile site problem.
It’s a huge hassle. Eventually you’ll just forget to update m.whatever.
What to doRead a lot(New solutions to UX problems are emerging every week now)
Embrace Mobile First(Understand what it’s really about; focus on content and IA)
Experiment(This is an exciting time to try new things and contribute)
Go to a Device Lab(Test on as many devices as possible. There’s even one in Cape Town.)
In otherwords
Yes, there arechallenges!
Four Stages of Learning
Where weare
Where wewant to be
Source: The Responsive Dip
“The fact that we don't know how to do
something today doesn't mean we
shouldn't strive to do it tomorrow.”
— Ben CallahanSource: The Responsive Dip
Thepresent
Thefuture
The point whereRWD makes sense
We cannot waituntil we feel ready
Consider RWD inAfrica because
We cannot assume context(The days of out-of-breath, screen-starved, time-starved users are over)
The browsers are coming(Smartphone shipments are growing steadily)
It’s better for everyone(The user and business benefits are pretty huge)
Data access is increasing(Bandwidth and coverage are expanding, and costs are decreasing)
@RianVDM
Thanks!
A special thanks to @BelindaAnnLewis, @smn, @beep, @FireEnjn, @james3neal, @oafrica, @bnlv, and @pistoriusp who all helped me gather data for this talk.The most difficult part of preparing this talk was data-related. There’s a ton of data out there, but I had two problems.
First, it’s difficult to tell what’s reliable, particularly when it comes to Africa.
Second, deciding what to put into the presentation and what to leave out was not easy. Should I have put in current handset data, for example? Possibly. But there’s only so much data you can show before people fall asleep, so I focused on data that I believe accurately tell the story of where we’re headed.
Here are some additional data sources for those interested:http://www.oafrica.com/data/http://www.slideshare.net/jonhoehler/http://www.gsma.com/publicpolicy/public-policy-resources/mobile-observatory-serieshttp://www.youtube.com/watch?v=0bXjgx4J0C4
Looking for responsive patterns?http://bradfrost.github.io/this-is-responsive/patterns.htmlhttp://responsive-nav.comhttp://responsivenavigation.net/http://www.lukew.com/ff/entry.asp?1649
Some ideas for dealing with images:http://adaptive-images.com/http://www.resrc.it/https://github.com/adamdbradley/focal-pointhttp://css-tricks.com/examples/IconFont/
All icons are from The Noun Project:Africa designed by Monika CiapalaHome designed by Andrew FortnumLoch Ness Monster designed by Mike WirthThumbs Up designed by Nick HolroydTablet designed by Luis PradoGroup designed by Amar ChadgarMoney designed by Rob GillObesity designed by James StoneGlobe designed by Marco DavanzoInternet designed by Fernando VasconcelosForget designed by Andrew Forrester
Some of the tools I used in this presentation:iConvert IconsCamtasia:macReflector.app
http://caniuse.com/css-mediaqueries
A boring table that’s pretty important
Ok, now it’s really the end.
