Wednesday, September 3, 2014

Responsive Design: The misunderstood genius

"You know my website supports any platform or screen size. My web designs are completely responsive and we care about our customers".
You might have seen a lot of web development companies flashing similar messages across the world wide web. Claims of responsive web designs and customer satisfaction are neither faulty nor malign, they are simply naive. The responsiveness of a website is so much more than adjusting to a smartphone or a tablet screen. Don't get me wrong, even I harbored a similar notion about responsive web designs for a very long time until recently I was enlightened which now I wish to share with you.
Definitely, the basics are still the same, about a design which is platform independent but when we claim to "understand and care" for our customers I suggest you, pause and introspect whether or not you have understood what makes the crowd tick.
Responsive design takes responsible designing and a knowledge - performance often trumps aesthetics, as seen in case of a particular Finnish mobile company (if you know what I mean). This harsh but true fact should be the lead driving force behind any idea, code or design. Every user craves an optimum performance, a webpage loading on a device within 1second is considered to be the best, good looks would definitely not hurt. The perfect amalgam of beauty and performance can drive your sales beyond imagination.
It is never too late if you wish to tweak the design or code a little bit. Although there is no universal solution to improve the code, some healthy changes can definitely be done -
  • Oh, so haven't started with the design yet? Good, now remember to use mobile first approach, period.
  • In a responsive layout change the structure of the document but never change the content or URL while delivering it to other devices.
  • Performance should be regularly measured and improved upon using optimization tools.
  • Browser resizing is not a legit test. After the resources have been loaded and display:none is applied check it on different devices.
  • Only load the JS (JavaScript) with conditional loading required for the current device or subsequent to onload event.
  • Using srcset attribute to deliver images by JavaScript.
  • Forefront should showcase above-the-fold content in a mobile device while the initial viewing should be inline.
  • Implement smart methods to responsive web design solution like group based responsiveness, adaptive approach (server side layer) and conditional loading.
Once you familiarize the real deal about responsiveness it will seem so much more than what it appeared from its name. It had been there all along we simply failed to recognize it. Now, you may agree or disagree with me but at least we should be in consensus regarding what our end game is. It is not a groundbreaking technology, code or a design. It is simply is user's happiness.

No comments:

Post a Comment