Responsive Design- the time is now


Published on

Devices of several sizes and shapes are all over the market. Be it native or web-based applications, the ability of mobile applications to provide a seamless user experience to the customer shouldn’t have to be a nightmarish task.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Design- the time is now

  1. 1. Responsive Designthe time is now Understanding the change in the mobile landscape 1 © 2013 WIPRO LTD | WWW.WIPRO.COM
  2. 2. HIGHLIGHTS Responsive Design Understanding the change in the mobile landscape Devices of several sizes and shapes are all over the market. Be it native or web-based applications, the ability of mobile applications to provide a seamless user experience to the customer shouldn’t have to be a nightmarish task Inspired by the media industry’s consumption of content across the device portfolio, Responsive Design aims to eliminate such headaches 2 © 2013 WIPRO LTD | WWW.WIPRO.COM
  3. 3. The impact of device proliferation on content and design It is not feasible anymore to design content for every device in the market Designs must be created that are fluid, flexible, and smart that fit any form factor and any resolution 3 Designs should be able to sense the device capabilities and change behaviour accordingly © 2013 WIPRO LTD | WWW.WIPRO.COM Content should fit just about any viewport, from desktop to laptop and from tablet to smartphone
  4. 4. Re-engineering content for Responsive Design The ability to re-shape content for optimal viewing and interaction based on detecting device capability is referred to as “Adaptive Design” or “Responsive Design” Number of columns of content for display should change based on screen size/ browser size Images and video should be dynamically resized to fit the display Use content caching to save on bandwidth usage Perform data syncs in the background Menus, links and buttons should become bigger in size The space between interactive links must grow larger to prevent accidental touch The text size and line spaces must grow larger to improve reading Leverage CSS3 capabilities to create visual effects instead of images 4 Content to be displayed must be prioritized The content must leverage device capabilities when required Menus, links and buttons must be prioritized as they are displayed on devices that have differing real estate The tap-to-zoom process should be used over pinch-and-resize for images and text width © 2013 WIPRO LTD | WWW.WIPRO.COM
  5. 5. Starting your journey What is the minimum configuration of information and features required to make the design useful? This is the fundamental question that needs to be answered before starting off Research across the user base and actual usage and create a rigorous information architecture 5 Prioritize existing content than starting afresh and then decide the interface or design the UI © 2013 WIPRO LTD | WWW.WIPRO.COM Use Cascading Style Sheets. This works best when it is largely client side, so that content can be rendered based on the device and environment
  6. 6. Limitations of responsive design  There is no one size fits all – scaling from a smart phone to a large format TV is going to be difficult  It is important to decide optimal scaling  Image quality can be affected during resizing and this is crucial to factor during the design phase  Several mobile devices may not be compatible with cascading style sheet media queries 6 © 2013 WIPRO LTD | WWW.WIPRO.COM
  7. 7. Conclusion Responsive Design reduces the cost of creating content for every device and improves user experience. There are instances when porting or adapting content from desktops to mobile devices may not produce the best results. In such cases, a device-specific site would become essential. Given the high internet penetration rates, getting a multiple device strategy in place is essential. 7 © 2013 WIPRO LTD | WWW.WIPRO.COM
  8. 8. For more details please visit the link below: 8 © 2013 WIPRO LTD | WWW.WIPRO.COM
  9. 9. About Wipro Ltd. Wipro Ltd. (NYSE:WIT) is a leading Information Technology, Consulting and Outsourcing company that delivers solutions to enable its clients do business better. Wipro delivers winning business outcomes through its deep industry experience and a 360 degree view of "Business through Technology"; helping clients create successful and adaptive businesses. A company recognized globally for its comprehensive portfolio of services, a practitioner's approach to delivering innovation and an organization wide commitment to sustainability; Wipro has over 140,000 employees and clients across 57 countries. For more information, please visit 9 © 2013 WIPRO LTD | WWW.WIPRO.COM
  10. 10. Thank You ©Wipro Limited, 2013. All rights reserved. For more information visit No part of this document may be reproduced in whole or in part without the written permission of the authors. Wipro is not liable for any business outcome based on the views presented in this document. For specific implementation clients should take advise from their client engagement manager. 10 © 2013 WIPRO LTD | WWW.WIPRO.COM