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.

---

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.

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.

More:

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

• Responsive Web Design: What It Is and How To Use It
• Adaptive layouts using responsive web design
• Adaptive User Interface: Smartphones vs. Tablets
• Beginner’s Guide to Responsive Web Design

---

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.