About Responsive Web Design

As the title suggests, this is an article about responsive web design. What it is, why it is important and what the alternatives are. There’s so much diversity now in how users are grabbing web content, that the design community has had to react. For many, “mobile” is the elephant in the room.. the latest in a long line of “on costs” that keep coming your way as digital information matures to be the kingpin in most organisations communications strategy… From a web developer’s perspective, we see it more as an opportunity to engage with your audience. As marketers, an opportunity to reduce cost (or at least increase your “bang per buck”) for the long term. Responsive web design or RWD, to adopt an ugly but useful acronym, is a modern and increasingly important component of effective design for the internet. So let’s start at the beginning…

What exactly is Responsive Web Design?

RWD was first coined as a term 3 years ago by writer / speaker / web designer Ethan Marcotte in an article in A list Apart Magazine. The basic premise is that instead of designing to page and object widths, you design to a fluid grid that allows content to reorganise and reformat itself, providing a “best fit” user experience on whatever device you are viewing the website on. Most commonly, the width of the browser window is used to determine a set of “rules” that are applied to the web page content and then design elements such as image size, text size, hierarchy of content and navigation and so on, are ordered and presented as a “best fit” for the screen… The design responds to the user, rather than the user responding to the design.

Why does RWD matter?

Well implemented fluid design will:

  • Maintain familiar design across a huge variety of screens, improving cognition and retention.
  • Present web sites for mobile that have a reasonably consistent “workflow” from designer to designer - most have adopted a top of page navigation that uses the mobile device operating system to reach key navigation items.
  • Reduce creative and code implementation costs for organisations who take mobile internet seriously.
  • Increase conversion rates for mobile devices (compared with desktop optimised web sites).
  • Reduce bounce rates on mobile devices.
  • Maintain full web site functionality rather than stripping down content based on an assumed mobile requirement.
  • Remove the need for some organisations to maintain specifically designed and developed mobile apps.

Mobile web traffic is huge and growing at an ever increasing rate. Over 15% of global web traffic is now mobile originated and in many sectors in which we work, that figure is as high as 40%.

Does Responsive Web Design Limit My Content Management Options?

It shouldn’t do, is the short answer. Content management systems are generally independent of the web pages they serve. For some time, separation of design and content has been the chosen way of working for most sensible web development companies.

In our business we deploy responsive web sites on our own content management system, and also for Wordpress and Magento, two of the most common open source CMS’s for general web site management and e-commerce.

What are the Alternatives to Responsive Web Design?

There’s two main options. The first is the simple option “do nothing”. For some business, doing nothing is kind of OK. If you’re a start up desk-to-desk type business with no real web traffic and a host of outgoings, then yes, the extra expense involved might be better spent elsewhere. The other option is to tailor specific mobile web sites to cater for your mobile audience, and again, for some applications, there’s a strong argument for this. The downside of producing fully formed mobile sites.. and here I don’t mean just ripping an RSS feed into a basic style sheet and assuming you’ve “done enough”, is up front expense. You’re designing twice or more, deploying twice or more, updating twice or more and increasing your time to market into the bargain. If budgets aren’t an issue and timescales are manageable, we would (and do) often advise that mobile specific is the way to go. All that said, with responsive web design now becoming a mature discipline, and users getting used to the benefits and nuances, we’re advising more and more of our clients to unify their web presences and just “go responsive”.

What are the Downsides.

There aren’t many downsides really, though you do need to keep an eye on page size and ideally optimise images to serve smaller versions to mobiles, even if this has to be automated to save cost and resource. The search engines are beginning to put more weight on page speed, so a fast web site may rank better than a slower competitor. This really comes back to usability and user experience again, Google in particular, are looking to serve up the best web experience they can through their search engine. As a result, one of the key design modern challenges is to create a web page that works well for each of on page search optimisation, user experience and speed.

If you serve 3rd party banners, some additional coding might be required to make sure that the right advertising content is served to the right device. For most, of course, this isn’t really an issue.

The only other consideration really is cost. There’s no doubt that designing and coding a fluid web site takes a little longer than designing to a fixed width, but the benefits for most applications far outweigh the cost. Where e-commerce is concerned, we’ve seen enormous  conversion rate jumps, meaning “on cost” becomes tangible “ROI” in the space of days and weeks. A few months in and that on cost becomes pure profit.

Doe this mean rip it up and start again?

Difficult to say without seeing your current web site, but for many, a site might just need a “spit and polish” and may already have been designed in a way that makes implementing RWD easy.. for older sites, it might be time to think about a redesign. If we accept that most web site will have a 36-60 month life cycle, there’s certainly no need to panic but responsive should be part of your next web site plan, you can guarantee it is part of your competitors, especially if they are already working with us here at Stunn.

More Information / About The Author

If you’d like any more information about responsive web design, or any of the topics raised in this article, please contact Karl directly on 0121 616 0098. Stunn Ltd are a full service agency specialising in bespoke and complex web design. We are based in Birmingham City Centre.


Some examples of recent responsive web sites that we have built can be seen here;

http://www.pbbrakes.com

http://www.philjonesassociates.co.uk

http://www.johnsofnottingham.co.uk