Vincent Maher, CTO of Motribe, discusses some of the failings of the responsive design trend, and smack-talks Silicon Valley myopia.

There’s been talk in the Valley over the past year about this new thing called ‘responsive design’, which will supposedly – and magically – dispense with all your mobile branding woes by ‘fixing’ the problem of needing two websites (one optimised for desktop and the other for mobile). It sounds amazing.

HTML5 and CSS
Here’s how it works: you build one website using HTML5. Then you use the new features of Cascading Style Sheets (CSS) to detect what type of device is being used to view the site, and then render the pages in the way that works best for that device – this is how the design ‘responds’ to the device. It still sounds amazing…but there’s a catch.

Responsive design only works properly if the mobile device supports the kind of CSS and HTML that allows it to respond in the first place. This means that more than half the mobile phones in Africa don’t even understand what responsive design is.

Screen size matters
The problem goes deeper than just HTML5 and CSS support. The Nokia 3110 and the Samsung E250, both very popular devices in Africa, are small devices with very little screen real estate. They both have 128 pixels of screen width to play with. One of these screens could fit into the width of an iPhone 4S five times, and this is the reality that the proponents of responsive design are missing.

Deal-breaker
The problem also comes into focus from a marketing and advertising point of view when brands link to websites from their Facebook pages. Based on data Motribe has collected from Campaign Router, we think it’s safe to say that if a South African company links to something on its Facebook page, only 20% of the users who click on that link will be doing so from a desktop computer. The other 80% will do so from their mobile phones.

There are myriad other small but deal-breaking reasons why responsive design won’t work in any emerging market. And this includes those emerging markets embedded – but mostly hidden – in North America and Europe.

The solution? Focused attention.
Speaking from experience, the solution isn’t simple and requires the brutally honest answer to this question: Do you care enough about those mobile users who can’t afford the type of device that supports responsive design? If you don’t, and you’re happy to focus on 10% of the mobile market, and you also understand what that really means for your marketing and mobile traffic, then go ahead and make use of responsive design.

But if you want your mobile site to work on the typical African mobile phone, then you need to give it some focused attention by finding a specialist company that knows how to make websites work on these devices. A great way to start would be to buy a few of these phones – starting with a Samsung E250 and a Nokia Express Music – and use them to access your site. Become obsessed with making your site work well on these phones, while at the same time accepting the fact that the user experience will never be as good on them as it would be on a smartphone.

Motribe groups devices into three categories based on the width of their screens: small (128px to 168px), medium (168px to 240px) and large (320px or more). This allows us to focus on experience categories rather than on specific, individual devices. Often, devices in the same size group will need the same quirks and experience flows, so it makes sense to do it this way. And finally, we use something like Campaign Router, which makes the decision regarding which devices need to go to which landing pages.

Are you working on a mobile site? Feel free to drop me an email if you want to chat about the technicalities, or if you need advice. Also, check out http://campaignrouter.com for more information or visit http://motribe.com to find out what we do with mobile and social.