Web Design

Use Responsive Web Design (RWD) when building your website to ensure that your website displays optimally on a range of different screen sizes, resolutions and hand held devices.

RWD will help to future proof your website as new hardware and technology gets released featuring screens of irregular shapes and sizes such as popular smart mobile phones like Google Andrioid or the Apple iPhone across to tablet computers like the iPad and Kindle.

Did you know that most modern mobile phones can now access the Internet and display your website? Even new smart televisions that are connected to the internet can be used to browse & surf the web.

Here are a range of examples that show non desktop computer devices people might use to look at your website.

Internet enabled devices

What is Responsive Web Design?

In a nutshell, Responsive Web Design is when a website is built using responsive techniques so that the layout (which encompasses your content, navigation and images) behaves fluidly or elastically whereby it can change itself in order to fit the container or device it is being viewed on.

If you’re viewing a responsive website on a large desktop monitor you will see a fully scaled version. If you then view the same website on a smart phone the information will become stacked and enable you to see a streamlined version. This happens because the screen of a phone is very narrow in comparison to a desktop or laptop computer.

If you flip your smart phone into landscape view the website will expand allowing you to fit and show more on screen.

Why should I care?

Google’s Our Mobile Planet survey has revealed some interesting statistics: 78% of people who were asked have not left home without taking their smart phone and a hugely significant number, 95% have used their smart phone to research product information online.

These numbers are more than likely going to increase year on year as adoption of smart phones increases as does our comfort and familiarity in using smart phones in everyday life.

Here’s a link to the full UK report. The information is based on a sample size of one thousand people who were questioned regarding their mobile phone activity.

What are the alternatives to Responsive Web Design?

Have a website built the traditional way

You can have your website built using traditional methods whereby responsive techniques are not used. This means your website will appear the same size regardless of what device is used to view it. This could either mean a lot of potential extra screen space is wasted and underutilised, or that anybody browsing on a small screen has to perform a lot of tedious and unnatural scrolling or panning around in order to see your content and information.

RWD is a relatively new technique and will likely mean you have to pay more to have a website built because there are currently fewer companies offering responsive design.

You could have a separate mobile only website developed.

Your content would be built specifically for smaller screen sizes and resolutions and thus your content would be selectively chosen, optimised and presented for a better mobile browsing experience.

However there are two significant problems of developing a separate mobile only website.

  1. Duplicate content – Google may find conflict with your mobile website vs your desktop website and ignore key pages or choose not to index one of your versions in the first place.
  2. You create ‘forked content’ whereby you now have two separate branches of the same content. If you update one, you also have to update the other or risk showing people outdated or incorrect information. This creates twice the work load!

Google have officially stated that they would prefer you to use Responsive Designs of your website. This is sound advice to follow if your business greatly benefits or depends upon search engine traffic, however it is not gospel.

Some businesses may benefit from delivering an optimum user experience over a search engine friendly website. Pubs, Restaurants and brick & mortar only clothing stores for example might benefit from a separately developed mobile website built with this in mind.

Responsive Designs mould themselves to the device being used to display it on, which may or may not yield in a great result.

Here are some of my favourite examples of Responsive Designs in the real world.

Visit the links below and try to change the size of the browser window and see how the sites content responds to your resizing.

Now do the same thing to your own website, can you see the difference?

Better yet, try to view one of these examples on a smart phone or tablet device. Can people still easily read your information, browse your site and navigate to your pages with ease and without making people pull their hair out?

Things to take away

  • A lot of people are browsing the Internet on non traditional devices such as their smart phone or tablet
  • People don’t just browse websites at home anymore—they’re browsing whilst stood in your brick and mortar store, sat in coffee shops, on the bus & train, whilst waiting for an appointment, walking out and about.
  • People are still more comfortable buying from a desktop computer—however they are researching products or finding directions or the locations of local businesses.
  • Google have hinted they want you to use responsive designs. This may in the future become part of their ranking criteria for local businesses and impact the local listings within the search results.

Further Reading

What is Google+ Local?

2 responses to “Responsive Web Design (RWD)”

  1. David, are you aware that on your website the “share this post” widget text that appears on the left of the screen makes the blog text on the left-hand edge hard to read? I’ve encountered this on my iPad.

Leave a Reply

Your email address will not be published. Required fields are marked *