What is Responsive Web Design?

In a nutshell, responsive website design and development is the process used to create a website that responds to the size of the screen that it is being viewed on. This means that one website is created, that can be viewed clearly on smaller mobile phones and large screen TVs, as well as anything in between.

It’s designed and developed in such a way that the website content adjusts at different sizes. For example:

• Font sizes increase on larger screens
• A picture that is only a quarter of the width of a computer monitor, maybe the full width of a mobile phone screen (Keeping it at a quarter of the width on a phone would make it to small to see).
• Your navigation menu may display many links on larger screens, but show only a menu button on smaller screens. This ensures precious space on small screens isn’t overrun with menu items.
• Colours may be adjusted on smaller (likely mobile) screens, to increase the contrast of the content. This will make the content more visible outside, in bright sunlight.
• Large images, or advanced functionality maybe hidden on mobile versions, so not to hinder load times over phone networks.
• Plus many other considerations.

A Little History

As the internet started to become more popular, most people were browsing the web on basic internet browsers, viewed on heavy box-like CRT screens. Although huge in overall size, the actual viewable area of the screen was relatively small, only 600/800 pixels wide. Web designers were designing for this size of screen, about 600/800 pixels wide.

Screen sizes started to increase, with viewable sizes going up to 1024 and then 1200 pixels wide. Naturally, the size of website designs increased accordingly.

As the monitor sizes started to increase, the use of mobile phones for web browsing started to increase also. Mobile phones were very limited in variety and function. They were mainly used by businesses for business and often primarily used for email, but they could browse the internet. The mobile website was born.

Companies that received an increase in mobile based traffic to their website would have a mobile website built (viewing a large screen website on a mobile phone simply didn’t work). This would often be a secondary website (in addition to their normal website) that would be displayed for mobile visitors only. If you visited www.domainname.com from a computer, you would see the normal full size website, but if you visited www.domainname.com from a mobile phone, you would be redirected to m.domainname.com (or similar) and would see the mobile website.

Mobile phones changed, and a larger variety were introduced. On the whole, this was fine as developers ensured that newer phones with modern software were also directed to the mobile version of the website. The mobile website redirection was a great solution, for a while……..

The next big change was the introduction of the iPad. Visiting www.domainname.com on an iPad (technically a mobile device) directed people to the mobile version of the website. This often was an awful experience. Just like squishing a full size website into a tiny mobile screen looked bad, stretching a mobile website to the width of an iPad looked hideous to.

I won’t go into every stage between then and now, but from the original mobile website to now, introduced a huge variety of new screen sizes. A huge variety of mobile phones, larger HD computer monitors, web browsing through widescreen TVs, a variety of tablets, then mini tablets, varying laptop and netbook sizes etc etc. The long and short of it is that we have an ever increasing number of devices and screen sizes, all of which are used to browse the web.

Responsive website development accommodates all of these devices, without the need to create multiple websites.

That was a little more history than I planned, but it’s a good insight into how we got here.

An Overview

Responsive web design allows the creation of one website that adapts and adjusts it’s layout and content to display effectively and clearly on the size of screen it’s being viewed on.

As well as the obvious aesthetic and design advantages, responsive websites contribute to benefits in the following areas:

• Increasing your reach to tablet and mobile audiences
• Increasing sales and conversion rates
• Consolidating your analytics and reporting
• Increasing your visibility in search engines
• Saving time and cost on mobile development
• Saving time and cost on multiple site management
• Enhancing user’s offline browsing experience

I think this is enough for this post, but I will do a blog post on all of the above areas in more detail soon.