Responsive Design - An Overview

Responsive Design - An Overview

In the technological-savvy age that our present day holds, we often look to our handheld devices to provide us with entertainment – and this doesn’t mean playing snake on our Nokia 3315.

We are constantly searching for apps and websites that not only hold our attention with their activities, but with their functional and aesthetically pleasing design.

 

A recent study by The Associated Press has shown that in 2012 the average attention span was 8 seconds. Compare this to 12 years ago in 2000, when an average attention span was 12 seconds* and you can see that we are becoming impatient and don’t like to wait around for things to load.

This may or may not be caused by the increase of technological objects readily available to us, and the periodic growth of speeds in this technology – but either way, if you’re attempting to engage a viewer of potential customer in your content, you need to be quick!

 

People are looking for a way to get information on their phones and handhelds instantly and with the attention span statistics mentioned above, they want it as fast as they can.

With the exponential increase in “smart phones” within the past few years, the demand for mobile websites has exploded. Mobile is already preferred over desktop for online shopping and by 2014, it’s predicted that mobile devices will overtake desktop in all Internet usage.

 

What does this mean?

If you want people to use your website as their primary preference when looking for information relevant to your business, you need to offer a fast loading page that is easy and pleasant to look at and use.

 

How can you do this?

The best way to have a website that is viewable on both desktop and handheld devices is to use or create a responsive design. A responsive website means that as the resolution (or screen size) of a page is adjusted, the elements on that page will be moved and resized accordingly to preserve readability and usability. A majority of the time this also helps with page load times, which will keep those “short attention spanners” happy.

Notice how in the examples below, the elements move to use the space efficiently while still holding it’s usability and functionality – these changes automatically happen as soon as the window gets to a particular size.

 

Examples from Pixel To Paper [made] websites:

Belconnen Fresh Food Markets - http://bffm.com.au

small-bffm medium-bffm

big-bffm

 

Easycare Landscapes - www.easycare.com.au

small-easycare medium-easycare

big-easycare

 

Isn’t this just like having a separate mobile website?

Although you can do it this way, a responsive design uses the same principal as a mobile website – the difference being you do not need to update two separate websites with content.

 

Try it yourself

Open a website (try a business that primarily uses web) and resize your browser and see it for yourself. For example: http://www.time.com/time/

 

In Conclusion

Be sure to create a visually pleasing website that will hold a viewer’s attention and that works well on all devices. The responsiveness of your website will make it available to a wider audience and give them a good, quick look at information they’re looking for.

 

* Statistics can be viewed here: http://www.statisticbrain.com/attention-span-statistics/

 

Other Resources:

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

You may be interested in...



Had enough browsing?

Get in touch

Get in touch

We wont charge you for the inital project meeting. So really you have nothing to lose.

Fill out the form below with as much information as you can provide and we will be in touch with you asap to discuss.

Name(*)
Please type your full name. Also only allowing alpha numeric characters here. Why do you have all this fancy stuff in your name anyway?

Email(*)
Invalid email address.

Phone
Please enter a valid phone number.

Enquiry Type(*)
Invalid Input

Message(*)
Please only use alphanumeric characters in your message

Invalid Input