0
Of
And Yang
The Yin
Responsive
Workflow
About this guy
Name:
Craft:
Locale:
Crew:
XP:
ERIC CARLISLE
FULL STACK DEVELOPER / UI / UX
BALTIMORE, MD
PLANIT ( Http://w...
Agenda
§ Intro & OVERVIEW
§ Responsive Demands and challenges
§ Traditional workflow
§ Responsive workflow
§ Approach...
Overview
My Core Project Philosophy
Absolute
Necessity
Absolute
Indulgence
Practical
Balance
Mediocrity
Low Reusability
High Mainte...
KISS – Keep it Stunningly Simple!
§ There will be opportunity for Complication
§ Asset integration
§ CMS Integration
§...
Responsive Design Overview
§ Width-specific presentation
§ Usability, Accessibility, and UX for ALL
DEVICES.
§ One code...
2013 – From Novel to Essential
§  2012 – Greater adoption of tablet & mobile.
§  Increased daily usage
§  More use case...
Demands & Challenges
Resulting Challenges
•  Much More work! More time? Resources?
•  UX – less real estate to compel, inspire
•  Awkward HCI
Resulting Challenges
§ Fidelity – how much and when?
§ Approach – Mobile or desktop first?
§ Customers – want a finishe...
Traditional website workflow
Traditional Website Workflow
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
PROJECT &
ACCOUNT
MGMT.
CUSTOMER /
STAKEHOLDER
APPROVA...
Traditional Website Workflow
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
CUSTOMER /
STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPR...
Parallel Expectations & Deliverables
DISCOVER DESIGN DEVELOP DEPLOY
WIREFRAMES	
   COMPS	
   ARCHITECTURE	
  
WEB	
  SITE	...
Parallel Expectations & Deliverables
DISCOVER DESIGN DEVELOP DEPLOY
?	
  
WIREFRAMES	
   COMPS	
   ARCHITECTURE	
  
WEB	
 ...
Parallel Requirements & Expectations
DISCOVER DESIGN DEVELOP DEPLOY
?	
  
WIREFRAMES	
   COMPS	
   ARCHITECTURE	
  
WEB	
 ...
Traditional Website Workflow
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
budget	
  
CLIENT:
“I KNOW WHAT I
WANT NOW!”
Presumptuous Deliverables
§  WE’RE ALREADY DESIGNING?
§  PREMATURE? PRESUMPTUOUS?
§  Looks good on paper, but…
Dangerous Conclusions
§ Silos & Assembly lines
§ Waterfall Workflow
§ premature fidelity
§ Dangerous presumption
Responsive website workflow
for each SCREEN,
START WITH the MOST important message
Content-Out Design
Responsive Website Workflow
DISCOVERY & PLANNING
Responsive Website Workflow
DISCOVERY & PLANNING
PROTOTYPEEVALUATION
Responsive Website Workflow
DISCOVERY:
•  CONTENT INVENTORY
•  INFORMATION ARCH.
DESIGN*
DEVELOP
COLLAB...
PROTOTYPEEVALUATION
Responsive Website Workflow
DISCOVERY & PLANNING
DESIGN*
DEVELOP DESIGN:
§  WIREFRAMING
§  INTERACTIV...
PROTOTYPEEVALUATION
Responsive Website Workflow
DISCOVERY:
•  CONTENT INVENTORY
•  INFORMATION ARCH.
DESIGN*
DEVELOP
REFINE...
Designing – Low to High Fidelity
§ Starting conservatively
§ FIDELITY as discovery, validation
§ No separation of desig...
Prototype
§ Stronger collaboration
§ Not throw-away work
§ Validation via User testing!!!
§ Iterative sign-off
Approaches & TOOLS
I FINALLY FOUND
WHAT I WAS
LOOKING FOR!!!
Mobile First?
§ Content-out design strategy
§ Progressive enhancement
§ Not always how we visualize
Desktop First?
§ Easier to visualize, sell
§ “Graceful” degradation
§ Is this the best content approach?
Metrics, Metrics, Metrics
§ Avoid anything static ( PX, PT, INCHES )
§ You don’t have time to do the math!
§ Embrace TH...
Prototyping / Mockup Tools
§  Low to high fidelity
§  INTERACTIONS
§  COMPONENTS
§  Facilitates collaboration
§  PRES...
Fireworks
§  Quick & EASY
§  For Web Design Only
§  BITMAP & VECTOR
§  Retired, BUT…
Fireworks
§  Quick & EASY
§  For Web Design Only
§  BITMAP & VECTOR
§  Retired, BUT…
UNDERDOG
www.tribaloid.com
PROJEC...
Frameworks
§ Fantastic, but double edged
§ Use only what you need ( Patterns )
§ Don’t encourage silos
Frameworks
§ Fantastic, but double edged
§ Use only what you need ( Patterns )
§ Don’t encourage silos
§ My weapons of...
Design Methodologies
§  Atomic Design
§  ATOM > MOLECULE > ORGANISM > TEMPLATE > PAGE
http://bradfrostweb.com/blog/post/...
Q / A
eric@ericcarlisle.com
http://www.facebook.com/eric.carlisle
@eric_carlisle
erictcarlisle
Upcoming SlideShare
Loading in...5
×

The Yin and Yang of Responsive Web Design

1,131

Published on

Responsive design has revolutionized the way we create websites, yet there is a strong tendancy to still use traditional workflow methodologies. Such workflows can make a project far less efficient while adding a gamut of risks. This session will explore this dilemma, propose alternate workflows for responsive website projects, and offer respective approaches and tooling options for both designers and developers.

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,131
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Yin and Yang:We’re speaking in terms of equal forces that work in a complementary fashion to complete a common objective.In this regard, we’re speaking of designers and developers.With Responsive Design, this is more important that ever because the core responsibilities are now much more multifaceted and complicated.There’s more and more opportunity for efforts in break into tangents and distractions, causing confusion, miscommunication, and rework.We’re going to speak about workflow that:Mitigate these risksEmpower both designers and developers to do what they do best.Have and end product that everyone is happy with.Mat not fit every situation… So take from this what’s useful to you.
  • Responsive Demands and Challenges:Resource management pressure on project timeline level of customer involvementHow does this change my 9-5Traditional Workflows:Not obsolete, but not a perfect matchApproaches and Tools: to compliment these new workflows.Responsive Workflows:Not perfect, but an important paradigm shift.
  • TODO:Crawl text?
  • My Core Technological Philosophy (a very YIN / YANG perspective to take)Your best chances for a project succeeding is by taking approaches that are somewhere between necessity and indulgence.The practical balance isn’t always a the mid point, it depends on the project.I don’t think we have to worry about the necessity side in this room. By being at this conference, you’re showing:Passion for your craftYou have the interest to learnYou want to stay competitive in a changing landscape.The real danger in project success happens when we’re too indulgent, aggressive, ambitious.The danger in taking this approach is that you risk failure. Then we determine what we can salvage – which drives is to necessity.At this point, we’re faced with permanency. It’s all bad and will probably encourage more bad practices, but there’s seldom the resources to fix it entirely.
  • Width-Specific Presentation:Example: http://www.gizmodo.comContent is more important than ever.Viewport space limits content. – that’s a good thing and a great place to start. Pick which content is most important for each viewport. Hopefully when you get to the desktop, you won’t have Las Vegas.Content as a Foundation – Not only what will fit on the screen. Also prioritization of content.
  • A lot of organizations are calling 2013 the year of Responsive Adoption2012 saw increased adoption in mobile devices (Christmas – cheap tablets)Increased smartphone ownership (90% of mobile phone users have smart phones)
  • More Work:It’s not uncommon for responsive to be though of and sold as an add-onfeature instead of a holistic architectural approach.Awkward HCI:Most of the time, we’re using a finger for interaction. After all, that’s how it was designed.If Traditional Web site workflow – waterfall (even thought the steps can be agile)
  • TODO – Get complicated wireframes
  • Call it what you will, but the entire project uses waterfall workflow.The premise is that one stage begins when another ends.Develop: Most likely portion of the software development lifecycle to see Agile Workflow is in development.
  • Call it what you will, but the entire project uses waterfall33 workflow.Iteration can happen at every step (especially design)Develop: Most likely portion of the software development lifecycle to see Agile Workflow is in development.
  • Each stage creates it’s own independent set unique set of requirements.
  • We’re already designing:At this point, we’ve already done much of the design without input from graphic designers.Stephen Hay calls refers to this step as “coloring by numbers”Premature? Presumptuous:Very high fidelity. Do we know if this wireframe will jive with the design or dev strategy?Customer may have given sign-off, but have they been given enough yet to make good decision?Looks good on paper:It’s usually at high-fidelity design where the customer is able to relate to the message.
  • Dangerous Presumption:Person A is making the decision that person B should
  • Benefits:Collaborative, not bureaucraticIterative gain in fidelityProactive and reactiveCross-functional & results-basedALL TEAM MEMBERS ARE PROBLEM SOLVERS EXAMPLE: LOFI
  • Benefits:Collaborative, not bureaucraticIterative gain in fidelityProactive and reactiveCross-functional & results-basedALL TEAM MEMBERS ARE PROBLEM SOLVERS EXAMPLE: LOFI
  • Collaboration and Specialization
  • Benefits:Collaborative, not bureaucraticIterative gain in fidelityProactive and reactiveCross-functional & results-basedALL TEAM MEMBERS ARE PROBLEM SOLVERS EXAMPLE: LOFI
  • Benefits:Collaborative, not bureaucraticIterative gain in fidelityProactive and reactiveCross-functional & results-basedALL TEAM MEMBERS ARE PROBLEM SOLVERS EXAMPLE: LOFI
  • EXAMPLE
  • Stronger Collaboration:Everyone shares a comfort zone (HTML, CSS, JavaScript)Not Throw Away Work:HTML – Can be the wireframe, design, architecture, deliverableValidating via User Testing:If you have the resources and opportunity to conduct user testing, DO IT!Helps to avoid incorrect assumptions Learn your mistakes before release. Don’t discover (ALL OF) them with analytics.Iterative Sign Off:Ensure that the client gets exactly what they want.
  • Don’t Encourage Silos:
  • Transcript of "The Yin and Yang of Responsive Web Design"

    1. 1. Of And Yang The Yin Responsive Workflow
    2. 2. About this guy Name: Craft: Locale: Crew: XP: ERIC CARLISLE FULL STACK DEVELOPER / UI / UX BALTIMORE, MD PLANIT ( Http://www.planitagency.com )
    3. 3. Agenda § Intro & OVERVIEW § Responsive Demands and challenges § Traditional workflow § Responsive workflow § Approaches & Tools § Q/A
    4. 4. Overview
    5. 5. My Core Project Philosophy Absolute Necessity Absolute Indulgence Practical Balance Mediocrity Low Reusability High Maintenance Permanency FRUSTRATION COMPROMISE USABLE MAINTAINABLE ADAPTABLE Satisfying RISKY UNREALISTIC Costly Often fails Disappointment
    6. 6. KISS – Keep it Stunningly Simple! § There will be opportunity for Complication § Asset integration § CMS Integration § 3rd party Add-ons, services § Changing Requirements  
    7. 7. Responsive Design Overview § Width-specific presentation § Usability, Accessibility, and UX for ALL DEVICES. § One codebase to rule them all.* * Apologies!
    8. 8. 2013 – From Novel to Essential §  2012 – Greater adoption of tablet & mobile. §  Increased daily usage §  More use cases   §  New revenue streams ( Mobile advertising ) §  IT’s Expected ( So, New competition )
    9. 9. Demands & Challenges
    10. 10. Resulting Challenges •  Much More work! More time? Resources? •  UX – less real estate to compel, inspire •  Awkward HCI
    11. 11. Resulting Challenges § Fidelity – how much and when? § Approach – Mobile or desktop first? § Customers – want a finished product
    12. 12. Traditional website workflow
    13. 13. Traditional Website Workflow DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY PROJECT & ACCOUNT MGMT. CUSTOMER / STAKEHOLDER APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
    14. 14. Traditional Website Workflow DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY CUSTOMER / STAKEHOLDER APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL Waterfall PROJECT & ACCOUNT MGMT.
    15. 15. Parallel Expectations & Deliverables DISCOVER DESIGN DEVELOP DEPLOY WIREFRAMES   COMPS   ARCHITECTURE   WEB  SITE  /   APPLICATION  
    16. 16. Parallel Expectations & Deliverables DISCOVER DESIGN DEVELOP DEPLOY ?   WIREFRAMES   COMPS   ARCHITECTURE   WEB  SITE  /   APPLICATION   ?   ?  ?   ?   FIDELITY? FIDELITY? FIDELITY? Changes?
    17. 17. Parallel Requirements & Expectations DISCOVER DESIGN DEVELOP DEPLOY ?   WIREFRAMES   COMPS   ARCHITECTURE   WEB  SITE  /   APPLICATION   ?   ?  ?   ?   FIDELITY? FIDELITY? FIDELITY? Changes? WHICH ONE? SYNC SYNC SYNC REDO REDO REDO SYNC
    18. 18. Traditional Website Workflow DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY budget   CLIENT: “I KNOW WHAT I WANT NOW!”
    19. 19. Presumptuous Deliverables §  WE’RE ALREADY DESIGNING? §  PREMATURE? PRESUMPTUOUS? §  Looks good on paper, but…
    20. 20. Dangerous Conclusions § Silos & Assembly lines § Waterfall Workflow § premature fidelity § Dangerous presumption
    21. 21. Responsive website workflow
    22. 22. for each SCREEN, START WITH the MOST important message Content-Out Design
    23. 23. Responsive Website Workflow DISCOVERY & PLANNING
    24. 24. Responsive Website Workflow DISCOVERY & PLANNING
    25. 25. PROTOTYPEEVALUATION Responsive Website Workflow DISCOVERY: •  CONTENT INVENTORY •  INFORMATION ARCH. DESIGN* DEVELOP COLLABORATION AND SPECIALIZATION
    26. 26. PROTOTYPEEVALUATION Responsive Website Workflow DISCOVERY & PLANNING DESIGN* DEVELOP DESIGN: §  WIREFRAMING §  INTERACTIVE §  SKETCH §  GRAPHIC §  UX
    27. 27. PROTOTYPEEVALUATION Responsive Website Workflow DISCOVERY: •  CONTENT INVENTORY •  INFORMATION ARCH. DESIGN* DEVELOP REFINED END RESULT!!
    28. 28. Designing – Low to High Fidelity § Starting conservatively § FIDELITY as discovery, validation § No separation of design discliplines § Do we have to use Photoshop YET?
    29. 29. Prototype § Stronger collaboration § Not throw-away work § Validation via User testing!!! § Iterative sign-off
    30. 30. Approaches & TOOLS I FINALLY FOUND WHAT I WAS LOOKING FOR!!!
    31. 31. Mobile First? § Content-out design strategy § Progressive enhancement § Not always how we visualize
    32. 32. Desktop First? § Easier to visualize, sell § “Graceful” degradation § Is this the best content approach?
    33. 33. Metrics, Metrics, Metrics § Avoid anything static ( PX, PT, INCHES ) § You don’t have time to do the math! § Embrace THE RELATIVE ( EM, REM, % ) § FACILITATES COLLABORATION § Future proof!
    34. 34. Prototyping / Mockup Tools §  Low to high fidelity §  INTERACTIONS §  COMPONENTS §  Facilitates collaboration §  PRESENTATION OPTIONS
    35. 35. Fireworks §  Quick & EASY §  For Web Design Only §  BITMAP & VECTOR §  Retired, BUT…
    36. 36. Fireworks §  Quick & EASY §  For Web Design Only §  BITMAP & VECTOR §  Retired, BUT… UNDERDOG www.tribaloid.com PROJECT PHOENIX phoenix-project.tumblr.com SKETCH www.bohemiancoding.com/sketch
    37. 37. Frameworks § Fantastic, but double edged § Use only what you need ( Patterns ) § Don’t encourage silos
    38. 38. Frameworks § Fantastic, but double edged § Use only what you need ( Patterns ) § Don’t encourage silos § My weapons of choice:
    39. 39. Design Methodologies §  Atomic Design §  ATOM > MOLECULE > ORGANISM > TEMPLATE > PAGE http://bradfrostweb.com/blog/post/atomic-web-design §  SMACSS §  THOUGHT PROCESS TO CREATE CONCISE, CLEAN CSS http://smacss.com/ §  LESS, SASS §  A STYLING CONTRACT! http://www.lesscss.com http://sass-lang.com
    40. 40. Q / A eric@ericcarlisle.com http://www.facebook.com/eric.carlisle @eric_carlisle erictcarlisle
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×