The Mobile Spoon - Gil Bouhnick's Mobility Blog
Home My Favorites iOS Apps Talk To Me About

Nov 1, 2011

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.

adaptive-ui

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.

More:

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.



10 comments:

Metformin said...

Very nice article to read about the HTML5

custom web application development said...

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.

Pricewise Events said...

I think responsive web design has its own advantages and disadvantages.

Natural Remedies said...

I think this kind of web design and application is very advantageous and beneficial for everyone.

Rivendell osprey FL said...

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.

Web Promotion Singapore said...

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.

Seo companies india said...

Superb quality content. The web design discussion is quite better and is effective

Post a Comment