Responsive Web Design

Early Shift with Ray Brown

Ray Brown is a web designer and front-end developer. The owner of Bitmanic (http://bitmanic.com/), Ray works with a motley bunch of smart people to make great things. Ray's Early Shift presentation will focus on his experience as a web designer, specifically, responsive web design and how to stop doing it wrong.

Come join us at Conduit Studios from 8:30 - 10:00 AM on Friday March 22. Inspired by the Creative Mornings model, the event will consist of coffee, breakfast snacks and conversation starting at 8:30 AM, with Ray's presentation starting promptly at 9 AM. Q and A will follow, and we will be out the door by 10 to get to work.

Tickets go on sale Friday, March 8th at 10 AM. This is a free event.

http://earlyshiftaigawm-eorg.eventbrite.com/

Breakfast sponsor:
Breakfast will generously be provided by xpedx https://www.xpedx.com/.

Videography Sponsor:
A huge thanks to Coastline Studios for documenting the event.

Print materials:
Thank you to Bright Format http://brightformat.com/ for helping us with printed materials!

Transcript

4. Responsive Web Design (and how to stop doing it wrong)
5. by Ray Brown
6. http://bitmanic.com Bitmanic
7. I like bikes.
8. I like cookin’ stuff.
9. I really like nature stuff. (Seriously, check out this icy swamp.)
10. Enough about me.
11. How many of you know about RWD?
12. “A web design approach aimed at cra ing sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling— across a wide range of devices.” What is RWD?
13. This is RWD.
14. A List Apart
15. A List Apart
16. A List Apart
17. A List Apart
18. Time Magazine
19. Microsoft
20. Skinny Ties
21. Ready to see some code?
22. Too bad.
23. This talk is about code design.
24. * Designer creates static artifact * Developer implements it * Issue found in viewing context * Designer creates new artifact * Developer implements new artifact * Rinse and repeat... How RWD happens:
25. ...Until every- thing works or until everyone pulls their hair out.
26. Too much focus on design artifacts
27. Not enough focus on design systems
29. * A dynamic medium * Delivered on a range of devices * User-configurable * Constantly changing * Not perfect Browsers are:
30. Create a design system that is responsive to these constraints.
31. * Grid systems * Typographic systems * Color schemes This isn’t new stuff:
32. * Dynamic, fluid grid systems * Elastic images and other media * Multiple viewing contexts But this is new:
33. * Typefaces * Base units * Color schemes * General design themes These might stay the same:
34. * Grids * Layouts * Font sizes * Measure (line length) * Leading (line height) These might change quite a bit:
35. On the web, your design system is alive! And that’s kind of freaky.
36. How to deal with freaky, living RWD:
37. Learn about browsers and the devices that run them.
39. Study responsive web design patterns.
41. Pair with a front-end developer during implementation.
42. Keep it simple.
43. * RWD is now standard practice * Focus on flexible design systems * Get cozy with a front-end dev * It sounds daunting, but it’s not so bad A quick recap:
44. You are smart. You can do this. And you will rock at it.
45. * Responsive Web Design * This is Responsive * Media Queri.es * Design Systems * Treehouse Beginner’s Guide Further reading:
46. Have questions? Get in touch. ray@bitmanic.com
47. Thanks!