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:

• Most North Americans have internet access at home or at work. This applies to nearly 80% of the population.
• Smartphone penetration in America is higher than 60%.
• Public Wi Fi hotspots are widely available
• The gross domestic product (GDP) and purchasing power parity (PPP) in North America are among the highest in the world.

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.

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

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.

Why?
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.

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

Size
As mentioned already, there is a huge difference in 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…