Responsive Soapbox

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/