Monday, 2 December 2013

All websites should be built to be responsive?


Holiday month is next door, and everyone is planning to go to their  favorite destination.
I decided that no matter what so happens... I will book a trip.
It was 9 and coffee, searching for some holiday packages on my brand new Laptop.
The url with http://www.expedia.co.in/ and clicked on the “Go”!
Page display: “There is some problem with your internet connection please check”.


I did everything to bring my internet on the track but fail. In anger and disappointment. I just pick up my smart-phone and start checking my Watsapp and Facebook Updates.
One post on Facebook stop me to scroll down and it was “that plan your holiday on Mobile” and I smile!On to the mobile browser and typed one of my favorite travel site Expedie.co.uk
waoooooo!!!!! This looks more handy than desktop version”!!


Every geek is bugged , and it pings! To check what technology is used behind this app or website,
So, the bug goes with the job!. Whether this website is a separate mobile based website or in a responsive layout?
No its a separate mobile website!
I am a bit surprised to see why this website is not responding, despite the fact it’s the most popular buzz in the web industry. Time to check... kayak.com, but again ended up with a message “download a free app from app store or continue using mobile”, means still no responsive design. I am digging and visit other travel sites in my mobile... same result.
Wondering why is so much fuzz about Responsive design
An idea clicked!
Why not test any of one of most visited websites on the mobile.
Below is the list I tested for responsiveness.
1.   www.google.com
2.   www.facebook.com
3.   www.yahoo.com
4.   www.amazon.com
5.   www.twitter.com
6.   www.linkedin.com
7.   www.wikipedia.org
8.   www.expedia.com
9.   www.webmd.com
10. www.theguardian.com
11. www.microsoft.com
12. www.masable.com
13. www.accenture.com


After testing all these giant websites which are leaders in its domain, I find only 85% website have a separate mobile website or mobile app and rest 15% of being in the Responsive web layout. 
Nowadays, clients and managers always ask for responsive web design,
Many office managers make a new guideline that all
“All websites should be made in responsive web layout”.


When the top websites from all domains (search engine, social networking, e-commerce, content, travel, health, information technology, news, blog and product ) has a separate mobile website instead of responsive web design, so why should we go for a responsive layout instead of the separate mobile website or mobile app.


Why don’t we opt for responsive or separate mobile design as per requirement or need instead following the trends, without knowing the pros and cons of responsive.

I don’t know it’s just a confusion or lack of knowledge or a rat race..??

Co-authored by: Subrata Kar 

Tuesday, 22 October 2013

Aspects that make Responsive Web Design better than Seperate Mobile Design


 With the growing market of Smartphone and tablets its has been observed that global websites are now getting good traffic from tablets and Smartphones. In a report from Conversion Rate Optimization Report it shows that 35% of company are now designing their websites for mobile and 23% for tablets, with an increase of 10% on last year's survey. So, there are two approaches to consider to target Smartphone and tablets.
  1. Create a Separate website for mobile devices and redirect mobile browsers to it from the desktop site.
  2. Second is the Responsive web design, a website with same url for all devices.
If we consider Responsive web design most popular buzzword currently being thrown around When we do a Google on responsive web design one thing comes "that responsive web design is a low investment technique." For further verification we talk to UI Experts, Web Designer and Front End Developer, they say that responsive web design does take more time and effort, expect 25% – 50% increase in total cost to implement this technique. So, why we always heard that Responsive web design is a low cost technique ? When we compare responsive design to separate mobile design. Some points come out to consider that can justify that ” responsive web design is a low investment technique”.
  • Responsive web design is easier to maintain, Only one set of content rather than multiple versions
  • No need of separate domains works on the same domain.
  • The responsive web design is better for Google ranking.
  • Mobile responsive design delivers a better reading experience
  • Single design works in all resolution no need of new design
    • If you are looking for devices and resolution friendly design than responsive web design is the best way to go.

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