Designing for responsive UI - Yahoo! OpenHack India 2012

1,471 views
1,366 views

Published on

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,471
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing for responsive UI - Yahoo! OpenHack India 2012

  1. 1. DESIGNING FORRESPONSIVE USERINTERFACESAdesh SinghPrincipal DesignerYahoo!
  2. 2. About me 3
  3. 3. Evolving nature of UX complexity User profiles are vast and wide 4
  4. 4. People are spending more time on internet devices 5
  5. 5. Too many devices surround us Commute to Commute to Morning Office Hours Evening Before Bed Office Home 6
  6. 6. How do we achieve a seamless user experience? 7
  7. 7. Traditional practices to provide cross device experienceStandard scaling for webpage to fit in small screens Jetairways.com 8
  8. 8. Traditional practices to provide cross device experienceFluid layouts to fit webpages different screens Wikipedia 9
  9. 9. Current practices to provide cross device experience1. Device targeted custom websites and applications hp.mobileweb.ebay.com www.ebay.com 10
  10. 10. Current practices to provide cross device experience2. Custom Apps for different devices Skype for iPhone Skype for iPad 11
  11. 11. Can we have a single design? 12
  12. 12. Passengers arranged in multiple queues 13
  13. 13. Fewer queues for security check 14
  14. 14. More room for passengers in boarding area 15
  15. 15. Highly structured seating allocation 16
  16. 16. What is responsive designA design that „responds‟ to the user‟s behavior and environment basedon screen size, platform and orientation.o Adaptive layout to suit different screen sizeso Resizing images to suit the screen resolutiono Serving low-bandwidth images to mobile deviceso Render only essential elements on smaller screenso Providing “touch-friendly” links and buttons for mobile userso Detecting and responding to mobile features 17
  17. 17. Why do we need responsive design?o Flexible layouts are “Necessity” NOT “luxury” for websites unlike years agoo Keep creating custom solutions for each Device is not always feasibleo One responsive design is easy to manage and maintain. 18
  18. 18. Key ingredients of a responsive layout Media Queries Seamless UX Flexible Images across devices Adaptive Layouts 19
  19. 19. A responsive layout 20
  20. 20. Playing on device strengths Leverage device specific features to offer innovative navigation and content presentation 21
  21. 21. Things to remember while designing responsive UIs Information Users have different information needs on different devices 22
  22. 22. Things to remember while designing responsive UIs Device Strengths Leverage device specific features to offer innovative navigation and content presentation 23
  23. 23. Things to remember while designing responsive UIs Device Gestures Product carousal in desktop Users inherently assume the UI to be touch enabled in touch devices Product carousal in touch devices 24
  24. 24. Things to remember while designing responsive UIs Typography Retina display‟s are cool, but our eyes still need optimally sized fonts to read 25
  25. 25. Strategy for Layouts Header Header Navigation Content Area 1 Navigation Content Area 1 Content Area 2 Content Area 2 Device targeting through CSS3 Media Queries 26
  26. 26. Strategy for Orientation Header Header Promoted Content Promoted Content Device targeting through CSS3 Media Queries 27
  27. 27. Strategy for Space Optimization Home Products Services Resources About Us Help Navigation bar in wide screen Home Products Services Resources About Us Help Navigation bar in tablets Navigation bar smartphones 28
  28. 28. Strategy for images Scaling Images with the Layout Container Hiding and Revealing Portions of Images 29
  29. 29. How Yahoo! technologies could help you build all this? A JavaScript MVC framework for mobile applications YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications. 30
  30. 30. Finally Customers don’t buy products and services. They pay for the value. It’s time we think about the value creation by giving best experiences to our users 31
  31. 31. QUESTIONS?
  32. 32. SPECIAL CREDITS TOLuke W. Ex Yahoo! and a known author in responsive layout designsChris Coiler Curator of one of the best live examples in responsive layouts(csstricks.com)Ashutosh Kumar Principal Designer, Yahoo!Sarit Arora Senior Design Manger, Yahoo!
  33. 33. THANKS FOR JOINING getadesh@yahoo.com Twitter: @getadesh

×