There is no doubt that responsive design websites have been firmly established as the best way to deliver mobile compatible websites.

But what does this mean for the non-technically inclined people who want these sites? We offer this simple explanation which will help you understand what it means.

What is a responsive website design layout?

Quite simply, responsive layouts are the means by which we take that same content you see on the desktop version of your website and then presented on the different mobile devices.

It is based on using a single set of content and should not be confused with presenting alternate content for mobile devices which is quite a different matter.

Imagine if you will, you have a collection of photos and sticky notes all laid out to fill and A3 size piece of paper. Now take an A4 page, folded in half and try to place those same photos and sticky notes (all of different size and orientation) onto the folded piece of paper being A5 size.

They just don't fit! Well, that's our problem with putting your website onto mobile devices.

Now we can reduce the size of some of those photos and sticky notes which is exactly what happens with your website now. Everything is shrunk to fit into the page.

The problem is, we can read a text or see the images. We also find that some are off the page so we had to scroll up, down and sideways to bring them into view.

Not a pleasant experience so unless you are very determined, you generally give up.

How do I design a responsive website layout?

With a responsive layout we address the following key aspects:

• which elements (our photos and sticky notes) to reduce in size
• what size do we reduce elements to
• which elements do we not display
• what elements to be replaced with something else
• how we reorder the elements so they still make sense

If you haven't noticed it yet, responsive layouts for websites are becoming an additional design activity all of their own.

Whilst smaller websites and those with simple page content layouts are not so much of a problem, creating responsive layouts for many new websites requires considerable thought and planning as these invariably a more complex in design.

All responsive designs are based on the use of a standard grid layout.

What is the grid layout?

The grid layout is used to position those elements in your page in a consistent manner best suited for presenting on different devices.

There are unofficial standard grid systems such as 12 columns or 960 grid commonly used with the most common, Twitter bootstrap, been adopted by most developers. There are a few others also commonly used but all of them share the same principles of design.

It is essential that any responsive design uses such a grid system with accompanying style coats to control how content is displayed in the different device browsers.

Can I convert a non-responsive website to responsive?

My point above about using a grid system for your responsive design is critical. The problem is most websites have not been designed utilising any such group system and certainly all the style coats (these are the CSS stylesheets) will not be set up for mobile devices.

The long and short all is that you can't simply "convert" a non-responsive site to a responsive design. You have to redesign site template and page layouts and then rebuild it will.

It is in fact not only easier, but more efficient to build your site again from scratch that is to retrofit responsive designs and styles to an existing set of code.

Why should I create a responsive website?

In the long run, you can't avoid this decision. With the growing use of mobile devices used to view websites and with the distinct SEM advantages that come from a mobile compatible version, you'll need to address this one-day.

As to when you should provide mobile compatible versions of your websites will be determined by your mark. You can monitor the level of mobile viewers of your site through Google analytics which is your best guide.

Do responsive websites cost more?

On the one hand, yes. We are finding that as a general guide, responsive solutions can be an average of 30% increase on costs. On more complex science this can be higher.

On the other hand, your website is probably due to an update stop because of standards being somewhat adopted and with tools such as Twitter bootstrap, a certain amount of development and ongoing support costs are reduced.

You will also find that your new site will include many improved user interface design features that will improve the experience visitors and engagement with them. This all should lead to improve conversion as your previous website.