Why Responsive Website Designs Matter

I had previously blogged about my prediction that one day more than 50% of all web traffic would be from "mobile devices".  At the time, I blogged “Smartphone adoption marches on, with 44% of mobile phone users owning a smartphone, compared with 18% in 2009, according to Nielsen” (Post link here - http://technoracle.blogspot.com/2012/01/mobile-tipping-point-five-key-facts.html )

While this prediction was shared by most analysts, no one at the time had predicted that it could rise to over 85%.  During the process of building a recent website for Canadian Cybertech, I perused the server logs to review how the website was being used. To my surprise, we recorded 86% of all engagements were on phones or tablets in November 2018.

So what is a responsive website and why is it critical to have?  Responsive website templates and layouts adjust dynamically to be viewed on almost any sized screen.  They also adjust their layout based on screen orientation.  The opposite pattern of responsive design was once called "keyhole browsing", a term used to denote the rather unpleasant experiences of trying to view a statically laid out website using a small screen.

Most websites you can find today using Google, Yahoo or Bing will be responsive as all three have been known to elevate search engine rankings higher for a responsive website.  Not using a responsive layout can cost you dearly in terms of potential traffic.

So why else is it so important?

To help people understand the differences, here are some examples.  The first graphic shows the opening layout of the Powell Street Salon website on a normal sized computer screen.

The background graphic is shown fully, the menu and other elements are scaled accurately for the screen size and the site has a very spacious look.  The same website on mobile automatically adjusts, as shown below.

Note the menu has collapsed into the three bar icons and the background photo has been cropped without compromising the integrity of the layout.  The font sizes have been adjusted to be readable on the device and the text flows to a more practical layout.

The anti-pattern of responsive can be quite horrible for any mobile user.  Here is a website I found that does not use a responsive design.  First the normal sized computer screen view.

Note that the page elements are not very well aligned as the HTML and CSS code has not taken into account that computer monitors can range from the archaic 640 X 1080 pixel resolution to newer Ultra HD screens with resolutions of up to 4K.  The real horror comes from the first view on a mobile device.  More than half the content disappears.

When the mobile phone is re-oriented into landscape mode, the trouble continues.

Consider now how your business would be perceived if your website was not responsive.  Using the same ratios as the Powell Street Salon, 86% of all your websites visitors could have been so riled up by a bad website experience they likely would have likely clicked on one of your competitor's websites.

The key takeaway here is that most businesses cannot afford to alienate four out of every five of their potential customers.

If you are not yet using responsive designs, please contact us and we can help.  Packages range in price from $500 and up.