What is Responsive Design (and Why do I need it?)

In the Olde Days (a few years ago), the majority of webpages were accessed by full screen desktop computer and laptops.  At that point, webpages were designed around large monitor sizes which seemed to be ever increasing.  As smart phones started to increase in market share, many websites used 'detectors' to decide whether to use a 'full screen template', or a narrower one which was more suited to the narrower screens on the cellphones.

As the screen sizes on the cellphones increased, both in size, and in a wider variety of dimensions, devices like the Ipad got larger market share, make it impractical to try to come up with predesigned templates which could service all of the different screen sizes.

The answer to that became know as 'Responsive Design' where a single template was used which could modify itself dynamically according to what size of screen it was being displayed on.

If you have an older website which is not easily viewable on a hand held device or a small touch pad device like an Ipad, people will not stay on your website because it is difficult to view. Often the fonts are too small or they have to scroll horizontally to see that part of the website which does not fit on their screen.

This is now coupled with the fact that the major search engines are checking the performance of websites for compatibility with cellphones and other mobile devices.  Their program gives your a pages a score which is made up of a large number of factors including load time, file sizes, font sizes (for readability), button sizes (because touch screens require bigger buttons and more space around the touch sensitive areas to avoid accidental linking to the another page.

If you page scores low, you website will be placed lower in the search ranking results, making it less likely that you website will be visited in the first place.

It is expected that Google is starting to rank websites based on their mobile ranking since more searches are coming from mobile devices (smart phones and pads) than traditional desktop computers and laptops.  Though it is reported that they have said that they will 'not abandon desktops', they are clearly moving in the direction where the bulk of the web traffic is coming from.

When a Responsive Design webpage is viewed, it calculates the size of the viewing area and decides how many buttons will fit across the screen and how to arrange the content on the page.   As you will see in the example above,  for the Ipad (at the top left), it displays 2 rows containing 3 buttons per row.  In the case of the narrower Iphone beside it, the buttons are displayed as 3 rows of 2 buttons.

In addition to accommodating different screen widths, it can also adjust the template for the orientation of the screen.  In the example above, the Iphone is shown both held vertically and horizontally.  When the phone is horizontal (bottom image), more buttons can be shown so the display changes to 3 rows of 2 buttons.  Much less information can be displayed vertically on the screen bit it gives a larger image size though it require more scrolling up and down to view the page.