Embed Size (px)
DESCRIPTION
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.
Citation preview
Thank You, Summit Sponsors
– 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/
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/
TestingFront-end Development
You must test on physical devices.
Front-end Development http://creative.adobe.com/products/inspect
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 [email protected] @dtauer
![1000249 [2010] RRTA 304 (7 April 2010)191 CLR 559, Chen Shi Hai v MIMA (2000) 201 CLR 293, MIMA v Haji Ibrahim (2000) 204 CLR 1, MIMA v Khawar (2002) 210 CLR 1, MIMA v Respondents](https://img.pdfslide.us/doc/110x75/60bb72bf417f672d4c6e0a4f/1000249-2010-rrta-304-7-april-2010-191-clr-559-chen-shi-hai-v-mima-2000-201.jpg)
