The document discusses responsive web design which involves designing websites that automatically adapt their layout to different screen sizes and devices. It covers scoping a responsive design by considering the context of use and prioritizing important content. Guidelines are provided for wireframing grid structures and layouts for different screen widths as well as best practices for text, buttons, forms and other elements on responsive sites.

1. Responsive Design
Summary

2. What is Responsive Web Design?
• Responsive websites respond to their
environment.
• These web sites provide optimal
experience for their users regardless of
access devices.

3. 1. SCOPING
Process

4. Context of Use
Context is about the environment and conditions of
usage, including distractions, multitasking, motion, lighting
conditions and poor connectivity

5. Mobile first
• To focus on only the most important data and
actions in your web application. You have to
prioritize.
• Consider capabilities offered to developers on
Apple’s iPhone or Google’s Android platforms:
– precise location information from GPS;
– user orientation from a digital compass;
– multi-touch input from one or more
simultaneous gestures;
– device positioning from an accelerometer; and
many more.

6. Eg: Use geo location

7. Identify Device-specific Use Cases
• Think about what visitors want most from
your mobile website and consider how to
make it easy for them to access.

8. Simplify Existing Functionality
• Make sure your interactions work smoothly
on smaller screens and retain their context.

9. Rethink Potentially Awkward
Interactions
• Some UI choices that make great sense on a desktop
simply fall flat on a mobile screen – mouse hovering!

10. 2. WIREFRAMING: GRID
STRUCTURES AND LAYOUTS
Process

11. Grid structure
• Define the grid structure for 3 pages for the
screen widths 1024px (Desktop), 768px (iPad
portrait), 320px (iPhone portrait)
Desktop Tablet Mobile

12. DesktopTabletMobile

13. Navigation
Desktop Tablet Mobile

14. http://ignaty.com/
Desktop
Tablet
Mobile

15. http://ilovedust.com/
Desktop
Tablet
Mobile

16. http://snatz.com/
Desktop
Tablet
Mobile

17. https://corporate.target.com/
Desktop
Tablet
Mobile

18. Listings
http://designshack.net/tutorialexamples/responsivegallery/index.html
Desktop
TabletMobile

19. http://ilovedust.com/
Desktop
Tablet
Mobile

20. http://ignaty.com/
Desktop
TabletMobile

21. Scroller

22. http://snatz.com/
Desktop
TabletMobile

23. Footer
https://corporate.target.com/
Desktop
Tablet
Mobile

24. Forms

26. Text
• Don’t make users double tap or
pinch your content.
Instead, increase the font size to
at least 16px.
• You can also use a line height of
1.5 to allow for breathing room
between text on content-rich
pages.

27. Buttons
• Our fingers are much clumsier than a cursor, so bumping
up the spacing between different touch targets will
improve user accuracy. And, make those touch targets
big!
• Our fingertips typically require upwards of 44px to
comfortably fit within a touch target so design for that.

28. 3. EXAMPLES
Responsive web design

29. http://ilovedust.com/

30. http://snatz.com/

31. bostonglobe.com

32. corporate.target.com

33. RESOURCES
Responsive Web Design

34. Resources
For designer:
• http://webdesign.tutsplus.com/articles/design
-theory/designing-for-a-responsive-web/
For developer:
• http://alistapart.com/article/responsive-web-
design
• http://alistapart.com/article/fluidgrids

35. Examples
• http://www.mobify.com/blog/70-stunning-
responsive-sites-for-your-inspiration/