17. What is responsive design
A design that „responds‟ to the user‟s behavior and environment based
on screen size, platform and orientation.
o Adaptive layout to suit different screen sizes
o Resizing images to suit the screen resolution
o Serving low-bandwidth images to mobile devices
o Render only essential elements on smaller screens
o Providing “touch-friendly” links and buttons for mobile users
o Detecting and responding to mobile features
17
18. Why do we need responsive design?
o Flexible layouts are “Necessity” NOT “luxury” for websites unlike years ago
o Keep creating custom solutions for each Device is not always feasible
o One responsive design is easy to manage and maintain.
18
19. Key ingredients of a responsive layout
Media Queries Seamless UX
Flexible Images
across devices
Adaptive
Layouts
19
21. Playing on device strengths
Leverage device specific
features to offer innovative
navigation and content
presentation
21
22. Things to remember while designing responsive UIs
Information
Users have different
information needs on
different devices
22
23. Things to remember while designing responsive UIs
Device
Strengths
Leverage device
specific features to
offer innovative
navigation and
content
presentation
23
24. 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
25. Things to remember while designing responsive UIs
Typography
Retina display‟s
are cool, but our
eyes still need
optimally sized
fonts to read
25
26. 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
27. Strategy for Orientation
Header
Header
Promoted Content
Promoted Content
Device targeting through CSS3 Media Queries
27
28. 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
29. Strategy for images
Scaling Images with the Layout Container
Hiding and Revealing Portions of Images
29
30. 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
31. 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
33. SPECIAL CREDITS TO
Luke W. Ex Yahoo! and a known author in responsive layout designs
Chris 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!
