mima 2014 - changing your responsive design workflow

Thank You, Summit Sponsors

Changing Your Responsive Design Workflow

Dustin Tauer, Easel Solutions!dustin@easelsolutions.com!

@dtauer

– Ethan Marcotte, 2010 http://alistapart.com/article/responsive-web-design

“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.”

Desktop, Tablet, & Mobile Browser Traffic

US time spent accessing Internet

Responsive Design

M-dot (Mobile) Site

Mobile App

US smartphone users’ number of app downloads per month

http://wtfmobileweb.com/

M-Dot (Mobile Site)

iPhone 6 Plus vs. Samsung Galaxy Note 4

iOS Fragmentation

http://opensignal.com/reports/2014/android-fragmentation/

Android Fragmentation

http://opensignal.com/reports/2014/android-fragmentation/

bostonglobe.com

Patty Toland, filamentgroup.com

Design consistency isn’t pixels !

Design consistency is purpose

Patty Toland, filamentgroup.com

We need a workflow that respects the past but

prepares us for the future.

The Old Workflow

Launch!Design Front-end Back-end

https://speakerdeck.com/bencallahan/workflow-on-rwd-projects

• Start thinking about users • Lots of Lorem Ipsum (or Hipster Ipsum)

• Drop in the content

Current Workflow

Launch!Design Front-end Back-end

• RWD!

UXContent

• RWD! • RWD! • RWD! • RWD! • RWD!

https://speakerdeck.com/bencallahan/workflow-on-rwd-projects

1-Deliverable Workflow

Back-end

Front-end

Design

UX

Content

https://speakerdeck.com/bencallahan/workflow-on-rwd-projects

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.

Discovery!

• Research to uncover user needs

• Develop personas

• Create the user journey map that becomes our product strategy

Content

Planning!

• Evolve the user journey map into a Content plan

• Information Architecture document

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

UX

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

The Post-PSD Era

Design

We still need Photoshop, but it’s no longer our starting point.

The Post-PSD EraPhotoshop is great for:!

• Creating and editing graphics. Duh.

• Establishing the colors, textures and general feel of a design.

• Developing Style Tiles, mood boards, etc.

Design

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.

Design

http://danielmall.com/articles/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!

The Post-PSD Era

Content PrototypeDesign

Design Style Prototype

Style TilesDesign

http://styletil.es

Design Style Tiles

http://styletil.es

Design

Modular ApproachBuild pieces, not pages

Front-end Development

Atomic DesignFront-end Development

http://bradfrostweb.com/blog/post/atomic-web-design/

AtomsMolecules

Organisms

Atomic DesignFront-end Development

http://bradfrostweb.com/blog/post/atomic-web-design/

Templates

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

Front-end Development http://patternlab.io

Front-end Development http://patternlab.io

TestingFront-end Development

You must test on physical devices.

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

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

PerformanceFront-end Development

http://www.websiteoptimization.com/speed/tweak/average-web-page/

Iterate

Back-end

Front-end

Design

UX

Content

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

This is Responsive

Consistent = Identical

http://mediaqueri.es/skt/

Consistent = Identical

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