Successfully reported this slideshow.

Responsive Web Design in Africa - why it's time to adapt

22,160 views

Published on

As responsive web design (RWD) continues to become the new standard for web development worldwide, there is still a lot of skepticism about its relevance in the African context. Since the mobile phone and data access landscape is so different here, many feel that it’s too early for us to spend time and money on designing websites that adapt to whatever device and viewport size might get thrown at it.

In this talk I discuss how the web in general, and mobile context specifically, have changed over the past few years, and how responsive web design is the best approach to adapt to these changes. I’ll then address the major concerns about responsive design in the African context, point out the fallacies, and argue that overcoming the legitimate challenges are absolutely worth our time and effort.

This might be Africa, but responsive design is every bit as relevant here as it is anywhere else in the world.

Published in: Internet

Responsive Web Design in Africa - why it's time to adapt

  1. 1. Responsive Web Design in Africa Why it’s time to adapt
  2. 2. The web isn’t what it used to be
  3. 3. This used to be the web View gif
  4. 4. Source: A Response to ‘Responsive Web Design is Not the Future’
  5. 5. Source: The rise and fall of personal computing
  6. 6. In 1Q13 Worldwide PC shipments were down 14% compared to the same quarter in 2012 Source: PC Shipments Post the Steepest Decline Ever in a Single Quarter, According to IDC
  7. 7. But what about Africa ?
  8. 8. 2002 2011 49m cell phones 500m cell phones Source: Spotlight on Africa - Mobile Statistics & Facts 2012
  9. 9. 2011 500m cell phones smart phone dumb phone Source: Mobile phones in Africa
  10. 10. That’s a problem, right ?
  11. 11. (ok, hold that thought)
  12. 12. Mobile context isn’t what it used to be
  13. 13. Where are people using mobile devices? 93% 62% 39% at home at work poopin’ Source: The Myth of Mobile Context
  14. 14. Source: Technogym
  15. 15. http://www.flickr.com/photos/37371208@N06/3629732897/
  16. 16. http://www.flickr.com/photos/wonderdawg777/662293238
  17. 17. Common myths about context Adapted from Seven Deadly Mobile Myths
  18. 18. Mobile users are rushed & distracted
  19. 19. http://www.flickr.com/photos/misbehave/2352753067
  20. 20. Mobile is less
  21. 21. “If you click a link or type a URL, you should get the content you requested.” — Brad Frost Source: Content Parity
  22. 22. Source: WTF Mobile Web
  23. 23. “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 Wroblewski Source: Mobile context revisited
  24. 24. Mobile is all about apps
  25. 25. Source: A store in your pocket
  26. 26. See It's not a web app. It's an app you install from the web.
  27. 27. Artist: Jean Jullien
  28. 28. How do we adapt ?
  29. 29. http://finecitizens.com/defineResponsive/
  30. 30. The practice of Responsive Web Design developing digital experiences that adapt to a user’s device, screen size, and orientation.
  31. 31. Fluid grids + + Flexible images Media queries
  32. 32. why ?
  33. 33. Google recommends it See Recommendations for building smartphone-optimized websites
  34. 34. It’s device agnostic
  35. 35. One site for all
  36. 36. Good value for money
  37. 37. Better experience
  38. 38. Mobile conversions up 162% Source: You like apples?
  39. 39. Mobile transactions up 383% Source: You like apples?
  40. 40. Mobile revenue up 371% Source: You like apples?
  41. 41. (Non-mobile stats went up too, but by less than half the amounts on mobile) Source: You like apples?
  42. 42. Mobile conversions up 14% Source: Skinny Ties and responsive eCommerce
  43. 43. Mobile revenue up 42% Source: Skinny Ties and responsive eCommerce
  44. 44. But this is Africa
  45. 45. It only works on smartphones
  46. 46. 2011 500m cell phones smart phone dumb phone Source: Mobile phones in Africa
  47. 47. 2015 850m cell phones smart phone dumb phone (that’s 127m smart phones) Source: Mobile phones in Africa
  48. 48. Smartphone shipment growth 2011 10 million shipped 93% YoY growth Source: The Smartphone Snapshot Showdown
  49. 49. Safaricom in Kenya: “No feature phones for you!” Source: Smartphones vs Feature phones
  50. 50. In South Africa Active Smartphone Users 29% (Vodacom) New device sales — smartphones 80% (Nashua Mobile) Data revenue growth YoY 20% (Nashua Mobile)
  51. 51. RESS REsponsive web design + Server Side components
  52. 52. Progressive Enhancement
  53. 53. But also understand your target audience because they may already be on smartphones
  54. 54. Not OK Image source: Sharp Suits
  55. 55. What to do Get 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)
  56. 56. It’s bad for site performance
  57. 57. The average web page is now larger than 1MB Source: The growing epidemic of page bloat
  58. 58. 1.7 MB 238 requests
  59. 59. 2.3 MB 365 requests
  60. 60. 2.8 MB 120 requests
  61. 61. And what about the responsive ones?
  62. 62. 1.2 MB 130 requests
  63. 63. 0.9 MB 78 requests
  64. 64. “If your website is 15MB it’s not HTML5, it’s stupid.” Chris Heilmann Source: Performance as Design
  65. 65. Performance is Design
  66. 66. What to do From 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)
  67. 67. It uses too much data, and data is expensive
  68. 68. 2006 2010 0,2m mobile connections 15m mobile connections 2015 250m mobile connections Source: African Mobile Observatory 2011
  69. 69. 2015 250m mobile connections That’s compared to 15m fixed connections By 2016, 58% of mobile data usage will be on smartphones or tablets Source: African Mobile Observatory 2011 The Smartphone Snapshot Showdown
  70. 70. Data advances Free international roaming Load-based pricing Bundled pricing
  71. 71. “The Middle East and Africa will have the strongest mobile data traffic growth of any region at 104% CAGR by 2016.” — Jon Hoehler Source: The Smartphone Snapshot Showdown
  72. 72. Mobile internet is the only internet http://www.flickr.com/photos/70292973@N07/7192937172/
  73. 73. Mobile web users who never or infrequently use the desktop web >50% Source: On Device Research
  74. 74. What to do Don’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)
  75. 75. It costs too much and takes too long
  76. 76. “Yes, Responsive Web Design costs more... than doing nothing.” — Brad Frost Source: A Response to ‘Responsive Web Design is Not the Future’
  77. 77. https://twitter.com/skorks/status/321921772918300673
  78. 78. What to do Educate 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)
  79. 79. There are too many UX limitations
  80. 80. 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.
  81. 81. What to do Read 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.)
  82. 82. In other words
  83. 83. Yes, there are challenges!
  84. 84. Four Stages of Learning Where we are Where we want to be Source: The Responsive Dip
  85. 85. “The fact that we don't know how to do something today doesn't mean we shouldn't strive to do it tomorrow.” — Ben Callahan Source: The Responsive Dip
  86. 86. The present The future The point where RWD makes sense
  87. 87. We cannot wait until we feel ready
  88. 88. Consider RWD in Africa 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) Data access is increasing (Bandwidth and coverage are expanding, and costs are decreasing) It’s better for everyone (The user and business benefits are pretty huge)
  89. 89. http://futurefriend.ly/
  90. 90. Thanks! @RianVDM
  91. 91. 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- series http://www.youtube.com/watch?v=0bXjgx4J0C4
  92. 92. Looking for responsive patterns? http://bradfrost.github.io/this-is-responsive/patterns.html http://responsive-nav.com http://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-point http://css-tricks.com/examples/IconFont/
  93. 93. All icons are from The Noun Project: Africa designed by Monika Ciapala Home designed by Andrew Fortnum Loch Ness Monster designed by Mike Wirth Thumbs Up designed by Nick Holroyd Tablet designed by Luis Prado Group designed by Amar Chadgar Money designed by Rob Gill Obesity designed by James Stone Globe designed by Marco Davanzo Internet designed by Fernando Vasconcelos Forget designed by Andrew Forrester Some of the tools I used in this presentation: iConvert Icons Camtasia:mac Reflector.app
  94. 94. A boring table that’s pretty important http://caniuse.com/css-mediaqueries
  95. 95. Ok, now it’s really the end.

×