There is no doubt that responsive design websites has been firmly established as the best way to deliver mobile compatible websites. But what is this really mean that the non-technically inclined people who want these sites? We offer this simple explanation which will help you understand what it means.
So what is a responsive 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. 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 in to view.
Not a pleasant experience so unless you are very determined, you generally give up.
How Is Responsive Design Deal With 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.
The Grid System
All responsive designs are based on the use of a standard grid layout. This is used 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 column 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.
So What About Converting Your Current Website
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.
So should I go to all this trouble to 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.
Will This Cost You More?
On the one hand yes as well. 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.