According to a 2014 Ofcom study, 61% of Britons over the age of 16 now access the internet using a mobile device (up from just 39% in 2011). The growth in smartphone and tablet usage has revolutionised the way people access the internet, and today’s website design world is much more complex than ever as a result.iphone bsa

The small screens of smartphones and tablets present a challenge for web designers. A traditional web page is designed to look good on a standard desktop computer monitor. Unfortunately, that traditional page is extremely tiny on the 2-4 inch screen of a smartphone, so mobile users then have to zoom in to see the site. This is quickly becoming unacceptable however, as users’ expectations have evolved and now demand to be able to browse the web on their phones just as easily as on a desktop computer.

What is Responsive Design?

In the past, the trend for mobile web design was to create separate mobile-friendly versions of a website for each of the most popular screen sizes. They might utilise the same content across all the sites, but they still require their own web pages and the ability to detect the device being used.

Responsive design goes a stage beyond this. In order to accommodate the various screen sizes that the web can be being viewed on, a designer creates one website which responds to its environment and reformats its content in real time to create an optimal viewing experience regardless of the device used.

Instead of designing separate web designs for personal computer use, tablet use, general mobile use and then iPhone and Android apps as well, responsive web simply creates one site that morphs itself perfectly to perform well with each of these different platforms.

How Does Responsive Design Work? bsa mac

To see it in action, take a look at one of our recent projects – Try it first in a desktop browser and slowly make the browser thinner and wider. The layout will magically adjust itself to more comfortably fit the new width of the browser, even if the page is made as skinny as the resolution of a mobile phone.

Try viewing the website using other devices like your mobile, tablet, or netbook. As the size of the browser window is changed, notice columns collapsing into single paragraphs or breaking into multiple columns. Images will reduce in size and grids of thumbnails will adjust to fill the new screen size or disappear altogether.

Why should you Use Responsive Design?

Building a single responsive website has some key advantages over developing separate desktop and mobile websites. Responsive websites can give additional columns to display, for example, on larger screens. This allows information that would otherwise be further down the page (and still is, on smaller screens) to be visible on larger displays. In other words, responsive web design allows websites to make better use of visual space.

Responsive web design is also very useful when it is viewed on a mobile device and therefore needs to work fast. For businesses with their own blog, there is no real reason to create an entirely separate mobile site. Blogs tend to be text rich, so they can simply use responsive web design to make the text viewable in mobile.

Also, there is an SEO and user experience benefit too. How well a website is optimised for mobile makes a difference to how well it ranks in Google, so if you’re interested in appearing in Google’s local results for mobile searches, having a responsive site can be hugely beneficial.

If you’re interested in hearing more about responsive design, why not get in touch? Call us on 01305 542000 and speak to one of our friendly web design team.