Sunday, 1 July 2012

Here's what you need to know about Responsive Web Design

(This article will take 4 minutes to read.)
 
The need to have a mobile offering for web solutions has never been so imortant as it is now, and will most likely become an ever increasing need as the demand for ubiquitous connectivity increases.


A recent study commissioned by World Wide Worx in June 2012 suggests that the South African Internet user base had grown from 6,8-million in 2010 to 8,5-million at the end of 2011 – no less than 25% growth.  Of that number a total of 7,9-million South Africans access the Internet on their cell phones. About a quarter of those 8,5-million only have access via their smart phone or other data enabled cell phone, with the remainder having access via conventional device as well, including a PC, Mac or laptop computer.

From this research you can see that a mobile strategy, whether you are in a B-2-B or a B-2-C environment is key to the success of your on-line and digital marketing. 

App or Web ?


As I see it there are currently two directions to take your mobile strategy, and this doesn't of course preclude you pursuing both directions, but lets assume that the majority of businesses will pursue one or the other.   Your choices are therefore build an 'App' with which the user base can download and install and interact with your offerings or build a mobile enabled web site.

This article doesn't get into the detail of when an app vs. a website is more appropriate and I recognise that in some cases, the need for one over the other can be seen as a clear cut choice.  But lets make the assumption that you are poised evenly between the two and deliberating your options.

The app approach of course has a firm following and is perpetuated by the omnipresent Apple App Store and its Android cousin – however this method of solution delivery requires a number of pre-requisites including an infrastructure for distribution and updates,  a customised version for each mobile OS that it will run upon, which could include iOS, RIM and Android, and of course the need to engage or even retain in-house the skills for multiple platforms.
The app approach does provide the benefit of course though of off-line availability and providing a revenue stream (should you wish to charge your consumers for the pleasure). But in this well connected world and a world awash with free applications, these advantages can be outweighed by the disadvantages associated. HTML5 can also even be written to provide off-line access which again negates half of the benefits listed here.

A web application alternatively doesn’t suffer from having to be updated on your device every time the code base changes or a patch is created, because this is ‘served’ from a web server which can be maintained centrally. Furthermore a web application can be written once for all platforms, whether it be a PC/Mac based browser running 1024x768 or even a monster resolution similar to those available today on most PC devices like 1920x1080, or for an iPad, or an iPhone or a Samsung Galaxy etc.

The problem with mobile websites up until recently however has been the problem of having to develop and maintain essentially two separate solutions - this again puts a load on the build and maintenance side of your solution and updates still need to be managed to be kept in sync. 

Enter Responsive Web Design (RWD)

 

It all started two years ago with Responsive Web Design, an article by Ethan Marcotte on 'A List Apart'. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive web sites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device, as explored earlier), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Responsive Web Design indicates that a web site is crafted to use Cascading Style Sheets 3 (CSS3) media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

If that all just flowed over your head, check out these examples. The following images present an example of a responsive web design approach that uses media queries. Figure 1 and Figure 2 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 3 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.

Figure 1: Navigation appears on the left


Figure 2: In an 800x600 Resized Window, Navigation Switches to the Top
 
Figure 3: The same site on a Windows Phone


Below is a example of responsive web design on the Starbucks web solution.



If you’re looking for some great examples of responsive Web design that take full advantage of media queries, the http://mediaqueri.es/ enthusiast site can be addictive. 

If you are looking for some more consumable understanding a great interactive overview of responsive web design can be seen here on John Polacek's site.

The implementation of RWD into your work practice can be made easier by adopting a framework, one such framework that we have looked at and we are busy creating a site around is the Foundation 3 Framework from Zurb.
We don’t have anything yet to showcase – but should do in the next few months as some of our SharePoint 2010 web projects move into stages where they will be publicly available. 
This solution will be a great alternative to executive needs to have an ‘app’ and could also enable you to utilise the basis of your SharePoint 2010 foundation by developing the apps to be served from SP2010.

Thanks for reading my article - if you liked it or found it useful, please click the FaceBook Like or Tweet/ReTweet my post if you are on twitter, so that others may enjoy and benefit from it.  Thanks for your support.