Responsive Websites, a Mobile-Friendly Solution

Websites are viewed on all sorts of devices these days, and that trend is not going away.  iPads, iPhones, Android phones, featured phones – each one sees something different because they are shaped differently, built differently, and updated differently.  Can one website serve them all?

This is a good question for both website developers and website owners.

The short answer is, you have to find the right balance between your specific needs, (what is the function of your website, who does it serve and how, and how are they using your website) and your budget, (which is based on what resources you have and what value your website serves).

One end of the spectrum, if financial resources were unlimited and your website was the central focus of your business, would be to custom develop for every device out there.  On the other end of the spectrum, with a small budget and a website being just one secondary means of acting like an online brochure for your business, you would likely build one website and rely on the way in which mobile devices interpret and display your website as best as they can.

And there are as many shades of grey in-between as there are differences in people and their business – which is, everyone is unique.

What is a Responsive Website?

A responsive website takes the middle path.  It is both a design and development approach that attempts to provide a moderate solution for a complex problem.  A response website takes that one website and both designs and develops it such that it responds and adjusts to the device that is displaying it.  The factor that is most commonly adjusted is for the width of the device, (ie. if the width of the browser is viewing the website at this size, organize the elements on the page like this, and if it falls below or above this width, then modify how the elements of the page are displayed in this way.)

This approach is still new in the world of website design and development, and there are many ways in which people are applying this concept – but it is one that has gained popularity because it is a good solution to a complex problem.

The best way to understand how such a website works would be to view one live.  If you are on a device that would allow you to change the size of your browser, such as a desktop computer,

1. go to this website,
2. put your cursor at the bottom right corner of the browser window,
3. and change the width of the browser window.

You will notice that the website changes as it gets thinner. (If you hit a point at which is stops adjusting as you size it smaller, this may be due to your browser window stopping it.  For example, I am on a Mac using Firefox and at a certain width, my browser prevents any website from being scaled smaller because of the items I have in my Browser Toolbar.  If I go the Firefox browser menu under View>Toolbars>Navigation Toolbar and select it – it will toggle off that toolbar and then when I scale my browser smaller, the website also scales smaller.)

At the simplest level this technique allows the contents of a web page to be re-organized and positioned to better suit the size of the device it is being viewed on. However one can use this technique to also change what content is displayed at all, removing some content on mobile devices and adding other content, thus further customizing the experience. Although some web designers will argue against this, arguing that they get frustrated when they do not get the same content on their mobile devices, there is a case for customizing content because people are often in different circumstances when they are mobile versus at their desks.

Another consideration is that this technique, compared with creating different pages for different devices, is much more search engine friendly because there is one page receiving all of the traffic, rather than splitting traffic between multiple pages.  According to this article about SEO in 2104 , “For optimal success Google recommends “responsive web design.””

Either way, responsive design is an optimal solution for today’s world, and worth considering for your website.

That’s it.  Enjoy playing around with it.  If you have a mobile device, test it out and let me know what you think.

Cheers.