What is Responsive Website Design?

Web Design

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.


Greg Tomkins

Director | Web Architect at

Top Left Designs was created in 2008 with the purpose of bring real business solutions to the web that reflected how businesses really wanted to work and could make the most effective use of the internet in all its forms. Since then the business has grown and evolved meeting the demands of its clients and the changes in web technologies and digital marketing.


Comments (5)
User
Greg Tomkins

Greg Tomkins, Director | Web Architect at

Let me clear up one point for John firstly - Responsive websites are designed for mobile devices, first and foremost! The principal of a responsive design is that it will display your web page content within the viewing screen of your mobile device in such a way that you should not have to zoom and pan your screen in order to read or enter data. The responsive design includes code to detect the type of device being used which is how it manages display of content on the individual devices. If you are being told what you are suggesting John, I would recommend you talk to some new developers who know what they are doing and of course feel free to contact me as well if you wish. As for having a dedicated mobile site - there are instances where I would recommend this myself - particularly if you are simply wanting to add mobile capability to your web visitors to an existing site that is not mobile compatible. The other instance where a separate site is advantageous is where you want to present a much simplified - cut down version of your desktop site to visitors. The problem is that whilst the first part of responsive design is to shuffle the information elements around, if you have a site with vast amounts of content and each element is quite large (as say in white papers or long articles in your blogs or long pages) then of course reading these on an iPhone is just not going to happen. Now whilst yu can control which elements of a desktop page are displayed or not displayed on the different devices, you may still be left with a page that just does not present well or fails to get the message across. You can sometimes find that due to the nature of your audience and how they want to process information, presenting iPhone specific content with less pages could be the way to go in which case developing a separate mobile version is a good idea. Depending on your CMS platform this may or may not be a lot of hard work. We use Business Catalyst for all our web solutions which provides us with 3 choices on how to deliver mobile compatible solutions - including responsive design, separate mobile site or a hybrid approach mixing the two - all from the one set of source code in the back end. I hope this clarifies things a bit more for you both and anyone else reading this article.

Smyle Lee

Smyle Lee, CTO at Bran New Pty Ltd

This is what I just looking for.

Thanks!

View all (5) comments