The Three R’s of Responsive Web Design

Introduction

Websites today serve not only traditional desktop monitors, but also televisions and handheld mobile devices like tablets and smartphones. Notwithstanding the myriad screen sizes, consumers, constantly connected and switching between devices anywhere anytime, expect the same degree of usability they experience across these devices. Therefore, it is both imperative and challenging for businesses to build a good multi-screen site that can deliver a consistently great user experience for all screens. That is especially true for smartphones, the fastest-growing devices in the multi-screen market, where screen space is at a premium.

How can websites provide for such an enormous range of screens and keep up with new screens of the future? The answer lies in Responsive Web Design. In this article, I am introducing the three key methods of designing for responsible web. They are Retile, Replace, and Resize, which I aptly coin the “Three R’s of Responsible Web Design“. First, let’s grasp the realities and challenges of the new multi-screen world.

Let’s Face It

In a 2012 Google’s study on “Navigating the new multi-screen world: Insights show how consumers use different devices together“, it was revealed that most people carried out their online activities using multiple devices as summed up in the infograph in Figure 1:

Figure 1: Customer Media Behavior (Source: Google)

 

Search Ranking Boost

On 21 April 2015, Google rolled out the mobile-friendly update that boosts the search rankings for mobile-friendly web pages (Figure 2). Refer to Google’s FAQs for more information about the mobile-friendly update.

Figure 2: Google Boosts Mobile-Friendly Sites’ Search Rankings

Hot on Google’s heels, Bing announced on 14 May 2015 that they would be introducing their own version of mobile friendly ranking in the near future.

Multi-Screen Friendly Options

Mindful of the consumer media behavior in the new multi-screen world and the mobile-friendly-favoured search rankings, websites must now meet the needs of consumers on all screens — from TV to desktop to laptop to tablet to smartphone — at all times. Whatever screen the consumers happen to be using, they want it to work right out of the box. That is especially true for smartphones and tablets, where consumers expect the same content and user experience from bigger screens without unnecessary gestures such as pinch and slide.

There are three basic methods you can adopt to implement a website that are multi-screen friendly: Separate URLs, Dynamic Serving, and Responsive Web Design.

Separate URLs

Each of the URLs hosts a different set of web pages optimized for a designated range of screen sizes. In this method, the web server detects the type of device that a user is using and redirects the request to the URL that host those web pages designed specifically for that device.

Dynamic Serving

A single URL hosting multiple sets of web pages each of which is optimized for a designated range of screen sizes. In this method, the web server detects the type of device that a user is using and deliver those web pages designed specifically for that device.

Responsive Web Design

A single URL that serves a common set of web pages that can render themselves differently on the fly in response to changes in screen size and orientation. With responsive web design, every web page is capable of automatically and dynamically detecting the size and orientation of its viewing device, and based on which, adopt the most optimal view to apply to that viewing device on the fly.

Both the separate URLs and dynamic serving methods are resource-intensive and costly solutions as they have to create and maintain multiple codebases of the same content. Furthermore, tweaking of existing code or developing new code to cater to new devices as they emerge becomes inevitable in the long run. In other words, they are not future-proof.

On the other hand, needing only a single URL, a single codebase, and having all the dynamic detection and responsive rendering carried out only on the client-side, i.e. the browsers, responsive web design is undoubtedly the most superior method for implementing multi-screen friendly website. Furthermore, it is also future-proof.

The Three R’s of Responsive Web Design

Putting a single HTML code across multiple screen sizes is feasible but not without changing its view for different screen sizes. A web page that luxuriously spans multiple columns across the screen of a desktop (Figure 3) will not fit well into the screen of a smartphone (Figure 4).

Figure 3: A View on Desktops

Figure 4: The Same View on Smartphones

It is, therefore, necessary to design different views that optimized for the respective screens of smartphones, tablets, desktops, and larger desktops based on the same content. In this respect, I have identified three key methods of designing responsible web. They are Retile, Replace, and Resize, which I aptly coin the “Three R’s of Responsible Web Design“. Let’s meet them one by one…

Retile

On larger screens like those of desktops, there is abundant width to have multiple sections of contents placing side-by-side across the screen (Figure 3). On smaller screens like those of tablets and smartphones, however, it is commoner to place these sections of contents one above another (Figure 5) so as to maintain the legibility and usability of the web page. In other words, you have to re-position, i.e. retile, some sections of your web page as a way to optimize the view for different screen sizes.

Figure 5: Re-tiled View for Tablets

Replace

On larger screens like those of desktops, a navigation bar usually displays horizontally across the screen (Figure 6). On smaller screens like those of tablets and smartphones, however, it is commoner to replace them with an icon that toggles the display of the navigation bar vertically (Figures 7 and 8).

Figure 6: Horizontal Navigation Bar for Desktops

Figure 7:  An Icon in place of Navigation Bar on Smartphones

Figure 8: Navigation Bar Expanded Vertically on Icon Click

Resize

It is not unimaginable that dimensions of large elements such as headings and images will need to be change in order for them to fit into as well as look right on different screen sizes.  For example, the dimensions that look fine on the screen of a desktop go awry on that of a smartphone as shown in Figure 9 below:

Figure 9: Oversized Elements on Smartphones

Undoubtedly, you will have to resize those elements as a way to optimize the view for smartphones as shown in Figure 10.

Figure 10: Optimally Re-sized Elements on Smartphones

Media Queries

To codify the three R’s of responsive web design, you will have to engage the CSS’s media queries at the various breakpoints where you want the changes to take place. A media query is a powerful CSS feature introduced in CSS3. It enables the same HTML content to be presented optimally over a wide range of devices based on conditions such as media type, viewport size, resolution, and orientation.

A media query consists of a media type, such as screen and print, and zero or more media features, such as width and height. The media type and media features of a media query constitute the expression which resolves to either true or false based on its containing medium. Check out some examples of media queries below:

@media screen {
  div {
    display: none
  }
}

@media screen and (max-width: 768px) {
  div {
    display: block
  }
}

@media screen and (min-width: 992px) {
  div {
    display: inline
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  div {
    display: inline-block
  }
}

The programmatic capability of CSS’s media queries combined with creative and innovative application of the three R’s of responsive web design, will enable you to put the same HTML content on devices of any screen features.

Summary

In this article, you have learned about the needs and rationale for multi-screen friendly websites. You have learned that the programmatic capability of CSS’s media queries combined with creative and innovative application of the three R’s of responsive web design, are keys to building multi-screen friendly websites.

The post The Three R’s of Responsive Web Design appeared first on Peter Leow's Code Blog.