Responsive web design – The next gen flexible web design!

Author: Nazish Ahsan | Categories: Design & Ux, Responsive

All companies today want mobile versions of their websites. The number of devices, platforms, and browsers that need to be compatible with websites is increasing day by day. Each of these devices can have variations in size, functionality and color. Some are in landscape, some in portrait, while others are square. Different devices, different capabilities, different screen sizes and resolutions, all have an impact on designing and developing mobile sites. With endless new resolutions and devices, the task of web designers and developers is becoming more and more difficult. It is practically not possible to create a website version for each new device and screen size. What does one do then? Should we merely drive visitors from one device or resolution and lose them elsewhere?

This is where Responsive Web Design or flexible web design comes into play.

Responsive Web Design is a concept that blends CSS, CSS3 and JavaScript to create fluid site designs that can expand, contract, rearrange or remove content based upon the user’s screen size. Responsive web design responds to the user’s behavior and environment. Instead of developing different sites for devices with different screen sizes and capabilities, one site reacts flexibly to display optimally on everything. It can range from a 27-inch desktop monitor to a three and a half-inch iPhone display.

In simple words, it is a methodology of developing a website that changes the layout according to the screen size of devices.

Here is an example of how a website with flexible design appears on different devices:

  • Browser Version:

responsive web design

  • Mobile Version:

 mobile design

  • iPad Version:

 Ipad design

A few years ago, the elements that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements could break a layout form when pushed enough. They could only give or take a few hundred pixels but often could not adjust from a large computer screen to a Netbook or iPad.

Now website designing has become more flexible in the literal sense. Web designers ensure that images are automatically adjusted and that layouts never break. The whole design matrix can now be a mix of fluid grids, fluid images and intelligent markups where required.

Responsive web design images are primarily fluid images that can be replaced by context aware images, an updated version for better designing. This particular technique serves the purpose of responsive designing in a true sense as the images are served at different resolutions, ranging from larger screens to smaller ones. The scaled images change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context. Responsive web designing is remarkably different from traditional designing in terms of technology & creativity. There are three very important elements in responsive web design:

  • Flexible Layouts
  • Flexible Images / Media
  • Media Queries

Flexible Layouts:

In responsive design, the first challenge is to design flexible, grid-based layouts. As the browser width changes, fluid grids will resize and reposition the content accordingly. In responsive web design, all the elements become proportional to the complete area. So, rather than a column being 331px within a 960px site, it becomes a certain percentage of the overall width of the screen. Ultimately, this allows the design to adapt to different screen sizes.

Flexible Images/Media:

As obvious as it seems, adjustable images are very important. You can resize the image on the fly, or dynamically crop the image. By combining both methods you are enabling the image to resize automatically.

Media Queries:

Media queries allow you to determine the type of media the viewers have access to and the physical characteristics of their device and browser. It means you can set parameters for what gets shown and how. You can show the 3-column extravaganza on a big screen and 1-column mobile version on a Smartphone. Media queries behave similarly to conditional comments. For example, you can have one stylesheet for a large display whereas different stylesheets for mobile devices with different widths. Media queries allow designers to create multiple layouts using the same content. To achieve scalability, CSS media queries are used to apply different page styling according to certain parameters, like min-width and orientation.

There are great benefits of having a website with flexible design – enhanced search engine optimization, better usability, better customer acquisition & engagement and much more.

But do people realize the importance of responsive web design?

According to Mongoose Metrics, a tracking and analysis firm, only 9 percent of the sites will be mobile ready by the end of 2012. Another study by Compuware, a software and services provider shows that 57 percent of the users will not recommend a company with a bad mobile site and 40 percent of them will prefer a competitor’s site rather than using a poorly optimized mobile site.

Increased competition, more choices and a weaker economy have created a buyers’ market. Instead of being sold to, customers drive sales process. While it’s crucial to build relationships, it is important to adopt digital engagement capabilities to maintain relevant, meaningful dialog with the audience.