yin and yang_of_responsive_web_design
DESCRIPTION
TRANSCRIPT
![Page 1: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/1.jpg)
Of And Yang
!" Y#$
Responsive Workflow
![Page 2: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/2.jpg)
Ab%&' '(#) *&+
N,-":
Cr,.:
L%/,0":
Cr"w:
XP:
ERIC CARLISLE
FULL STACK DEVELOPER / UI / UX
BALTIMORE, MD
PLANIT ( Http://www.planitagency.com )
![Page 3: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/3.jpg)
A*"$1,
§ Intro & OVERVIEW
§ Responsive Demands and challenges
§ Traditional workflow
§ Responsive workflow
§ Approaches & Tools
§ Q/A
![Page 4: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/4.jpg)
Overview
![Page 5: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/5.jpg)
M+ C%r" Pr%2"/' P(#03%4(+
A5%0&'" N"/"))#'+
A5%0&'" I$1&0*"$/"
Pr,/'#/,0 B,0,$/"
Mediocrity
Low Reusability
High Maintenance
Permanency
FRUSTRATION
COMPROMISE
USABLE
MAINTAINABLE
ADAPTABLE
Satisfying
RISKY
UNREALISTIC
Costly
Often fails
Disappointment
![Page 6: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/6.jpg)
KISS – K""4 #' S'&$$#$*0+ S#-40"!
§ There will be opportunity for Complication
§ Asset integration
§ CMS Integration
§ 3rd party Add-ons, services
§ Changing Requirements
![Page 7: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/7.jpg)
R")4%$)#v" D")#*$ Ov"rv#"w
§ Width-specific presentation
§ Usability, Accessibility, and UX for ALL
DEVICES.
§ One codebase to rule them all.*
* Apologies!
![Page 8: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/8.jpg)
2013 – Fr%- N%v"0 '% E))"$'#,0
§ 2012 – Greater adoption of tablet & mobile.
§ Increased daily usage
§ More use cases
§ New revenue streams ( Mobile advertising )
§ IT’s Expected ( So, New competition )
![Page 9: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/9.jpg)
Demands & Challenges
![Page 10: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/10.jpg)
R")&0'#$* C(,00"$*")
• Much More work! More time? Resources?
• UX – less real estate to compel, inspire
• Awkward HCI
![Page 11: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/11.jpg)
R")&0'#$* C(,00"$*")
§ Fidelity – how much and when?
§ Approach – Mobile or desktop first?
§ Customers – want a finished product
![Page 12: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/12.jpg)
Traditional website workflow
![Page 13: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/13.jpg)
Tr,1#'#%$,0 W"5#'" W%r67%w
DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY
PROJECT & ACCOUNT
MGMT.
CUSTOMER / STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
![Page 14: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/14.jpg)
Tr,1#'#%$,0 W"5#'" W%r67%w
DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY
CUSTOMER / STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
Waterfall PROJECT & ACCOUNT
MGMT.
![Page 15: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/15.jpg)
P,r,00"0 84"/','#%$) & D"0#v"r,b0")
DISCOVER DESIGN DEVELOP DEPLOY
WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION
![Page 16: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/16.jpg)
P,r,00"0 84"/','#%$) & D"0#v"r,b0")
DISCOVER DESIGN DEVELOP DEPLOY
?
WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION
? ? ?
?
FIDELITY? FIDELITY? FIDELITY? Changes?
![Page 17: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/17.jpg)
P,r,00"0 R"q&#r"-"$') & 84"/','#%$)
DISCOVER DESIGN DEVELOP DEPLOY
?
WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION
? ? ?
?
FIDELITY? FIDELITY? FIDELITY? Changes?
WHICH ONE?
SYNC
SYNC
SYNC
REDO
REDO
REDO
SYNC
![Page 18: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/18.jpg)
Tr,1#'#%$,0 W"5#'" W%r67%w
DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY
budget
CLIENT: “I KNOW WHAT I
WANT NOW!”
![Page 19: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/19.jpg)
Pr")&-4'&%&) D"0#v"r,b0")
§ WE’RE ALREADY DESIGNING? § PREMATURE? PRESUMPTUOUS?
§ Looks good on paper, but…
![Page 20: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/20.jpg)
D,$*"r%&) C%$/0&)#%$)
§ Silos & Assembly lines
§ Waterfall Workflow
§ premature fidelity
§ Dangerous presumption
![Page 21: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/21.jpg)
Responsive website workflow
![Page 22: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/22.jpg)
for each SCREEN, START WITH the MOST important message
C%$'"$'-O&' D")#*$
![Page 23: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/23.jpg)
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY & PLANNING
![Page 24: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/24.jpg)
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY & PLANNING
![Page 25: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/25.jpg)
PROTOTYPE EVALUATION
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY: • CONTENT INVENTORY • INFORMATION ARCH.
DESIGN*
DEVELOP
COLLABORATION AND
SPECIALIZATION
![Page 26: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/26.jpg)
PROTOTYPE EVALUATION
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY & PLANNING
DESIGN*
DEVELOP DESIGN:
§ WIREFRAMING § INTERACTIVE § SKETCH § GRAPHIC § UX
![Page 27: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/27.jpg)
PROTOTYPE EVALUATION
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY: • CONTENT INVENTORY • INFORMATION ARCH.
DESIGN*
DEVELOP
REFINED END RESULT!!
![Page 28: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/28.jpg)
D")#*$#$* – L%w '% H#*( 91"0#'+
§ Starting conservatively
§ FIDELITY as discovery, validation
§ No separation of design discliplines
§ Do we have to use Photoshop YET?
![Page 29: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/29.jpg)
Pr%'%':"
§ Stronger collaboration
§ Not throw-away work
§ Validation via User testing!!!
§ Iterative sign-off
![Page 30: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/30.jpg)
Approaches & TOOLS
I FINALLY FOUND WHAT I WAS
LOOKING FOR!!!
![Page 31: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/31.jpg)
M%b#0" 9r)'?
§ Content-out design strategy
§ Progressive enhancement
§ Not always how we visualize
![Page 32: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/32.jpg)
D")6'%4 9r)'?
§ Easier to visualize, sell
§ “Graceful” degradation
§ Is this the best content approach?
![Page 33: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/33.jpg)
M"'r#/), M"'r#/), M"'r#/)
§ Avoid anything static ( PX, PT, INCHES ) § You don’t have time to do the math!
§ Embrace THE RELATIVE ( EM, REM, % ) § FACILITATES COLLABORATION
§ Future proof!
![Page 34: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/34.jpg)
Pr%'%':#$* / M%/6&4 T%%0)
§ Low to high fidelity
§ INTERACTIONS
§ COMPONENTS
§ Facilitates collaboration
§ PRESENTATION OPTIONS
![Page 35: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/35.jpg)
9r"w%r6) § Quick & EASY
§ For Web Design Only
§ BITMAP & VECTOR
§ Retired, BUT…
![Page 36: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/36.jpg)
9r"w%r6) § 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
![Page 37: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/37.jpg)
Fr,-"w%r6)
§ Fantastic, but double edged
§ Use only what you need ( Patterns )
§ Don’t encourage silos
![Page 38: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/38.jpg)
Fr,-"w%r6)
§ Fantastic, but double edged
§ Use only what you need ( Patterns )
§ Don’t encourage silos
§ My weapons of choice:
![Page 39: Yin and yang_of_responsive_web_design](https://reader033.vdocument.in/reader033/viewer/2022050905/54b790da4a79591d4a8b459a/html5/thumbnails/39.jpg)
D")#*$ M"'(%1%0%*#")
§ 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