What is Responsive Web Design (RWD) ?

What is Responsive Web Design (RWD) ?

Responsive design is a major component in web development that must cater for device diversity and an increasing number of mobile users.

According to Phillip Kissonergis’s resport in SMS global, the penetration of smartphones in the year 2015 in the world is  64% in the UK,  followed by the US with 57%, Germany at 54%, 44% in Japan, 41% in China and  40% in Russia out of a total of 2 billion users worldwide. One of the fastest growing markets is the Asia-Pacific ring due to the drop in price of the devices. By 2017 ¼ of the World’s population will own a smartphone.

According to the Pew Research Center:

Nearly two-thirds of Americans are now smartphone owners, and for many these devices are a key entry point to the online world.”

10% of Americans report that the smartphone is the only point of access to the internet, and 7% report that they have no broadband access at home and no other way of getting online.

According to Smart Insights as of 2015 the average American spent more time on a mobile  device than on a desktop or laptop.

How does this affect Web Design?

Despite the statistics on mobile use, I feel that one model does not fit all sites. Before determining whether a site needs to be mobile friendly or not, I believe that we first need to determine marketing strategy and reach.

Many small businesses are doing extremely well without a digital footprint. They have been in existence for years, have a loyal clientele, and are perfectly satisfied with the status quo. In order to keep up with the times they might like to have a small informational website. Responsiveness might not be their priority, since the goal is to have a minimum digital presence, but not necessarily to encourage new business.

For new and existing businesses looking to increase their customer base, the impact of a responsive website cannot be ignored.

What is RWD?

The first websites that acknowledged the existence of mobile devices built the content of the page as a narrow column in the middle of the desktop screen. The same page when viewed on a mobile device would scale to fit the screen and mimic the content of the desktop version. Even with this consideration, the content is difficult to read.

When building a new site or updating an existing site, we need to determine whether we want an adaptive or responsive site. Both look good on mobile. There is a difference in technology and approach.

Responsive web site

Responsive design images showing breakpoints curated by Eivind Uggedal(@uggedal).

In responsive web design (RWD), the page is delivered to the user’s device and is resized according to the browser window. Breakpoints for different sizes determine layout and elements according to the size of the current window. There may be between 3 and 6 such breakpoints and if you resize the browser window, you can actually see the different layouts. Try resizing the browser window for The Washington Post to see different layouts.

In adaptive design, the server determines the attributes of the device’s viewer prior to delivering the page, and then delivers the  data accordingly. Try browsing CNet website and notice that resizing the browser window causes the content to appear cut off.

Both approaches take mobile and other small devices into account which means that one website has multiple layout designs suited to different devices. A mobile user is interested in a more focused perspective and measures effectiveness according to the ease he experiences when carrying out tasks. Smaller, compressed images and less columns and spaces are appropriate. Ultimately, the aim of a website is to promote content, and we want to avoid a scenario where the user abandons the site due to the time lag while the images load and excessive panning and scrolling necessary to locate the relevant content.

The Big G

According to Pew Research Center 83% of  search users prefer Google search engine. This has a direct impact on the importance of the Google algorithm on web site development. In lay terms, there is a mathematical formula that runs in computer programs that determines which pages are served first when we search. According to Google there are more than 200 computer programs that are processed for each query looking for clues from keywords in the search string. The results of these clues determine page rank. The user sees the paid results first, followed by organic results. Unless the search is very specific, there can be thousands of results. The typical user will screen the first results page followed infrequently by two more pages. (The statistics are based on the number of clicks on the results pages.) If a specific website does not appear within these first three pages, the chances of being found on a generic search are slim. The aim of the web developer is to improve the chances of the site appearing in an organic search. This is very challenging for the simple reason that we do not know what the Google algorithm is. As of April 2015, Google informed the online community that one of the parameters is responsive web design with a preference for one template that will serve all devices.

Effectively, web sites that are not responsive will be penalized in the page ranking formula.