The
title itself is controversial because users on other continents need
responsive design as much as African users. Also one may argue that
responsive design is currently mostly used outside Africa. But this is
exactly my point. I will explain.What is Responsive Web Design?
Let’s start by defining Responsive Web Design or RWD as it is often known in the web design industry. RWD is a website design approach that seeks to adapt the website layout to various devices screen sizes on which it viewed. So for example, the website will adapt the desktop computers as well as mobile devices regardless of their screen sizes.
This article on Wikipedia defines Responsive Web Design in more details as follows:
…is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)Why Responsive Design for Africa?
So why am I saying responsive design was made for Africa?
Firstly, the use of computers, internet and mobile phone is novel to many Africans. While this is true, there are also more mobile phone users in Africa than desktop computers users.
It is also true that Africa represents a big segment in the mobile phone users’ chart. According to Ericsson, Africa has 775 million mobile subscribers just in Q1 of 2013. This alone is a strong argument for businesses to design their websites with mobile users in mind.
The figure below confirms mobile internet penetration in Africa is on the rise.
However, I was surprised to find many websites targeting African audience do not consider responsive design on their websites. Take the following website of Cogebanque, a local bank in Rwanda: http://www.cogebanque.co.rw/. Considering this is a bank website targeting mostly local customers, this should be accessible on mobile phones.
On the other hand try and access the African Bank of Development website (www.afdb.org/en/) on your mobile device and you will see that it scales well.
This is not to criticise any business or their website, just an illustration of lack of responsiveness of some websites. I mentioned banks because their main customer target is local people.
A new approach, not a new technology
So assuming you agree with me that African web designers need to consider responsive web design approach in their design, how do you achieve that?
This is not a new technology by any means just a new approach to using existing technologies. For web designers, you will be familiar with CSS or Cascading Style Sheet which is used to style the look and feel of websites and user interfaces.
This is the same technology that can be leveraged to achieve responsive web pages that adapt to the all screens as relevant.
Media Queries and CSS3
With
the new CSS version – CSS3 – web designers have a new module called
media queries. Media queries allow web designers to handle various
screen sizes ranging from mobile devices to the desktops and large
screens.Mobile first
One of the most popular approaches to designing responsive web pages is a bottom up design approach whereby you design for mobile devices screens first and customise them to scale up to larger screens as you progress. This is a suitable approach for most African audience targeting websites as even if you get it wrong for large screens, at least you have your biggest audience covered.
Tools
There are many tools on the market that help web designers design and test websites in various screens. Some of the integrated development tools are such as Adobe reflowing, Adobe inspect, Dreamweaver but these are not released under open source.
Savvy designers however can always use their current code editors and use free tools such as Dimension App (http://www.dimensionsapp.com/test). There is also a long list on this blog post: http://www.hongkiat.com/blog/rwd-tools/
For applications rapid development and prototyping, there are available frameworks like Twitter bootstrap, Pure CSS, Golden grid system to name a few but a full list of frameworks can be found here: http://list.ly/list/303-alternatives-to-twitter-bootstrap-html5-css3-responsive-framework
Alternatives
An alternative approach is to design a dedicated mobile website or mobile application separate from the desktop website. However this requires a bigger budget, more effort in maintenance which some businesses might struggle with.
Benefits
The benefits are huge for businesses that have mobile accessible websites. They are able to reach more customers with a smaller budget. The consequential benefits are immense, but are outside the scope of this article.
Conclusion
I started by saying that responsive design was made for Africa which not entirely true. With mobile devices being very popular nowadays, any website should be accessible on mobile devices regardless of location. However this is even especially true for African businesses for the fact that most African users surf internet using their mobile devices such as mobile phones.
There is almost no learning curve to adopting responsive web design as it’s based on existing technology. There are many tools on the market the market to assist developers design and test web pages on various screen sizes and devices.
The benefits are huge for businesses who adopt this approach to designing websites as they reach a much bigger audience.
Next time I will discuss techniques that can be used in combination with RWD to make your website more accessible to the most remote audience and reach even more audience for African businesses.
0 comments:
Post a Comment