Sunday, 20 October 2013

Responsive Web design…What is this , and how to start?

The Year 2013 has been the year of responsive design!
Tablet sales are set to cross 100 Million this year
Major social sites have seen 30% increase in their traffic VIA mobile and should see 50% at the end of the year!
Lot of work for us Web designers and developers...
According to Nielsen, the majority of U.S. mobile subscribers now own Smartphones,
Not feature phones.
In short: The Web is walking everywhere! And we need to build that many roads.

Is this website Responsive..??
The whole idea of me writing on this: “Hey here is a PSD single please make this responsive!”
These are the words of a person one rarely finds nowadays! Cause he is stupid...super stupid.. Or better still check his pay slip.. He is connected to your boss! However, If is your client asks  be polite “ where are the responsive layouts sir!” you see he knows! After all he is GOD!
For others here is my POV ( see I am using jargons… I am an IT geek!)

Responsive vs Fluid Design. Are they same? 

Fluid Design by definition is a mass that takes the shape of the container it’s in. Be it the pure malt scotch glass with ice or the palm of your hand that holds the holy water for you to sip and wash your sins. Bottoms-up both!
In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

What it does not do are:
  • Restructure the grids
  • Change the layout
  • Display any change in the content
  • Intuitive as per user device

What it does is:
Displaying the same content without distortions of layout or image
Of course there are websites and owners who still second guess WEB as the place where the spider sits and shits.. But that is a different story!


What is a Responsive design: A  structure or in this case the website layout that REACTS, not to your Mother or Mother-In-Law or Husband, but to the device in your hand or your lap it get displayed in. ( RE: new, ACTS: changes appearance as per device and the User needs or would be responsive)



What it does are: 


Restructures Grids/ Layout
Changes Layout
Displays different usable content
Keeps the basics same.
Highly intuitive. ( it knows my girl friends’ whereabouts via map!)

Still not clear?
Suppose that we have three column layouts website for the desktop version, if we consider responsive web design when we migrate to tablet version it shows two column layout as per the resolution of tablets and when we move to mobile it comes up in one column layout. We can say all the design element adjusts as per the device resolution.

Fluid vs Responsive


But Responsive design can be fluid or fixed but it’s not mandatory that fluid layout will be responsive Design

Now let’s not confuse ourselves with APPS.
It is a different story, a mobile app is the special icon you need to click to access the services in the web.
An excellent example is Facebook! It is Responsive and has an app!
( Of Course you knew all this.. but hey! This will make you sound smart, next time you chat with anyone, who thinks you are a moron from your dressing style!)

So how does it all work?


One Mega Word “ CSS3 Media Queries” it has changed how the world reads, responds, participates and leads its life style. It makes the web understands how it needs to display its assets.
RWD ( I am an IT Geek!) works with combination of fluid grid and CSS Media queries. Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complete three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.
Media queries allow us to apply specific CSS styles if the browser window drops below a particular width that we can specify.

Who wants a responsive design?


Your client, because he thinks it’s in fashion! he is right He is God!
Really Mobile are the uses for the quick responses,
Need a cab?>> search>>book>>drive,
Movie?>>search>>choose>>buy>>popcorn and sticky floor!
Health?>.doc>.call>.appointment
Read?>.search>.read>.response (share etc)

A  long decision chain like me> my boss> my bosses boss> bosses boss> accounts> me>>fired!
It will be of no use to have a responsive design!

What is the future ? 


Tablets and mobiles are dying I Think they are in the last leg of the marathon, people are rich! I am not, now they are selling their business: NOKIA, BLACKBERRY!
The Future is Multiple devices! Watches, Glasses.
So Friends I hope our payslips also become more responsive! with us working hard on Responsive design.. remember the world is….

Co-authored by: Subrata Kar

No comments:

Post a Comment