The Secrets Behind Responsive Website Design That Every Landlord Should Know About

Smartphone sales have increased throughout 2011 and are now accounting for over half of all phones sold in Canada, according to Duncan Stewart, Director of Deloitte Research Canada.  Tablets are also gaining ground as retailers are noticing a decrease in traditional PC sales and an increase in tablet purchases.  These purchasing trends are having an impact in how consumers are accessing the Internet at home.  

Many households now browse the Internet on mobile devices on personal time.  With this shift in behaviour, website developers have seen a rising challenge when designing and developing websites.  The question has now become, "How do we accommodate all the different types of screen resolutions available in the marketplace?"

Traditionally the Internet was accessed only from a laptop or PC and, depending on the user's settings, the screen resolution always ranged between 800 pixels to 1600 pixels wide.   To accommodate for all screen sizes, website designers simply stretched the background image to cover the increased screen space. 

However, times have changed and so too have our screen resolutions.  Now designers need to accommodate for mobile devices, tablets, laptops and PCs. This means that their website design needs to accommodate sizes ranging from 400 pixels to 1600 pixels wide.  It no longer works to simply expand the background image to fill the screen – a new technique needed to be adopted – and that technique is "responsive website design".

 

What Is Responsive Website Design

Responsive website design is a term that describes how a website reacts to the changes in screen resolutions on a user's viewing device.  As you will see in the example images below, the actual layout changes when the resolution of the screen decreases.  This means that elements such as the navigation bar, placement of the company logo and images, and text all respond differently in regard to their size and placement depending on the screen resolution.

 

Examples of Responsive Website Design

In this example you can see the logo and main navigation bar begin to change when the resolution decreases.  You can also see the elements towards the bottom change from a three-column layout into a two-column layout. 

When the website shrinks even further into a mobile screen resolution, the sub-navigation circles re-order themselves into a square pattern and the main navigation menu shrinks to fit below the company logo.

 

What Are The Benefits Of Responsive Website Design?

Search Engine Optimization (SEO)

The alternative to developing a responsive website that meets all device needs is to develop multiple websites that cater to the needs of each set of devices (one for PC/laptop, one for tablet and one for smartphones).  The drawback to this strategy is that maintaining these sites becomes expensive, and the SEO value of the websites' diminishes.

From a search engine perspective, each website needs links and/or redirects to get customers to the right version of the site. The redirects may hinder the SEO value of the websites, as the search engines struggle to index the sites.  Having one responsive website means only having one set of links to build, and no annoying redirects to add to server load, site speed and maintenance hassles.

Customer Browsing Experience

Responsive designs ensure that customers on any device will see the majority of the content on your website easily and efficiently.  This drastically improves their overall browsing experience.  An improved browsing experience is key when trying to retain the interest of customers. 

Compuware, a research firm in the US, states that 40% of website visitors have turned to a competitor's website after a bad mobile experience.  In addition, 23% of visitors cursed at their phone when a website didn't work.  Leaving customers frustrated will their browsing experience will not lead to positive or profitable results.  Responsive design can help avoid this situation.

 

How Do I Get Started?

If you are interested in redesigning your website utilizing a responsive design, please contact us for more information.  One of our sales representatives will be happy to discuss this project with you, and provide you with a free, no-obligation quote.