Responsive web development: A revolutionary way of creating web designs

Considering the number of different-sized devices available today, crafting websites to provide uniformly optimal viewing and an interaction experience that ensures easy reading and navigation with a minimum of resizing, panning and scrolling is the need of the hour. This is where responsive Web development comes in.

The world of electronic display devices, like mobiles, is expanding by leaps and bounds. On the one hand it gives us, the users, more and more options to view the same content. And on the other hand, it gives Web developers sleepless nights. Because now, their designs must provide an optimal viewing experience on an ever-increasing set of platforms, devices, browsers, resolutions, etc.

Today, every client of a Web developer wants a mobile version of the website, because it is the need of the hour. One design for BlackBerry, another one for iPhones, and others for iPads, Kindles, Android phones, and so on. And all those versions must be compatible with various resolutions.

But in the rapidly changing world of mobile devices where screen sizes, pixel resolutions and browser technologies are changing every day, we have reached a stage where it is practically impossible and impractical to create or manage different versions for different resolutions and varying sets of devices.

The responsive Web design (RWD) approach is a one-stop solution to end this madness of creating different versions of the same design to support various viewing devices and resolutions. It is inspired by the idea of responsive architecture, wherein physical space can respond to the presence of people passing through it. Ethan Marcotte, a renowned Web technologist, wrote an introductory article called ‘A List Apart’ about the approach. Transplanting the same discipline on to Web design, we can arrive at a similar but a whole new approach of designing self-adjustable Web designs according to the viewing device.

By definition, responsive Web design is an approach to designing a website such that it gives optimal viewing, and an interaction experience that ensures easy reading and navigation with minimum resizing, panning and scrolling across a wide range of devices.

Its inspiration, responsive architecture, uses robotics and motion sensors to accomplish the task. Web design requires a very abstract way of thinking and involves the use of different technologies. Certain technologies and ideas that are already being used by Web developers are fluid layouts, media queries and scripts, CSS, etc, in order to reformat Web pages automatically.

Do not for a moment mistake this approach as being only about adjustable screen resolutions and automatically resizable images. It is, in fact, a completely revolutionary way of thinking about Web design.
Let’s look at some of its features and a few that are still in the process of evolution.

Adjustable screen resolutions
With every new day bringing up a new device with a new screen resolution, definitions and orientations, the question is: how does one design a website that fits in the portrait and landscape format at the same time. Flexible layouts seem to solve this problem to an extent.

As the name suggests, these layouts keep everything flexible according to viewing requirement. While this approach is not a complete fix, it’s a perfect solution for the devices that support shifting from portrait to landscape orientation, instantly.

The Web page in Figure 1, gives readers a perfect idea of how flexible layouts can be useful. The design in this figure can be created using fluid grids, fluid images and smart markups, wherever needed. To know more on how to create fluid grids and fluid images, check out the Reference section at the end of the article.

Flexible/fluid images
One of the major issues in responsive Web design is working with images. The idea behind fluid images is to deliver images in the maximum size they will be used in. Here, we don’t declare the size of the image in the code but let the browser resize the image as needed, while using CSS. There are many techniques for resizing images accordingly.

Let’s look at some of the most popular options.

CSS’s ‘max-width’ (img {max-width: 100%}): It works as long as no other style overrides it. It makes sure that the image loads to its maximum size unless the viewing area is smaller than the image size. Here, ‘100 per cent’ means 100 per cent of the screen and browser width and when that 100 per cent is smaller, the image shrinks as well. However, ‘max-width’ is not supported in Internet Explorer.

Responsive images: The issue with the above approach is the image download time. Because, if the original image is designed for larger resolutions and even if it is resized for a mobile device, the download size still remains the same and may be slow.

Responsive images solve this problem by shrinking the image resolution on smaller devices. This implementation requires a little extra effort to create a few more files.
A JavaScript (rwd-images.js), the .htaccess file and the image file can all be put in an HTML tag to reference both smaller and larger resolution images:

<img src=”smallRes.jpeg” data-fullsrc=”largeRes.jpeg”>

This will download and load the ‘largeRes’ image for any screen larger than 480 pixels; otherwise, it will load the ‘smallRes’ image.

To see the content or download all the files needed, refer to the GitHub location in the Reference section.

Stopping iPhone from resizing the images: One feature of iPhone is to resize the images automatically to fit to the screen. Hence, with the introduction of flexible images, iPhone still adjusts the images even when they are delivered in optimal size. A workaround is to use an Apple-specific meta tag. Place this tag below the <head> section and you are done.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0”>

Here, setting the initial scale to 1 overrides the default image resizing feature.

Media queries

CSS3 has introduced a powerful tool in the form of ‘media queries’, which actually allows Web developers to inspect the physical characteristics of the device rendering their work.
For example, let’s look at the following query:

<link rel=”stylesheet” type=”text/css”
media=”screen and (max-device-width: 480px)”
href=”smaller-res.css” />

Here, we are querying is equal to or less then 480px, so load smaller-res.css ; otherwise, just ignore the link altogether.

Now, a media query is not only restricted to the ‘links;’ tag but can also be included in CSS either as the @media rule or as a @import directive.

Here are sample code snippets for the same:

@media:
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

@import:
@import url(“shetland.css”) screen and (max-device-width: 480px);

In conclusion, media queries are conditional comments. By using them, rather than targeting specific versions of the browser, we can correct issues in our layout.

JavaScript

Another method to create a RWD is to use JavaScript, especially for the devices that don’t support CSS3 media queries. Shown below is a simple jQuery snippet that detects the browser’s width and changes the style sheet accordingly:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(window).bind(“resize”, resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();

// If width width is below 600px, switch to the mobile stylesheet
if(newWindowWidth < 600){ $(“link[rel=stylesheet]”).attr({href : “mobile.css”}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth > 600){
$(“link[rel=stylesheet]”).attr({href : “style.css”});
}
}
});
</script>

Showing and hiding content

Creating responsive Web designs should not only be about porting content and making everything fit on every view port. But as developers, at times, we do want the choice of being able to hide some content in smaller resolution screens compared to what is being displayed on a bigger layout. Fortunately, CSS provides a simple display tag to hide a block of HTML content.

We can declare display: none for a HTML block in a specific style sheet, or detect browser width and do it through JavaScript. Also, the other way around, we can hide some content that is specific to mobile devices from bigger screens. Refer to the References section for an example of the same.

I have tried giving an overview of the problems that the Web development world is facing and the approaches to countering these challenges. There is a lot of work happening in this area, and this gives everyone an opportunity to test their mettle.