Responsive Web Design

• What is this about ? What's responsive ?

To explain you about Responsive Web Design in simplest way, I will quote the below examples ( some through snaps and some live sites ), and then we can discuss over the difference we understand.

1. Point your browser to http://blog.kpitcummins.com/

When in a full window view, you get to see the whole site. But what if i change the size of screen as described through below snap :

2. Now point the browser to http://apex.oracle.com/pls/apex/f?p=AASHISH_RESP

When in full window view, you see the site with 5 tabs on top for navigation, then a search box, and then five modules showing various kind of data. Now we try the similar thing as we did for KPIT blog, we change our browser window size.

Did you also witness the intellgent accomodation of the content and data ???

 

This is what is called "Responsive Web Design". Lets see one more example snaps I picked from a blog.

This explains the similar what we experience above.

3. You can also pay a visit to below test page which is a perfect example of RWD.

http://filamentgroup.com/examples/responsive-images/

4. One more and to say really the best example to see RWD in action is below site

http://arleym.com/

 

Please try keep shrikinking this page ( width wise ) and watch the hovering message change each moment you change the width.

 

I started with message "Be Fantastic" and it kept on changing as I moved a pixel(s) and the last message i see is "Be Big". Truely Awesome site !
 

• Why do I need it ? How does it help ?

As we are now acquainted with know-abouts on Responsive web design, we come with another sparking question on why do I use responsive web design.

To answer this, I will rent out few lines from one of beautiful blog I read. It says following :

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Please note Responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.

You can refer more details and additional ideas on following link :

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

• My Views :

I find Responsive web design, a real approach to satisfy the infinite resolution devices which would keep on coming. Even currently we have devices starting with a Xperia Mini 2.5 inch screen to a Galaxy Mega 6.3 inch screen to Samsung Tablets with 10" screen. We don't know what new comes out in near future ?

We do have a need to make our sites and web applications compatible to the size of computer's screen as well as the multi-size mobile/tablet devices.

I am seeing on developing Responsive Web sites using Oracle Application Express. Yes, it does support RWD, just switch over the theme for your APEX application to Theme# 25 "Blue Responsive" and you are done. You also need to play with Grid Layout to make it more perfecto !

Please share your experience with Responsive Web Design.