Responsive Web Design

You Are Here: Home » Responsive Web Design Explained

Responsive Web Design Explained

by | Nov 15, 2013

How Did the Concept of Responsive Web Design Develop?

In recent years, as internet connected mobile devices were becoming more and more popular, many companies tried to cater to this market by building a separate mobile optimised website. This worked by first detecting the type of user device then sending them to a different URL, usually a separate subdomain in the case of mobile devices.

Usually this would be something like m.yourdomain.com.au.

For example, you will notice if you visit Facebook on your desktop computer that the domain in the browser address bar is https://www.facebook.com.

 

Facebook Desktop Version

Facebook Desktop Version

 

However if you visit using your Smart Phone web browser, you will be automatically redirected to the domain https://m.facebook.com, the ‘m‘ in this case standing for mobile.

 

Facebook Mobile Optimised Version

Facebook Mobile Optimised Version

 

The Pitfalls of Separate Mobile & Desktops Websites

The advantage of building a separate mobile optimised site was that you could reach a large market share by offering them easy viewing and navigation of you web content. However the challenges in keeping your site content updated are greatly increased by the requirement to duplicate changes across two different versions.

 

Responsive Design is Great for Your Customers & Easy for You to Update

Responsive Web Design was developed as a solution to this and has really taken off in the last year or two. Essentially, a responsive website allows you to build a single website that adapts its layout and content intelligently, depending on the screen size and device your customer is using.

This massively cuts down the administration work required in maintaining your site content, while at the same allowing you to serve highly usable and readable content to a huge and growing market sector.

 

But Why Do We Need Different Designs for Mobile & Desktop?

The need to serve adapted layouts and content for smaller mobile screens can be seen by visiting a site that does not offer either a mobile version, or a responsive layout, on your Smart Phone.

For example, if we visit Carpet Cleaning Sydney, you will see that they have a desktop only website, which displays well on a large PC or Mac screen;

 

Desktop View of a Non-Responsive Website

Desktop View of a Non-Responsive Website

 

However, if we visit the site on a small Sony Xperia Tipo Smart Phone you will see that the entire content is zoomed out to fit the whole site into the tiny 320px by 480px screen.

 

In order to read the content - and be able to read and select the correct navigation buttons etc - it is therefore necessary to do a lot of ‘pinch and zoom’ and scrolling around which quickly becomes very frustrating.

 

Mobile View of a Non-Responsive Web Design

Mobile View of a Non-Responsive Web Design

 

How Responsive Design is Screen Size Adaptive

Now, let’s look at the difference a Responsive Web Design layout can make.

If we take the example of one of our client’s websites, JM Cash N Gold Services and view it in a desktop browser, we see the following;

 

Desktop View of a Responsive Web Design

Desktop View of a Responsive Web Design

 

Now this time when we then view using the Sony Xperia Tipo, we see that the design, layout and some of the functions have changed.

 

Responsive Web Design Mobile View

Responsive Web Design Mobile View

 

Firstly, we notice that the whole site has rendered down to a single column and that the main column content can be easily read without any pinch and zoom. The text in this column now occupies almost the entire width of the screen and is set to an very legible size.

Content that was previously on the right hand sidebar has now moved underneath the main column, and again occupies the whole screen width for easy consumption.

We can also see in the following screen shot that a number of other differences have occurred, including;

  • Logo – This is now centered and occupying the whole width of the top of the screen
  • Call Us – This has changed from a simple image with the phone number on the desktop site to a ‘Tap to Call‘ button for smart phones, which allow the user to easily make the phone call to that number with a single screen tap
  • Navigation – The navigation paradigm has also changed from the regular rollover style buttons on the desktop, to a much easier drop down menu which activates the phone’s inbuilt navigation menu system
  • Slide Show – You will also notice that the slideshow image has gracefully and automatically scaled to the width the screen, so there is no horizontal scrolling required to view it

 

 

Note the Change of Layout & Function

Note the Change of Layout & Function

 

See the Difference Even on Your Desktop Web Browser

In fact it is not actually necessary to view a Responsive site on a mobile device in order to see how it changes with screen size. It is possible simply to click and drag the size of your desktop browser window and view the intelligently adaptive layout and function.

To do this;

1. Click the ‘Restore Down‘ button on your browser;

 

Click the Restore Down Browser Button

Click the Restore Down Browser Button

 

2. Then click and drag to resize;

 

Try Different Browser Sizes

Try Different Browser Sizes

 

Get Your Own Piece of the Action!

It is becoming crucial to cater for the mobile browsing market which is predicted to surpass desktop browsing by as early as 2015, so you better be ready for the revolution!

You really need to stop offering your mobile visitors a frustrating experience, or doubling up on content updates with a separate mobile version.

Responsive Web Design is the way of the future so Contact Us Today to see how we can help you develop a beautiful multi-device website that will take advantage of the huge and growing mobile source of enquires, leads and sales.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Get a FREE Consultation