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.

Comments

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.
https://www.technologist360.com/
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
sandy p said…
Nice article, Thank you for sharing information, I believe Hyderabad is one of the best places to start a business and where we can find all the resources to improve our business. I love this Hyderabad as my startup is trying to make big with the help of a person who provides this Web designing company in Hyderabad in the affordable rates
Devon Wright said…
Thanks for posting this blog.If you are looking for Web Design Riverside, then you can contact designfleek.com for further details.
sofianan said…
Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
hr and payroll software in chennai
You have shared a very informative article here about the Responsive Web Designing. Really I agree with you, Responsive web designing is very helpful to build the better mobile web application. If you are interested to know more about the web design Manchester NH, Visit theportwebdesign.com
Shamsher Singh said…
Use prototyping tools
The design process based on UX or User Experience can be key to the success of an application. A prototyping tool will allow you to create and test a version of your application constituted by the aesthetic and functional elements without entering even the most technical part of the development.

Given the high cost of programming an application, it becomes necessary to test functionality and aesthetics. Its importance is such that during the last years we have been observing how the number of tools that allow the creation of prototypes and interactive designs has increased enormously. Designers and developers are starting to use more prototyping tools, which helps them to have an anticipated vision of how their user interface will look and feel. Even we use it to for a funeral homes website design and got awesome results. There are dozens of tools for prototyping and creating wireframes. We recommend InVision, Axure or Marvel as three of the most complete prototyping tools.
Thank you guys for posting such a fantastic information with us. I am hoping the same best work from you in the future as well. To know more about web design Bern visit
white label website builder
Vicky Ram said…
This post is really awesome! Thanks for sharing. I pinned it on pinterest!

web designing course

Web Development courses in Chennai
roman said…
I was really impressed with your interesting blog and the richness in the content.Thanks for sharing
website design


Rk Reza said…
"People keep asking what Web 3.0 is. I think maybe when you've got an overlay of scalable vector graphics - everything rippling and folding and looking misty - on Web 2.0 and access to a semantic Web integrated across a huge space of data, you'll have access to an unbelievable data resource." Semantic web is the an extension of World Wide Web in which web content is expressed in machine readable language, not just in nature language, so that user agents can read, process and understand the content using artificial intelligence imitating human behavior. In other words Semantic Web is an extension of the web where content expressed can be processed independently by intelligent software agents.The best Web Designer In Bangladesh
Aruna Ram said…
Amazing Article, thank you!.I am very glad to read your informative & practical blog. Kindly keep updating your blog.
Web development Training in chennai
Web Designing Training in chennai Velachery
Web Designing Course in Tambaramr
sumathi s said…
I wish to indicate because of you only to bail me out of this specific trouble. As a consequence of checking through the net and meeting systems that were not beneficial, I thought my life was finished.occupational health and safety course in chennai
Thank you guys for posting such a fantastic information with us. I am hoping the same best work from you in the future as well. To know more about web design Bern visit
white label website builder
jessica said…
Continue the good work and people will continue to come to your blog!
Website design,
jessica said…
Congratulations for this wonderful blog. I found it very informative and interesting too!!!
website design company,
Devon Wright said…
This comment has been removed by the author.
Devon Wright said…
Thanks for the update, will surely be aware of this. For any kind of Web Design Ontario then Design Fleek is the best company from where you can get online marketing service at very affordable price.
Thanks for sharing. It seems like Responsive Web Design would play an important role in website design in the future. App developers in Kenya feel that Mobile and Tablet versions will be required since nowadays most people are now in favour of surfing the internet through these gadgets.
swetha singh said…
Such an excellent and interesting blog, do post like this more with more information, this was very useful, Thank you.
airport management courses in chennai
Airport Management Training in Chennai
airlines training chennai

roman said…
I am fully satisfied with the information you have posted. Good job. Keep posting
mobile web development
Anna Kieu said…
Thanks so much! I am very glad to read your informative & practical blog.
Check out web reference: website design minnesota
The information that you have shared was really very useful and looks great to see and thanks for sharing the information with us.
website builder for reseller
Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

private label website builder
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

white label website builder
Devon Wright said…
Such a great an interesting blog that you have shared with us. Its really a knowledgeable blog for creating the websites you should get services from Web Design Ontario.
Marwan Arban said…
Great Post :)
shubham garg said…
Jeewangarg is the best SEO company in Delhi, India. We have a team of highly trained, professional & experienced people, who can give you an unmatched SEO experience. For more details feel free to call us on 9350809090.