Posted by Roger

For those that are uncertain, I wanted to take a few minutes to describe what is meant by responsive web design and what the business benefits are to you.

Going back 5 years, very few people used their mobile phones to access the internet and tablets were in their infancy, so web sites were viewed on laptop or desktop screens.  Because of this, web sites tended to be a fixed width such that they would fit comfortably within the most common screen sizes.

Problems

With the development of mobile and tablet technology and the increased speed of mobile networks, it was natural that people wanted access to web sites from these new devices. There were 2 problems:

  1. the web sites took a long time to download and
  2. the web sites were practically unusable because the text was too small to read and links were too close together because the sites had not been designed for use on smaller screens.

As an example of problem 2, take a look at this site…

Not responsive web design The entire width of the web page (which was intended for a much larger screen) has been squeezed into the width of a mobile phone screen. As you can appreciate, the text is too small to read and it would easy to make a mistake when clicking on a link.

Of course, you can zoom in on a smartphone or tablet and so increase the size of the text so that it is readable. However, what often happens then is that some of the text falls off the side of the screen so you are forced to pan right and left to read a full line.  Clearly, this is not at all satisfactory.

Solutions - Responsive Web Design

The challenge for web designers and developers is to produce web sites that look good, are readable and usable on any size screen. This means that the layout of the components of the page has to adapt itself to the screen width. This is what is meant by responsive web design.

The web sites we design and develop here at AttractMore Web Design are responsive as you can see in the images below.

Responsive web design As you will see, the layout on a desktop screen and a laptop has 2 columns, whereas on a tablet and a mobile a single column holds all the content. The information contained in the right hand column shown on the wider screens is displaced below the main content on tablets and mobiles. The text remains readable at all screen sizes, links and buttons are big enough so you can click them without hitting an adjacent link or button in error.

Business Benefits

If your web site is unreadable or unusable on a tablet or mobile smartphone you are likely to be losing business - people will not tolerate sites that they have to struggle to use. According to a survey by Techcrunch, 2013 will be the year in which more people use mobiles than desktops/laptops for accessing the internet. It is essential that your site can be used by people whatever type of device they happen to be using otherwise you are reducing your audience. So if you want a web site that looks good and works well on devices of all shapes and sizes, please get in touch - we can help.

If you have any views about responsive web design, please feel free to comment below.


More from the blog

Website Risk Management

Managing the risks of having a business website

Website risk management is not a topic that receives a great deal of attention but in this article I’d like to talk about one particular aspect of the subject and emphasise the need for ongoing support and maintenance of business websites.

Read more

Launch of New Website for Artist

New website for an artist

This week we have launched a new website – it’s the latest version of the site for Sue Heron who is an artist based in Huddersfield. Sue specialises in painting landscapes, people and animals. This is the second website we have created for Sue and in this new version Sue was keen to change the background colour to black so as to make the artwork stand out more from the page. The design has been simplified so as to place the focus firmly on the paintings and there is very little colour on the site other than that provided by the artworks.

Read more