What is Responsive Web Design and how can it help you build better mobile web applications?

HTML5 has brought many organizations into building web based mobile applications.

This powerful yet fresh web technology enables building rich UI, plus it can support offline mode along with the database capabilities it brings, and it completely removes the burden of developing an app for each platform (iOS, Android, BlackBerry, WP7), or working with the app stores.

(I've written about HTML5 in the past and also about the raise of Mobile-web)

In order to have one web-based app that can run impressively on each form factor (namely: smartphones and/or tablets and/or laptops and/or desktops) – you can either develop the same application multiple times, each time with a different layout using the same logical code, or – you can use Responsive Web Design and build one app that will support not only all the platforms but also all the form factors. Impressive, isn't it? Let's dig into the details.

Adaptive Layout - Responsive Web Design

Responsive Web Design is a user interface design approach to create a UI layout that adapts itself to the environment it is running in. Components of a certain website or a web app will adapt to the device they are being displayed on; the screen size and screen orientation.
From mobile smartphones, to tablets and desktops - adaptive layouts will make sure the HTML and CSS code are optimized to the context and the screen, using flexible grids, and some advanced patterns.

Example? There you go – let's examine iOS Adaptive Layout:

  • When using the iPhone emails, you see either a list of emails or the selected email body.
  • When using the same email app on the iPad – you get to see a dual view – holding both the list of emails and right next to them – the selected email body.


This is, of course not a web design, as this is actually a native iOS application, but the idea is similar: you develop one app that makes the best out of every form factor and screen orientation it is running in.

Now imagine you build a web application. You can assume people will access it from either their smartphones, tablets or laptops – each has different screen size. Responsive Web Design allows you to build a single web app that will be optimized for each of those form factors.

Responsive Web Design

Here's a short video demonstrating some great Responsive Web Designs, notice how the layout keeps changing according to the width of the browser:


The principals behind Responsive Web Design:

Fluid Grids / Liquid Layouts:

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math

Media Queries:

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. CSS3 media queries allow you to gather data about the site visitor / browser and use it to conditionally apply different CSS styles. In mobile devices we will typically check for the minimal width and make a decision accordingly.

Flexible Images:

One major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.


You can read more about how to implement Adaptive Layouts and Responsive Design in here:

So what are the cons?

Of course, building a Responsive Web application or site require some additional investment. There are some acrobatics that needs to be made – loading different images in runtime, showing and hiding some elements, etc.

There are people who believe that those acrobatics are actually bad for mobile devices as playing with images, hiding elements, etc. are all "expensive" in terms of performance and memory – painful areas in mobile devices. You can read more in here:

11 reasons why Responsive Design isn’t that cool!

So there you go, something to get you going, there's a lot more to learn about before deciding whether to go with a Responsive Web Design or not, but I hope this article opened you mind a bit, and gave you some initial tools to start exploring your options.


Metformin said…
Very nice article to read about the HTML5
I never even heard about this Responsive Website Design... though I don't have a lot of experience. But my question is - is this design bad only for mobile devices or for PCs as well?
Designer sarees said…
WOW! I am very happy to know about this application. You have posted an awesome article. Great job.
jullia said…
Thanks for sharing such valuable information.Keep posting such great info for us thanks.
I think responsive web design has its own advantages and disadvantages.
I think this kind of web design and application is very advantageous and beneficial for everyone.
Thanks for sharing. It seems like Responsive Web Design would play an important role in website design in the future. I feel that Mobile and Tablet versions will be required since nowadays most people are now in favor surfing the internet through these gadgets.
Fashion Blog said…
Hey your article is just awesome, superlike. You have explained in very detail, I m so glad to know that how to use adaptive layouts and responsive design.
These blogs have helped us in a great manner and there is no doubt that one can get large number of advantages by reading them.
Superb quality content. The web design discussion is quite better and is effective
ajay ak said…
Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
Webdesining course in chennai
Sandra Antony said…
Mobile users are increasing day by day. So web designers need to consider about responsive web design that it should fit for all screen resolutions. So that it attracts more users. your blog explained it clearly. Thanks for sharing useful post!
Web Designing Company in Chennai
james john said…
The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post. infinite logo
I feel really happy to have seen your webpage and look forward to so
many more entertaining times reading here. Thanks once more for all
the details.

white label website builder
Anna Kieu said…
Keep posting such great info for us thanks.Thanks for sharing such valuable information. If you need can visit my blog Rochester website design
Thanks for your great post. This post obviously very helpful. Website design charlotte
Alex Kevin said…
Nowadays responsive web design is the need of every industry and business. Because now people use their smartphones to search anything online instead of desktop and laptops.
suvathi said…
I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
html Training in chennai
Unknown said…
Good job. Keep sharing post like this, it give knowledge to reader. Looking forward to seeing more from your side. Web design Lausanne

Popular posts from this blog

A List of All Operating Systems Running on Smartwatches [Wearables]

What's the meaning of "i" in iPhone, iPad?

Thank you for your support!