The Yin and Yang of Responsive Web Design
•
4 gefällt mir•1,661 views
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.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (8)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
The Yin and Yang of Responsive Web Design
- 2. About this guy Name: Craft: Locale: Crew: XP: ERIC CARLISLE FULL STACK DEVELOPER / UI / UX BALTIMORE, MD PLANIT ( Http://www.planitagency.com )
- 3. Agenda § Intro & OVERVIEW § Responsive Demands and challenges § Traditional workflow § Responsive workflow § Approaches & Tools § Q/A
- 4. Overview
- 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. KISS – Keep it Stunningly Simple! § There will be opportunity for Complication § Asset integration § CMS Integration § 3rd party Add-ons, services § Changing Requirements
- 7. Responsive Design Overview § Width-specific presentation § Usability, Accessibility, and UX for ALL DEVICES. § One codebase to rule them all.* * Apologies!
- 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 )
- 10. Resulting Challenges • Much More work! More time? Resources? • UX – less real estate to compel, inspire • Awkward HCI
- 11. Resulting Challenges § Fidelity – how much and when? § Approach – Mobile or desktop first? § Customers – want a finished product
- 13. Traditional Website Workflow DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY PROJECT & ACCOUNT MGMT. CUSTOMER / STAKEHOLDER APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
- 14. Traditional Website Workflow DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY CUSTOMER / STAKEHOLDER APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL Waterfall PROJECT & ACCOUNT MGMT.
- 15. Parallel Expectations & Deliverables DISCOVER DESIGN DEVELOP DEPLOY WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION
- 16. Parallel Expectations & Deliverables DISCOVER DESIGN DEVELOP DEPLOY ? WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION ? ? ? ? FIDELITY? FIDELITY? FIDELITY? Changes?
- 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. Traditional Website Workflow DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY budget CLIENT: “I KNOW WHAT I WANT NOW!”
- 19. Presumptuous Deliverables § WE’RE ALREADY DESIGNING? § PREMATURE? PRESUMPTUOUS? § Looks good on paper, but…
- 20. Dangerous Conclusions § Silos & Assembly lines § Waterfall Workflow § premature fidelity § Dangerous presumption
- 22. for each SCREEN, START WITH the MOST important message Content-Out Design
- 23. Responsive Website Workflow DISCOVERY & PLANNING
- 24. Responsive Website Workflow DISCOVERY & PLANNING
- 25. PROTOTYPEEVALUATION Responsive Website Workflow DISCOVERY: • CONTENT INVENTORY • INFORMATION ARCH. DESIGN* DEVELOP COLLABORATION AND SPECIALIZATION
- 26. PROTOTYPEEVALUATION Responsive Website Workflow DISCOVERY & PLANNING DESIGN* DEVELOP DESIGN: § WIREFRAMING § INTERACTIVE § SKETCH § GRAPHIC § UX
- 27. PROTOTYPEEVALUATION Responsive Website Workflow DISCOVERY: • CONTENT INVENTORY • INFORMATION ARCH. DESIGN* DEVELOP REFINED END RESULT!!
- 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. Prototype § Stronger collaboration § Not throw-away work § Validation via User testing!!! § Iterative sign-off
- 30. Approaches & TOOLS I FINALLY FOUND WHAT I WAS LOOKING FOR!!!
- 31. Mobile First? § Content-out design strategy § Progressive enhancement § Not always how we visualize
- 32. Desktop First? § Easier to visualize, sell § “Graceful” degradation § Is this the best content approach?
- 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. Prototyping / Mockup Tools § Low to high fidelity § INTERACTIONS § COMPONENTS § Facilitates collaboration § PRESENTATION OPTIONS
- 35. Fireworks § Quick & EASY § For Web Design Only § BITMAP & VECTOR § Retired, BUT…
- 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. Frameworks § Fantastic, but double edged § Use only what you need ( Patterns ) § Don’t encourage silos
- 38. Frameworks § Fantastic, but double edged § Use only what you need ( Patterns ) § Don’t encourage silos § My weapons of choice:
- 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
Hinweis der Redaktion
- 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: