• Motorburn
      Because cars are gadgets
    • Gearburn
      Incisive reviews for the gadget obsessed
    • Ventureburn
      Startup news for emerging markets
    • Jobsburn
      Digital industry jobs for the anti 9 to 5!

Why Google might just be wrong about responsive design in Africa

Maybe, just maybe, Google is getting it wrong in Africa. I recently attended a very good session on responsive design by Luisella Mazza, and although I think responsive design is awesome, it’s not for Africa. She (and Google) recommended that anyone building for an African audience use responsive design to build their mobile sites.

What is responsive design?
A new feature in HTML5 (or rather CSS3) is the ability to add media queries rules. So inside your CSS you can add conditions that apply to certain screen resolutions. This means you can create one HTML file, but depending on what device is being used to render this HTML file, certain rules will apply.

Any mobile web developer who’s built mobile websites for African sites should already be able to tell you why this is a problem in Africa.

Let’s first look at why responsive design is feasible in North America:

So your typical American has internet access at home, a smartphone, a lot of public internet access and a budget to pay for internet data.

Using responsive design for your website makes sense in North America where mobile is just an extension of the user’s current internet experience.

Now let’s look at the situation in Africa:

  • Most Africans do not have internet at home or at work. Only about 15% of the population does. And the internet that they have at home and work is not at all comparable with what you have in America (in terms of speed and reliability).
  • Smartphone penetration in Africa is less than 20%.
  • Public Wi-Fi Hotspots are not widely available.
  • The GDP and PPP in Africa is among the lowest in the world.

So your typical African’s first and only point of access to the internet is via a feature phone. Because of the cost of data and the disposable income of a typical African, an African feature phone internet user is very aware of the size and cost of a web page.

Here are the issues then:

1. Responsive design only works on smartphones
So by default you are already ignoring 80+% of users in Africa. You are also reaching the 20% of users that possibly have internet access at home or work.

Now Google (and others) might argue that in five years’ time most Africans will have smartphones — and we can only hope that they are right. But will the average user in Africa also now suddenly have a budget to pay for the internet? Most people in countries like South Africa are using pre-paid packages to pay for their calls and data. Simply giving everyone a smartphone is not solving the problem.

2. Responsive design is not lightweight
One of the comments made by Mazza in her presentation is that responsive design creates a lightweight version of the site when viewing it on a smartphone. She explained that “lightweight” refers to user perception, rather than actual data usage.

That is exactly the problem. When using responsive design, the size of the download to the browser is still very big (in fact it’s very similar to what the webpage would be). All the HTML is still being downloaded (even parts that are hidden on a smartphone if you use media queries to set display:none in your CSS). Sure, you can have rules to download separate images for separate display sizes and that should help a bit.

So essentially responsive design is leaving the decision on how to layout, and what to show, to the browser (or client). The browser still downloads all the CSS files (that are now bloated with all your rules) and all the HTML (also bloated with div/s that might not apply to you).

What we need in Africa is a solution that is lightweight in terms of data usage.

So let’s look at the example that Mazza used in her talk:

Obama mobile site

It is nicely re-sized, some content is hidden and it will look awesome on a smartphone. It’s heavy though — around 64K.

I quickly created a similar site in a mobi site creator (see the example here):

It still looks awesome, but will now render on more than 6 000 handsets (smartphones, feature phones and low-end phones) and only weighs 16K.

Changing the user agent to a Motorola V3 (still very popular in Africa) will change the size to less than 10K.

Netbiscuits CEO Michael Neidhoefer described it best in this talk where he refers to adaptive or proactive design (compared with responsive design). Proactive design makes the decision on what, and how, to render on the server rather than on the browser. So content that needs to be transferred to the browser is much less. There is no bloated HTML or CSS. Images are resized on the server to match the phone screen size.

Other interesting stats
Using Web Page Test we can find some other interesting stats when comparing a responsive design to a proactive design.

My Obama mobi site rendered in 2.2 seconds, vs the 20+ seconds that the real one took. That is +- 10 times faster.

As mentioned already, there is a huge difference in size.

Obama site size

This means that an African user can surf the net 10 times more (or at a cost that is 10 times less) and 10 times faster. In a continent where internet is not widely available this is a very important point.

