Responsive Design & Development

Transcript

1. Max Shelley @maxshelley

2. None

3. What is a ‘responsive’ layout?

4. “an approach to web design in which a designer intends

   to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)” - Wikipedia “Use CSS media queries to make layout changes based on viewport size, pixel density and orientation.” - Me

5. http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

6. Ubiquitous mention of @beep. http://www.alistapart.com/articles/responsive-web-design/

7. ok, so what’s changeD? we’ve built percentage based websites before...

   “ ”

8. @media only screen and (max-width:599px) { .class_name { border-color: red;

   } } @media only screen and (min-width:600px) and (max-width:767px) { .class_name { border-color: red; } } @media (min-width: 768px) and (max-width: 979px) { .row-fluid .span12 { width: 99.999999993%; *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; *width: 5.747913482638298%; } }

9. <meta name="viewport" content="initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

10. What’s it good for?

11. • Sites with a high (or rising) percentage of mobile

    traffic. • Sites that represent other mobile content e.g. websites for apps, web apps etc. • Lightweight eCommerce. • Content-based sites. • Landing pages. • Anyone (if they’re willing to do the legwork and check that it’s doing what they need it to do).

12. What’s it not good for?

13. • Web-apps (although you can use elements of it). •

    Fully-targeted/tested content i.e. If you want mobile users to see mobile-only content. • Heavily optimised sites (there’s a trade-off there). • Image-heavy content (again, unless you’re willing to put in the legwork). • You’ll probably know if it’s not right...

14. How it changes your workflow. Content first. Mobile first. Mobile

    first. Content first. More design in the browser. Clients. No PSD? What?

15. Are there any useful tools that can help me? “

    ”

16. Frameworks. “Everything is a framework.” http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/ http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

17. Gridset - gridsetapp.com

18. Gridset - gridsetapp.com

19. None

20. https://docs.google.com/spreadsheet/ccc?key=0AoUAJWmYgaHHdHZZWWpPQkx4eHpBaUxna3dyMGkzLUE

21. CSS Pre-compilers. LESS, SASS.

22. http://incident57.com/codekit/

23. responsivepx.com (by Remy Sharp @rem)

24. ‘View Responsive Layouts’ in Web Developer Toolbar for Firefox.

25. Oh cool, I can see some uses for that, let’s

    get started... “

26. http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them • Explaining RWD to clients • The lack of

    a static design phase • Navigation • Images • Tables • Converting old fixed-width sites • What to serve users of old versions of IE • Testing time and cost

27. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing”

    Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

28. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing”

    Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

29. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing”

    Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

30. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing”

    Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

31. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing”

    Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

32. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing”

    Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

33. Images http://css-tricks.com/which-responsive-images-solution-should-you-use/ • Do I have legacy content? • Do

    I care about special markup? • Do I care about semantics? • Do I care about validity? • Do I care about art direction? • Do I care about JavaScript? • Do I care about Server Side Components? • Do I care about bandwidth testing? • Do I care about relying on third parties? • Is there a specific CMS with specific CMS powers involved? • Can I wait for the future?

34. http://www.w3.org/community/respimg/ Responsive Images Community Group http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html The picture Element and

    the srcset attribute

35. “Hiding” content on mobile? Dynamically loading content on certain viewports?

    Making it up as we go along? Awesome.

36. The ‘lost’ viewports.

37. Breakpoints go where the design needs them, not where the

    framework puts them.

38. real-world examples...