Responsive Design: A design philosophy

Tuesday, January 28, 2014

Responsive Design is a design philosophy where in the design of the system (the representation and the layout) responds/adapts depending upon the layout of the device. The primary reason to keep your design responsive is to increase the reach of your application to a larger user base using an array of devices.
Responsive web design
Responsive Web Design

Improving Usability and accessibility:
A responsive design improves the usability of the product. Few years back, before the advent of mobile Internet communication devices, Developers used to make their applications compatible with screens of various resolutions. This can also be called making the design responsive. In today's world, where more and more users are consuming information on your mobile devices, you need to handle the changing view-ports and hardware.
Unlike popular belief, making design responsive does not necessarily mean fitting the entire application on the user's screen. It means:
  1. intelligently pruning amount of information displayed and
  2. making adjustments to the design to improve the users' experience while using the application.
For example, if you open a web application on desktop, you may consider going all guns blazing and displaying a lot of information in the available screen with each component occupying optimal space. But, when you switch to a mobile device, you should not try to squeeze all the information into the limited real estate on screen.
Instead you should choose to
  1. drop out the less important chunks of information;
  2. reduce the number of processor-heavy components (elements that need to be frequently updated/redrawn/re-calculated); and
  3. reduce textual content to only highlight extremely important content
Like, a news app on desktop may show a snippet of the news article along with the headline and a thumbnail about the article. But, on mobile, it need only show the headline, timestamp and publisher, and so on.



Alsoeven though the mobile screens now-a-days sport desktop-like resolutions, you need to realize that the physical dimensions of these devices are still smaller. So, to make it easier for the user to consume information, the developer should take steps like increasing the font-size, increasing the dimensions & placement of thumbnails, etc to make the information easily readable (accessible) even on a small screen. Developers also need to ensure that controls in the application are accessible when viewed on smaller screens. For example, the size of buttons and links should not fall below a limit that they become virtually inaccessible.

Where to go from here:
  • Have a look at the examples listed on mediaqueri.es to get a better idea.
  • To learn more about designing responsive web applications, check out book 4 of the "A Book Apart" series titled: Responsive Web Design by Ethan Marcotte.
  • To test responsive-ness of your application within the browser without the need to install any additional plugin or simulator, try RWD Bookmarklet.


For any queries or doubts, leave a comment in the comments section below.

No comments:

Post a Comment

 

About Me

My photo
Front-end Developer with over 9 years of experience in developing Web 2.0 sites with a keen eye for UX. Avid technology enthusiast; gadget freak; old school PC gamer; loves developing Apps & Data Visualizations.

My Website

Stack Overflow profile

Twitter Profile

Facebook profile