This post provides background and additional resources for my talk on Responsive Web Design in Africa. Last update: May 23, 2013.
I’ve seen a surprising amount of pushback on responsive design within the South African web community recently. The skepticism is mostly based on issues such as low smartphone share and high data costs in Africa, along with assumptions about “the mobile context” and how people supposedly have vastly different needs on mobile phones than they have on their desktops.
So, the purpose of this talk is to summarize the case for Responsive Web Design, and to argue that the reasons against using this approach in Africa don’t hold up. Smartphones and data access are exploding in Africa, so if we want to be Future Friendly, we don’t have a choice. We have to adapt.
The slides for the talk are below, although of course, some context gets lost without the voiceover. There are also embedded gifs and videos that obviously don’t play within Slideshare, so you’ll have to use your imagination on those…
Resources
I cite the source for each quote, example, and data point on the applicable slide, but I thought it would be helpful to provide a brief list of Responsive Web Design resources here for easy reference.
For those who want to dig a little deeper on the data in Africa, here’s a list of the reports and presentations I found most useful:
- GSMA’s Mobile Observatory Series, particularly the report African Mobile Observatory 2011 (PDF link)
- Insights into Mobile Telecoms in Africa by Jon Hoehler and Andrew McHenry
- The Smartphone Snapshot Showdown by Jon Hoehler and Andrew McHenry
- Key findings from the Mobile Africa 2012 report (thanks to Ethan Marcotte for this link)
- Insights into the mobile-only generation
Here’s an incomplete list of introductory articles to get you started on responsive design. These articles mainly touch on topics I bring up in the talk, like the reasons for adopting responsive design, performance issues, and RESS:
- Define :: Responsive (a demo to show people how it works)
- Responsive Web Design: What It Is and How To Use It
- Reasons for Responsive Design
- Responsive web design: the war has not yet been won (More reasons)
- Content Parity (Relates to the “Mobile is Less” myth)
- Impact of Responsive Designs (Some good data on the benefits of responsive design)
- Where to Start (How to start adjusting workflows)
- Prioritizing Performance in Responsive Design
- Conditional Loading for Responsive Designs (On progressive enhancement)
- Getting started with RESS (Server-side components to deal with lower end phones)
- Responsive Deliverables (What you can expect from your design team or agency)
If you’re looking for responsive patterns, start here:
- Brad Frost’s collection of patterns and modules for responsive designs
- Responsive navigation plugin (without library dependencies and with fast touch screen support)
- Some more patterns for dealing with navigation
- Responsive Multi-Level Menu Demos
- Alternative ways to optimize navigation across touch devices (Luke Wroblewski and Jason Weaver)
And here are some ideas for dealing with responsive images:
- Adaptive Images in HTML
- Responsible Responsive Images by Mat Marquis
- ReSRC.it (Responsive images on demand, directly from the cloud)
- A small set of CSS classnames to help keep images cropped on the focal point
- A quick intro to Icon Fonts
For more great resources on responsive design, see Jeremy Keith’s extensive list.
The point
My goal with this talk was not to say anything groundbreakingly new about Responsive Web Design. The goal was to urge designers and developers who work in developing regions to take responsive design seriously, and at the very least consider the approach for their next projects.
If you have any questions or comments (or are interested in having me come present this talk somewhere), please get in touch.
