Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for the Web in a Multi-Device World

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.

6389097e6acf134606d06217a3c41e47?s=128

Mike Aparicio

February 02, 2016
Tweet

More Decks by Mike Aparicio

Other Decks in Technology

Transcript

  1. Designing for the Web in a Multi-device World

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  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
  11. None
  12. “Big Self-Portrait”
 Chuck Close, 1967 107.5” x 83.5”

  13. None
  14. None
  15. None
  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
  19. None
  20. "main" 202k SLS 34k Fonts 12k GIG 67k Deal Page

    CSS
  21. None
  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
  25. None
  26. None
  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

  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. FULL-STACK DEVELOPERS

  46. None
  47. None
  48. None
  49. None
  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)

  54. None
  55. http://www.getsitewise.com/merchant-center/v2/

  56. None
  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