Designing for the Web in a Multi-Device World

The days of delivering pictures of 960px websites is over. In order to build responsive sites that work across devices, we need to get in the browser ASAP, give love to our design system/framework, and hire for that sweet spot between design and engineering.

Transcript

1. Designing for the Web in a Multi-device World
10. Benefits of getting in the browser ASAP • Show stakeholders “The Thing” on real devices • Test with users before even starting production • Fail fast - throw out bad assumptions early • Tighter collaboration between design & engineering • Deliver code instead of pictures
12. “Big Self-Portrait”
 Chuck Close, 1967 107.5” x 83.5”
16. Style Tiles http://styletil.es
17. Groupon CSS Frameworks (GIG & Mixer)
18. Groupon CSS Frameworks • Act as a shared language between design and engineering • Enable creation of high-fidelity designs with minimal coding • Allow teams leverage work of others • Provide consistent colors, dimensions, typography, etc. • Minimize need for “full-stack engineers” to write CSS • Limit need for designers to reinvent the wheel
20. "main" 202k SLS 34k Fonts 12k GIG 67k Deal Page CSS
22. “Mobile First”
23. “In 2014, we will double down on our progress over the past year, across 4 key areas by: Investing in growing our mobile customer base, accelerating activation and making Groupon a mobile first company…” - Eric Lefkofsky
 February 2014
24. YOU KEEP USING THAT WORD I DO NOT THINK IT MEANS WHAT YOU THINK IT MEANS
27. http://bradfrost.com/blog/mobile/the-many-faces-of-mobile-first/
28. The Responsive Grid
29. Groupon to Go (GTG) Merchant Place Pages (MPP)
30. 12 Columns 3 Cols 9 Cols 3 Cols 3 Cols 3 Cols 3 Cols
31. A B C D D D D
32. A B C D D D D A C D D D A C D D A C D s m l xl 400px 600px 720px 1080px Viewport Breakpoint Map
33. http://www.getsitewise.com/gumby/responsive-grid.html
34. $variables
35. http://codepen.io
36. http://codepen.io/peruvianidol/pen/87dc4ecb32472c276886f22a5a75d075/?editors=0100
45. FULL-STACK DEVELOPERS
50. .not-about-order { border-right: 1px solid #ccc; }
51. The stack HTML CSS JavaScript Ruby on Rails MySQL Server Shit UX Content Strategy Typography Photoshoppin’ (more of a spectrum) @jasonsantamaria @lukew @brad_frost @wycats @vpieters @karenmcgrane @chriscoyier @jeresig DESIGNERS DEVELOPERS @montywi @linus__torvalds
52. UX Developer
53. A Practical Example (In Progress)
55. http://www.getsitewise.com/merchant-center/v2/
57. Wrap Up • Focus on getting in the browser rather than fidelity • Design the smallest experience first, build up • Learn the framework, love the framework (+ the grid) • Use variables liberally • Hire UX Developers to help bridge the gap • Get engineering on board • Deliver code, not pixels
58. LET’S DO THIS