The Responsive Design Process

A presentation given at the Penn State Web Conference 2013 documenting Sparkbox's responsive design mindset and process.

Transcript

1. Jeremy Loyd THE RESPONSIVE DESIGN PROCESS @jeremyloyd
4. ‣ There’s not a single, best RWD process ‣ The process depends on your team makeup and type of project ‣ The process is constantly changing ‣ We’re all figuring this out together
5. WEB DESIGNERS STILL USE PHOTOSHOP!
6. A SHIFT IN MINDSET A SHIFT IN PROCESS
7. Before RWD, things were pretty simple.
8. 1024ish 768ish fixed width
9. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow
10. DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow
11. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT
12. Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
13. Why hello, RWD.
15. Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
16. Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Me too!
17. This doesn’t work.
18. Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE
19. We need to invite others into the process (yes, this includes the client)
20. CONTENT UX FRONT-END DESIGN BACK-END Responsive Workflow
21. CONTENT UX FRONT-END DESIGN BACK-END Responsive Workflow
22. CONTENT UX FRONT-END DESIGN BACK-END Responsive Workflow
23. When the process is collaborative, the quality as a whole improves
24. RWD is More Than Layout ‣ Content ‣ Usability ‣ Performance ‣ Findability/SEO
25. Linear Workflow ‣ Pros - Familiar - Manageable - Aligns with Corporate Structure
26. Linear Workflow ‣ Cons - Discipline Driven - Encourages Isolation
27. A Responsive Workflow ‣ Pros - Natural Decisions - Encourages Collaboration - Encourages Iteration - Better Results
28. A Responsive Workflow ‣ Cons - Requires Change - May Conflict with Organizational Structure - Dependent on Team Make-up
29. Client Abandon Previous Experience You Set Proper Expectations up front
30. THE RWD PROCESS A SHIFT IN PROCESS
31. A Process Myth Each client deliverable needs to look more like a final, beautiful end- product than the previous one.
32. Which Results In Pushing toward nearly-designed wireframes quickly and completely designed comps soon after. (This sets up all sorts of unrealistic client expectations.)
33. A Better Approach Deliverables that best serve the organization and prioritization of content and function across multiple resolutions. (Not deliverables made just to impress clients.)
34. Our Deliverables ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables
35. Let’s Focus On... ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables
36. Goal of Priority Deliverables: Establish priority of content and/or functionality
37. Content Priority Prototype - Takes the place of a traditional wireframe. - As much real content as you can. - Linear in nature, priority implied. - Possibly created in HTML, viewed in a browser. - Generated by content/UX people.
38. Other Priority Tools ‣ Content Priority Guide (keynote) ‣ Frameworks (foundation, pure)
39. Frameworks
40. Goal of Style Deliverables: To communicate the general look and feel of the website
41. Style Prototype - Like Style Tiles, but in the browser (styletil.es). - Very fast to build. - Accurate web typography. - Easy to show web interaction. - Client reviews in their browser of preference.
42. Other Style Tools ‣ Photoshop Comps (Everyone) ‣ Style Tiles (Samantha Warren) ‣ Element Collages (Dan Mall)
43. Element Collages by Dan Mall
44. Cool, so what happens next?
45. Research Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables C R E AT E D E S I G N A S S E T S
46. A different viewpoint ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables
47. A different viewpoint ‣ Research Updates ‣ Content Updates ‣ Priority Updates ‣ Style Updates ‣ Functional Updates
48. A different viewpoint ‣ Research Updates ‣ Content Updates ‣ Priority Updates ‣ Style Updates ‣ Functional Updates ‣ Only Deliverable: a website!
49. To Summarize ‣ There’s no right RWD process ‣ Evaluate what’s right for your team and the projects you work on ‣ Changing process is a challenge – must have buy-in from management and those doing the work ‣ It’s not easy, we’re still figuring it out
50. “The truly responsive design web designer wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” Andy Clarke http://the-pastry-box-project.net/andy-clarke/2012-april-8/
51. THANKS! @jeremyloyd jeremy@heysparkbox.com