Responsive Soapbox

What is Responsive Design? What is it not? What are some of the common answers to responsive questions?

Transcript

1. e Responsive Soapbox Hi. I’m Janson. @elevatorup
2. Responsive design is not a bolt-on new syntax for speci c devices.
3. Not a bolt-on“feature” RD is a shift in how you approach content. Adjust how you handle information architecture. Tailor the user experience.
4. No New Syntax @media screen and (min-width: 32em) and (max-width: 50em) { /* css rules */ } <link rel="stylesheet" media="screen and (min-width: 50em)" href="/style.css" />
5. Not Device Speci c Adaptive, not targeted. What about the iPad 7”? What about the Nexus? What about Retina? What about netbooks? What about .........
6. Responsive design is an organic and collaborative effort to build up and out from your core content.
7. Is Focused on Core Content Scarce screen real estate forces you to prioritize content and workflow.
8. Is Focused on Core Content “We agreed that this was the most important set of features and content for our customers and business—why should that change with more screen space?” http://www.lukew.com/ff/entry.asp?1117
9. http://www.lukew.com/ff/entry.asp?1117
10. Is Content Out What is essential? When is it necessary? What can be improved for more robust devices?
11. http://jessicahische.is/anoversharer/
12. Is Content Out Assume your first media query is the absence of one.
13. Is Mobile... Smartphones increasingly become the device of choice.
14. http://karenmcgrane.com/2012/07/10/mobile-local/
15. ... but not local! Just because a user is on a small device doesn’t mean they’re out and about. You can’t assume context .
16. Is Organic & Collaborative Devices change, content changes, needs change. More moving parts necessitate better and tighter collaboration.
17. Responsive design is building with better questions.
18. What’s essential? Experience Touch-Points of all kinds. So what’s the primary goal(s)?
19. http://www.kiwibank.co.nz/
20. http://www.kiwibank.co.nz/
21. http://www.kiwibank.co.nz/
22. Where to break? Design-centric, not device. If two columns begins to look good at 50ems but is too tight at 48ems... 50 is your breakpoint.
23. < 500px 500px
24. 800px 1020px
25. >1220
26. How to layout the canvas? Layouts morph, shift, with a greater emphasis on hierarchy and semantics. Remember the canvas is horizontal as well as vertical!
27. Fluid http://www.lukew.com/ff/entry.asp?1514
28. http://trentwalton.com/
29. Stacked http://www.lukew.com/ff/entry.asp?1514
30. http://owltastic.com/
31. Speci c Shift http://www.lukew.com/ff/entry.asp?1514
32. http://www.bostonglobe.com/
33. Off-Canvas
34. http://www.barackobama.com/
35. How do users navigate? Big blocks of navigation elements tend to intrude in small spaces, so how do we creatively keep content first without losing context?
36. Top Nav http://trentwalton.com/
37. Select http://smashingmagazine.com/
38. Toggle http://jessicahische.is/
39. Footer http://greygoose.com
40. Fly-Out http://www.barackobama.com/
41. Pull Down http://inspectelement.com
42. How to build it? Units should be proportional. A pixel isn't a pixel anymore (well, sorta, but not really). When we build a site’s harmony, we're building relationships.
43. http://stephencaver.com/
44. Responsive design really isn’t anything new. "It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all." ~ John Allsopp
45. Don’t forget to have fun!
46. anks!
47. Resources Bookmarklet: http://responsive.victorcoulon.fr/ Layout patterns http://www.lukew.com/ff/entry.asp?1514 Navigation elements http://bradfrostweb.com/blog/web/responsive- nav-patterns/ Off-Canvas http://jasonweaver.name/lab/offcanvas/ Media Tests http://scottjehl.github.com/CSS-Download-Tests/