So should you use responsive design for your next mobile site? Google might advise you to, but I think Google might be wrong…


  1. CommentKing

    November 22, 2012 at 9:52 am

    The best of both words and the new buzz word is actually RESS (REsponsive web design & Server-Side components) basically when the initial HTML request is made you do server-side detection to find out what class of device is making the request (works with all past and future browsers) and then conditionally load content dependent on the device or class of device.

    2 Articles for you to read

  2. Warren Fabricius

    November 22, 2012 at 12:00 pm

    To be blunt, the 80% that you’re not targeting, probably fall into the lower LSM group, meaning that there will be no buyer intent. Typically, high purchase intent categories tie their content more aggressively to driving transactions, and RD may well increase or improve this conversion rate.

    If you have a look at the advertisers that are pushing mobile campaigns to the max (think Volvo S60 augmented reality campaigns etc.) they are targeting a higher income group, and thus a Responsive Design approach would make complete sense.
    Of course, one of the main purposes of responsive design is to keep the brand and the message intact, across the multitude of devices. Coding down to something that is less that aesthetically pleasing (no offense, but their is a huge difference between what you have presented in the Obama example and the original) places the brand and the experience at risk.
    That’s not to say that there is no room for clever coding and workarounds. They all have their place.
    Just my 2c worth, happy to read other thoughts/ideas.

  3. John Galt

    November 22, 2012 at 1:39 pm

    The biggest misnomer in the .za mobile scene is that the upper LSMs are not sensitive to their data usage. I hate it when my iPhone data bill exceeds R400 a month.

  4. Stephen Hall

    November 22, 2012 at 1:59 pm

    Great article. I also attended this Google session, and found the use of the term “lightweight” by the presenter to be very misleading.

  5. Tim Lind

    November 22, 2012 at 4:47 pm

    There are so many things wrong with this article. Responsive design does not mean you can’t do server side optimisations. In fact it can help you to do these, and encourages a more efficient design process.

    You can design the content for the feature phones, and responsive media queries allows you to upgrade the design with a single stylesheet file for the smartphone or desktop (which server side optimisation could exclude).

  6. frikkenator

    November 22, 2012 at 8:41 pm

    Agreed. Media queries is but one little bit of responsive design, there are numerous other options which includes client and server side tech to optimize the experience.

  7. ixhd

    November 23, 2012 at 7:58 am

    You might want to have a look at the actual phone usage stats. Smart phones, and Specifically the high end ones, are really not as popular as you might think, in SA or the rest of Africa.

    Not one single device has above 6% share currently , in our country :)

  8. ixhd

    November 23, 2012 at 7:59 am

    I would also argue that someone using a BlackBerry (which dominates, most LSM’s), clearly doesn’t care about the quality of their user interface very much. Making your styling and rendering argument moot.

  9. Erik Hersman

    November 23, 2012 at 8:18 am

    Philip, you make some excellent points about what’s wrong with responsive design on the continent (especially the one on data weight of a page), but I disagree with your statement that responsive design isn’t for Africa.

    As some other commenters here have stated, a lack of server-side optimization on the site/app aren’t indicators that responsive design is wrong for Africa, they just show that there is still a need for someone to pay attention to the details.

    I’d actually state that because the default access to the internet is via phones, that it’s more important for responsive design to work here than many other places. Yes, the pages need to be optimized for data weight, but that’s about the only adjustment I’d make. Even if the experience is deteriorated from a full-on PC experience, it’s better than what we have now, which is people trying to load full PC web pages into a feature phone (and smartphone) browser.

  10. Pingback: Why Google might just be right about responsive design in Africa

  11. Pingback: Technology in Africa Weekly – Vol. 3

  12. Phillip Kruger

    November 26, 2012 at 3:56 pm

    Hi everyone. Thanks for the comments. I am trying to reply here, but my comment is not showing. I am wondering if it’s because it’s too long ? Anyways, for those interested, see the reply here http://thumbtribe-it.blogspot.com/2012/11/google-might-be-wrong-part-2.html

  13. Tim Bishop

    January 16, 2013 at 2:50 pm

    Another perfect example where a methodology is confused with a technology.
    Response design is a methodology which should do everything you need it to to adapt and display your content on phones of all shapes and sizes. ie. regardless of what you view it on, the site responds to that phone’s limitations and adapts. If you confuse this and use HTML5 as a solution you are an idiot. HTML5 is a technology which may or may not be a small part of the solution (ie. when a capable phone is detected, by all means show the HTML5 version with its bells and whistles and a user who worries less about bandwidth cost)… for less capable phones you then adapt as per the examples of the author above. Everyone gets the best of all worlds.

    True responsive design makes use of a multitude of technologies and implementations to ensure that whatever the device a user may want to access you via, they can, easily and economically (whilst hopefully having a good experience).

    As for HTML5 being only for ‘smartphones’, it is actually worse than that as there are only a small slice of SA’s smartphones that can support HTML5 (best estimate being no more than 1.5m)

    So please, once and for all… please disconnect the term ‘Responsive Design’ from HTML5, they are not (and should not be the same thing). The States, the World and especially Africa are not ready for an HTML5 only solution, so punch anyone or any agency that gives you that as your solution.

More in Africa, Design

Tyme Capital: MTN and Pick 'n Pay team up to launch mobile bank in South Africa

Read More »