Blog

Responsive Design and what it means for your business online.

20th March 2012

So, what is Responsive Design?

You may not have heard the term “responsive design” before but it’s a subject that is gripping the web development world currently. This is an approach to coding and design that aims to accommodate the growing number of web enabled devices and serve them usable content without having to design & build separate sites for each experience.

This is done essentially through a series of media queries (Huh? Simply put the web site “Queries” the devices display resolution it is being consumed on and then based on that answer instigates a set of rules that dictate the layout, etc) A fluid layout design is developed to accommodate these scenarios.

Why should I be interested?

Well, hold up a sheet of paper in front of half your screen whilst viewing your current website, or stand ten feet away and try and read the content, that’s what your website is going to look like in a few years time to a very large part of your users.

The general consensus is that in the very near future, most people will mainly experience the web on some sort of mobile device (Smartphone, Tablet) than they do on a traditional desktop or laptop. This means your web presence has to accommodate and adapt to this shift if it doesn’t want to be ignored by this large and growing segment of web users.

“Phones are already more popular than PCs. New research by Canalys shows that 2011 global smartphone shipments topped those of client PCs — including desktops, laptops, netbooks, and tablets — for the first time.”

From Canalys. Read full article here:

“Smartphone Sales Will Dwarf PC Sales This Year And Reach A Staggering 1.5 Billion Per Year By 2016.”

From Business Insider.Read full article here:

By optimising your website for your users depending on how they consume it you are removing barriers to conversions and reducing drop out rates. Notable features of Responsive Design include revised navigation methods to make it easier to use the site on smaller screens, reordered content to make reading and journey completion easier, and the ability to add or remove content for different devices, hopefully you’re starting to see the potential here?

For a quick example have a look at http://www.fork-cms.com/ Just grab the bottom right corner of your browser window and close it up and open it again etc, and you’ll see how the content re-orders itself depending on the display space available and remains very useable, you can easily see how this site will look on a narrow Smartphone display.

What are the issues from a client point of view?

As anybody will tell you, you won’t get all that web loveliness above for nothing, currently developing and designing a responsive site is a longer (and for developers and designers a sometimes torturous process) it’s been likened to herding cats or nailing jelly to a wall. What works in one size and orientation may not in another. So the development cycle can take longer. Having said that many new Frameworks have become available recently which enable very stable-cross browser/platform sites to be developed more rapidly these include Twitter Bootstrap (http://twitter.github.com/bootstrap/) and Foundation from Zurb.com (http://foundation.zurb.com/) to name but a few.

How can a web agency demonstrate this responsive concept to clients? Well, traditionally clients may have been presented with static mockups of the sites main pages and wireframes explaining the rest, but this doesn’t convey well the nature and benefits of Responsive Design. Current thinking is to use basic stripped down websites as a kind of HTML wireframe with no branding and simple styling, these help clients see what is happening to content as it is re-sized (and this helps clients see the functionality and user journey better I think). From a visual design point of view the design of static pages will be overtaken by the focus on elements within the page and e.g. Product item area, a Call to Action template, a gallery or light-box display, form elements as well as the basic branding and typography.

What about images, can they be resized to fit different layouts? Short answer, yes and no. Part of the fun of Responsive Websites is that images can be resized automatically in the code, the question is, do you want them to be? The catchall thinking was that images would be resized to fit the width of the device, or containing element below a given resolution by default. But this isn’t always the best option – who wants to see a thumbnail stretched and pixelated across the width of their phone? So there are several ideas around currently, one involves serving different sized images where required at higher resolutions again via media queries. There are also several third party solutions will automatically re-size images and serve them at the correct resolution. Like http://adaptive-images.com/. So careful thought has to be given to use of images particularly in Content Managed Systems.

The future?

The clever bit here, as I mentioned above is that the screen size is being judged, not the device, so in in this sense it is very future proof, if a new device is launched next year, that’s fine as the site will simply query the devices dimensions (and orientation – cool, eh?) and serve up the content as per it’s instructions. For example many new SmartTV’s with web access are arriving on the market, no problem, the responsive web is ready to handle it.

Additionally because we can control how the site changes for different screens, assuming smaller screens are for mobile devices this gives us the opportunity to optimise the interface for touch screen, for example make buttons larger and easier to use, refine shopping carts for easier use on smaller screens, ensure navigation doesn’t take up most of the screen but is still easy to use.

And the good news is that all of this can be done in one go, no longer will you look to have a “regular” website and then look to have a “mobile” version developed at extra cost. Additionally as this is “browser” technology it doesn’t even care if it’s on an Apple or Android device.

The future is bright and it’s going to be in lots of different shapes!

Related Articles

crystal-ball
Digital Crystal Ball for 2016

27th January 2016

Many of the digital trends we expect to see in 2016 are a development of the work Crush are already doing, but in the next 12 months the new developments will come into their own. There are also plenty of old constants too which can’t be forgotten and remain as important as ever. Below are […]

Responsive Website Development
Responsive Website Development

25th February 2015

Responsive has been a buzz word in digital strategy and web design for a while now and it has become more and more integral to all the work we do at Crush, since tablet and mobile web use has skyrocketed. The graph below shows real live website visitor session data for 5 Crush Digital clients […]

wp-or-drupal
Drupal Versus WordPress for your Website

6th June 2013

There is a raging debate going around about these two content management systems (CMS for short). One will hear a lot of pros and cons about either platform, depending mostly on what the user is trying to accomplish. The statistics show that WordPress has far more penetration at a global level. At the same time, […]