yin and yang_of_responsive_web_design
DESCRIPTION
TRANSCRIPT
Of And Yang
!" Y#$
Responsive Workflow
Ab%&' '(#) *&+
N,-":
Cr,.:
L%/,0":
Cr"w:
XP:
ERIC CARLISLE
FULL STACK DEVELOPER / UI / UX
BALTIMORE, MD
PLANIT ( Http://www.planitagency.com )
A*"$1,
§ Intro & OVERVIEW
§ Responsive Demands and challenges
§ Traditional workflow
§ Responsive workflow
§ Approaches & Tools
§ Q/A
Overview
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
KISS – K""4 #' S'&$$#$*0+ S#-40"!
§ There will be opportunity for Complication
§ Asset integration
§ CMS Integration
§ 3rd party Add-ons, services
§ Changing Requirements
R")4%$)#v" D")#*$ Ov"rv#"w
§ Width-specific presentation
§ Usability, Accessibility, and UX for ALL
DEVICES.
§ One codebase to rule them all.*
* Apologies!
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 )
Demands & Challenges
R")&0'#$* C(,00"$*")
• Much More work! More time? Resources?
• UX – less real estate to compel, inspire
• Awkward HCI
R")&0'#$* C(,00"$*")
§ Fidelity – how much and when?
§ Approach – Mobile or desktop first?
§ Customers – want a finished product
Traditional website workflow
Tr,1#'#%$,0 W"5#'" W%r67%w
DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY
PROJECT & ACCOUNT
MGMT.
CUSTOMER / STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
Tr,1#'#%$,0 W"5#'" W%r67%w
DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY
CUSTOMER / STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
Waterfall PROJECT & ACCOUNT
MGMT.
P,r,00"0 84"/','#%$) & D"0#v"r,b0")
DISCOVER DESIGN DEVELOP DEPLOY
WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION
P,r,00"0 84"/','#%$) & D"0#v"r,b0")
DISCOVER DESIGN DEVELOP DEPLOY
?
WIREFRAMES COMPS ARCHITECTURE WEB SITE / APPLICATION
? ? ?
?
FIDELITY? FIDELITY? FIDELITY? Changes?
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
Tr,1#'#%$,0 W"5#'" W%r67%w
DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY
budget
CLIENT: “I KNOW WHAT I
WANT NOW!”
Pr")&-4'&%&) D"0#v"r,b0")
§ WE’RE ALREADY DESIGNING? § PREMATURE? PRESUMPTUOUS?
§ Looks good on paper, but…
D,$*"r%&) C%$/0&)#%$)
§ Silos & Assembly lines
§ Waterfall Workflow
§ premature fidelity
§ Dangerous presumption
Responsive website workflow
for each SCREEN, START WITH the MOST important message
C%$'"$'-O&' D")#*$
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY & PLANNING
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY & PLANNING
PROTOTYPE EVALUATION
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY: • CONTENT INVENTORY • INFORMATION ARCH.
DESIGN*
DEVELOP
COLLABORATION AND
SPECIALIZATION
PROTOTYPE EVALUATION
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY & PLANNING
DESIGN*
DEVELOP DESIGN:
§ WIREFRAMING § INTERACTIVE § SKETCH § GRAPHIC § UX
PROTOTYPE EVALUATION
R")4%$)#v" W"5#'" W%r67%w
DISCOVERY: • CONTENT INVENTORY • INFORMATION ARCH.
DESIGN*
DEVELOP
REFINED END RESULT!!
D")#*$#$* – L%w '% H#*( 91"0#'+
§ Starting conservatively
§ FIDELITY as discovery, validation
§ No separation of design discliplines
§ Do we have to use Photoshop YET?
Pr%'%':"
§ Stronger collaboration
§ Not throw-away work
§ Validation via User testing!!!
§ Iterative sign-off
Approaches & TOOLS
I FINALLY FOUND WHAT I WAS
LOOKING FOR!!!
M%b#0" 9r)'?
§ Content-out design strategy
§ Progressive enhancement
§ Not always how we visualize
D")6'%4 9r)'?
§ Easier to visualize, sell
§ “Graceful” degradation
§ Is this the best content approach?
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!
Pr%'%':#$* / M%/6&4 T%%0)
§ Low to high fidelity
§ INTERACTIONS
§ COMPONENTS
§ Facilitates collaboration
§ PRESENTATION OPTIONS
9r"w%r6) § Quick & EASY
§ For Web Design Only
§ BITMAP & VECTOR
§ Retired, BUT…
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
Fr,-"w%r6)
§ Fantastic, but double edged
§ Use only what you need ( Patterns )
§ Don’t encourage silos
Fr,-"w%r6)
§ Fantastic, but double edged
§ Use only what you need ( Patterns )
§ Don’t encourage silos
§ My weapons of choice:
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
