Responsive Web Design: Whose Problem is it?

At Adobe we have been thinking about Responsive Web Design, and talked to a lot of folks who work in teams about how they approach it. This is a summary of those efforts & where we see a problem & how we are providing tools to fill the gaps.

Transcript

1. @DIVYA • PRODUCT MANAGER, ADOBE
2. Kind of an apology
3. for espousing “Designing in the browser”
4. How did we get here? (or the evolution of style.com)
8. 0 350 700 1050 1400 Memory (in MB) CPU Speed (in MHz) iPhone 5s iBook G3 iPhone 5s iBook G3 Viewport Widths
9. What has changed?
10. Devices
13. Browsers
16. Internet Usage
17. 84 petabytes/month
18. 62,476 petabytes/month
19. Medium
20. (This is a joke)
21. Flash, HTML
22. HTML, Objective-C, Java (Android SDK)
23. Process
24. ! Create Wireframes ‑ Create Visual Designs ‑ Work on HTML/CSS/JS
25. Start with Story boarding / Mood boarding ‑ Create Wireframes ‑ Create Visual Designs ‑ Work on HTML/CSS/JS ‑ Amend into a template for a CMS ‑ Visual QA
26. Deliverables
27. • Wireframes • Photoshop Mockups
28. • Wireframes • Photoshop Mockups (x 3/page) • Photoshop Style Guide • HTML/Axzure/Invision prototypes • CMS Templates
29. Design Involvement
30. Creative Director Designer Client
31. Creative Director Designer Client UX designer Web Developer
32. Development
33. Web Master
34. Back-end Developers Front-end Developers QA Testers Designers
35. Problems we don’t have
36. • Designers love using the tool they are used to • Designers do not want to change their workflow or don’t have time to do so • Designers love working with developers who understand design
37. Problems we have
38. • No way to design wireframes responsively • Tedious to make changes to designs per page for various device widths • Hard to convey to designers current limitations of web platform • Designing for multiple devices is inefficient and expensive • Clients really don’t really know what Responsive Design means
39. Responsive Design?
40. Choose breakpoints
41. Design for breakpoints
42. Implement the design
43. LOL Designers don’t know what can be done in CSS!
44. But do you?
45. “Flexbox is some new fangled CSS thingy?” (a front-end developer)
46. “You cannot put content out of order!” (a front-end developer)
47. Responsive Design Let’s look again at
48. Choose breakpoints while creating wireframes
49. Design for breakpoints in your favorite design tool
50. Implement the design in your favorite code editor
51. Where is the problem?
52. • Choose breakpoints • Design for breakpoints • Implement the design
53. • Choose breakpoints • Design for breakpoints • Implement the design
54. Responsive Design? Implementation?
55. How are we solving them?
56. Choose Breakpoints
58. Design for breakpoints:
59. Linked smart objects (photoshopfordesigners.com)
60. Implement the design:
61. Get you out of Photoshop (as quickly as possible)
62. projectparfait.adobe.com
63. Develop Better
65. bit.ly/comptocode
66. & more
67. Designers! Talk to me: manian@adobe.com (so we can make tools that make you happy)
68. We need help from browser vendors:
69. Better browser debuggers for newer layer models (barely any exist & no browser vendor seems to care)
70. More consistent layout rendering (rendering parity of layout models across browsers)
71. Faster performance of newer layout models (Tables still perform better than Flex box)
72. Thank you! (questions: @divya)