Presentation slides from Dustin Tauer's 2014 MIMA Session: What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design. This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.

1. Thank You, Summit Sponsors

2. Changing Your
Responsive Design Workflow
Dustin Tauer, Easel Solutions!
dustin@easelsolutions.com!
@dtauer

3. “Responsive design is not about ‘designing for mobile.’
But it’s not about ‘designing for the desktop,’ either. Rather,
it’s about adopting a more flexible, device-agnostic
approach to designing for the web.”
– Ethan Marcotte, 2010
http://alistapart.com/article/responsive-web-design

4. Desktop, Tablet, & Mobile Browser Traffic

5. US time spent accessing Internet

6. Responsive Design
M-dot (Mobile) Site
Mobile App

7. US smartphone users’ number
of app downloads per month

8. http://wtfmobileweb.com/

9. M-Dot (Mobile Site)
iPhone 6 Plus vs.
Samsung Galaxy Note 4

10. iOS Fragmentation
http://opensignal.com/reports/2014/android-fragmentation/

11. Android Fragmentation
http://opensignal.com/reports/2014/android-fragmentation/

12. bostonglobe.com
Patty Toland, filamentgroup.com

13. Design consistency isn’t pixels
!
Design consistency is purpose
Patty Toland, filamentgroup.com

14. We need a workflow that
respects the past but
prepares us for the future.

15. The Old Workflow
Launch!
• Drop in the content
Design Front-end Back-end
• Start thinking about users
• Lots of Lorem Ipsum (or Hipster Ipsum)
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects

16. Current Workflow
Launch!
Design Front-end Back-end
• RWD!
Content UX
• RWD! • RWD! • RWD!
• RWD!
• RWD!
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects

17. 1-Deliverable Workflow
Back-end
Front-end
Design
UX
Content
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects

18. Content first. Stop thinking about content in terms of
layout, and plan content independent of design.
!
Mobile first. Stop the focus on device thinking, and
assume a omni-device world where we work on style
direction independent of layout.

19. Content
Discovery!
• Research to uncover user needs
• Develop personas
• Create the user journey map that
becomes our product strategy
Planning!
• Evolve the user journey map into a
Content plan
• Information Architecture document

20. Sketching!
• Do not do static wireframes.
• Allows people to try multiple
solutions to a problem before settling
on one or two ideas to iterate further.
http://www.cennydd.com/blog/why-i-dont-wireframe-much?s=2012/why-i-dont-wireframe-much
UX

21. UX
http://zurb.com/playground/responsive-sketchsheets

22. The Post-PSD Era
Design
We still need Photoshop, but
it’s no longer our starting point.

23. The Post-PSD Era
Design
Photoshop is great for:!
• Creating and editing
graphics. Duh.
• Establishing the colors,
textures and general feel of a
design.
• Developing Style Tiles, mood
boards, etc.
Photoshop is not great for:!
• Creating fully fleshed-out comps –
It’s impossible to articulate every
environment, resolution, and
circumstance in Photoshop.
• Articulating states – Hovers, clicks,
and other interactive elements are
better prototypes that show
performance, responsiveness,
ergonomics, and feel.

24. Design
The Post-PSD Era
Designer: Here’s a comp of what your site will look like.
Client: Great! But what will it look like on my iPhone?
Designer: Oh, I’ll show you that.
Client: And what about my iPad? Will you show me that too?
Designer: Sure.
Client: Will it look good on my boss’s Blackberry? And
landscape orientation on my iPad2? What about the Surface?
I think I might get a Galaxy Tab. Retina screens!
http://danielmall.com/articles/the-post-psd-era/

25. Design Content Prototype

26. Design Style Prototype

27. Design Style Tiles
http://styletil.es

28. Design Style Tiles
http://styletil.es

29. Design

30. Front-end Development
Modular Approach
Build pieces, not pages

31. Atomic Design Front-end Development
Atoms
http://bradfrostweb.com/blog/post/atomic-web-design/
Molecules
Organisms

32. Atomic Design Front-end Development
http://bradfrostweb.com/blog/post/atomic-web-design/
Templates

33. Front-end Development http://daverupert.com/2013/04/responsive-deliverables/

34. Front-end Development http://patternlab.io

35. Front-end Development http://patternlab.io

36. Testing Front-end Development
You must test on physical devices.

37. Front-end Development http://creative.adobe.com/products/inspect

38. Front-end Development http://www.browserstack.com/

39. Performance Front-end Development
http://www.websiteoptimization.com/speed/tweak/average-web-page/

40. Iterate
Back-end
Front-end
Design
UX
Content

41. This is Responsive
http://bradfrost.github.io/this-is-responsive/
• Inspiration
• Strategies
• Case Studies
• Processes
• Tools
• Code, Code, and more Code

42. Consistent = Identical
http://mediaqueri.es/skt/

43. Consistent = Identical

44. Thank You! Dustin Tauer - Easel Solutions
dustin@easelsolutions.com
@dtauer