What is Responsive web design?

Responsive web design, mobile first & other factors to consider when having a website designed for your company.

Responsive web design is when a website has been developed for its web pages to be displayed correctly should a user be viewing the site on a mobile device. By correctly I mean the fonts, graphics and buttons scale proportionality to the dimensions of the screen and allow for easy navigation without the user having to scroll frantically around the web page and zoom out and in repeatedly. As strange as this sounds and as much as we take it for granted I still come across websites that are guilty of this. Often they are several years old having been designed before the rise of smart phone usage. I'm still at a loss as to whom is to blame for these, the web designer who stopped learning in 2009 or the company who pays a monthly hosting fee and does not seem to mind the outdated look and the detrimental effects it has on their online presence.

Who came up with it?

“Ethan Marcotte coined the term responsive web design (RWD)—and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. ”(Wikipedia)

The main aim of Responsive Web design

The main aim is to to be unobtrusive as possible and not detract from your users experience when viewing a site. Consider the following information from Think With Google:

• As page load time goes from one second to five seconds, the probability of bounce increases by 90%.
• 63% of smart phone users are more likely to purchase from companies whose mobile sites or apps offer them relevant recommendations on products they may be interested in.
• 51% of smart phone users are ore likely to use a company or brand's mobile app when browsing or shopping on a smart phone because they can get rewards or points.
• 50% of smart phone users are more likely to use a company or brand's mobile site when browsing or shopping on a smart phone because they don't want to download an app.
• 30% of smart phone users are more likely to use a company or brand's mobile site when browsing or shopping on a smart phone when making a one-time purchase.
• 58% of smart phone users feel more favourable towards companies whose mobile sites or apps remember who they are and their past behaviour.
• 60% of smart phone users have contacted a business directly using the search results (e.g. “click to call” option)

Photo by Vlad Alexandru from Pexels

The following graphs show the increase usage of mobile devices compared to desktop usage.

What is mainly responsible for responsive web design?

Responsive web design is predominantly the responsibility of CSS or Cascading Style Sheets. Consider CSS as the cosmetic touches added to a website to give it that final look and feel. Think of a website as boxes within boxes. Your navigation bar is a box and within that box are the individual menu elements or buttons. The main body of your page is another box with different elements, or boxes, inside it. When styling a page these individual elements or the “boxes” they are contained in are given CSS styles to make them look and behave in a certain way. Media queries in CSS allows one to specify at what “break points” in screen size certain elements act and how they are displayed. A button for example on a mobile device may be larger than on a desktop display to accommodate a user selecting it with their finger, which has a larger surface area than a mouse pointer.

Bootstrap to the rescue

With the help of Bootstrap, which is a CSS Framework that has become the industry tool of choice, one can apply specific settings that speed up the design process. As per Wikipedia, Bootstrap was created by team from Twitter in 2010 as a framework to encourage consistency across internal tools. Prior to this developers in Twitter were practically working in silos and any changes that needed to be implemented were cumbersome due to various members of their team using different styling techniques. This led to inconsistencies and a high maintenance burden.

The great thing about Bootstrap is that it encourages you to design a web page “mobile first”. The understanding is that a web page will more likely be viewed on a mobile device as can be seen in the graphs above. This forces the developer to cater for the mobile user first by styling the page and emphasising features with mobile restrictions in mind and not leave it as an after thought after having first created a desktop design. Google also indexes sites using their mobile version first and has stated clearly that websites can be penalised inadvertently if they show less information compared to the desktop version of the site. Some may do this to try and speed up the download time of the page but it is not advisable. If your content is not formatted correctly for mobile devices it will be an issue for your page rankings. High bounce rates due to users not being able to navigate your site effectively as a result of poor layout design will contribute to poor search engine results page rankings.

Final thoughts

Make sure your website is consistent in terms of information shown on a mobile display as it is on a desktop. Ensure that the design and layout of the site is user friendly and that page load times are low.