responsive design is hard/easy! be afraid/don't worry!
DESCRIPTION
TRANSCRIPT
A brief history lesson2009
A brief history lessonA website th!t looks "ood no m!tter where or how I !ccess it.
bounceb!r"!inrent!ls.com
A brief history lessonA website th!t looks "ood no m!tter where or how I !ccess it.
!list!p!rt.com/!rticle/responsive-web-desi"n
WaterfallIm!"e: http://dm!ll.me/ZX7p#N
Im!"e: Goo"le “#lexible old l!d$”
AGile
responsive web design is
hard/easy
Be afraid/Don’t worry!
What changed?
Web desi"n used to be so e!s$!
Things are different now.
88% o! people h"ve " mobile phone. The number o! people th"t use their phone to "ccess the Internet went !rom 31% (2009) to 55% (2012).
35% o! people in the US don’t h"ve Internet "ccess "t home.
59% o! Americ"ns who m"ke less th"n $30,000 h"ve no Internet "ccess "t home.
88% o! Americ"ns without " hi#h school diplom" don’t h"ve Internet "ccess "t home.
—K!ren McGr!ne, vi! Luke Wroblewski. http://www.lukew.com/##/entr$.!sp?1602
The w!$ people !re usin" the web h!s ch!n"ed.
design process
z
“Here’s what your site will look like”
A t$pic!l desi"n !ppro!ch
Im!"e: dm!ll.me/13cuOBM
zero-sum gameDesi"nin" to bre!kpoints—or worse, device width—is !
“Here’s what your site will look like”
A t$pic!l desi"n !ppro!ch
“Here’s what your site will feel like”
A new desi"n !ppro!ch
Visual inventoryDesi"n b$ re#erence
Visual inventoryDesi"n b$ re#erence
Visual inventoryDesi"n b$ re#erence
Visual inventoryDesi"n b$ re#erence
Visual inventoryDesi"n b$ re#erence
Visual inventoryDesi"n b$ re#erence
Solve $our own problems b$ usin" the successes !nd #!ilures o# others.
Visual inventoryDesi"n b$ re#erence
Visual inventoryDesi"n b$ re#erence
Photoshop comps don’t cut it.
At le!st not the w!$ we used to do it.
dm!ll.me/XA93U2dm!ll.me/13di!lY
“I’m not m!kin" ! c!se #or ditchin" Photoshop !lto"ether !nd desi"nin"
solel$ in the browser but r!ther better underst!ndin" how we use Photoshop in
modern web desi"n.”
—Br!d Frost, Front-End Desi"ner
“I don’t think we’re in ! post-P S D er!, but I do think we’re movin" tow!rds !
post-‘#ull-comp’ er!.”
—Me
New design deliverablesSt$le tiles, element coll!"es, % st$le protot$pes—oh m$!
Style Tilesst$letil.es
“[St$le tiles !re] ! c!t!l$st #or discussions !round the pre#erences
!nd "o!ls o# the client.”
—S!m!nth! W!rren: Desi"ner, Twitter
dm!ll.me/13dv0R2
a game of riddles
There is ! c!bin on the side o# ! mount!in. Three people !re inside !nd the$ !re
de!d. How did the$ die?
The$ were killed in ! pl!ne cr!sh.
* !irpl!ne c!bin
Im!"e: dm!ll.me/11#siFO
There is !n !ncient invention still used in some p!rts o# the world tod!$ th!t !llows
people to see throu"h w!lls. Wh!t is it?
Windows.
Im!"e: Hope #or Tod!$, b$ Sh!ne Mielke—dm!ll.me/13dXv1h
A wom!n le!ves home !nd m!kes three le#t turns. She returns home !"!in. On the w!$, she p!ssed two women with m!sks.
Who were the two women?
The umpire !nd the c!tcher.
Im!"e: dm!ll.me/13dXWsm
Too much !bstr!ction !nd l!ck o# context le!d to misdirection.
The point
element collagesd!nielm!ll.com/!rticles/ri#-element-coll!"es
element collages
element collages
element collages
element collages
element collages
element collages
element collages
“Electric”
“Sh!pe, book, he!rt, bubble”
“Visu!l booklists”
“P!"es… themed in books”
“Turn the p!"e #or step 2”
“Turn the p!"e #or step 2”
“Visu!l booklists”
“P!"es… themed in books”
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
ri#.super#riend.l$/desi"ns/round2
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
“Obviousl$ this is not ! website. But I see how it could be one.”
—The per#ect client’s re!ction to !n element coll!"e
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
Turn power#ul phr!ses into visu!l hooks.
br!d#rostweb.com/blo"/post/!tomic-web-desi"n
demo.p!ttern-l!b.in#o
“Obviousl$ this is not ! website. But I see how it could be one.”
—The per#ect client’s re!ction to !n element coll!"e
cle!rle#t.com/thinks/visu!ldesi"nexplor!tions
drbl.in/"Xno
“It’s like "ivin" $our client ! peek !t those hidden l!$ers.”
—P!ul Llo$d: Senior Visu!l Desi"ner, Cle!rle#t
“It’s like "ivin" $our client ! peek !t those hidden l!$ers.”
—P!ul Llo$d: Senior Visu!l Desi"ner, Cle!rle#t
We will replace presentations with conversations
“We must move !w!$ #rom the pl!ce where the client sits with !rms crossed in the role o# jud"e, !nd we t!ke to the st!"e with son" !nd d!nce in the role o# !uditionin" t!lent. While both p!rties #ind the showm!nship o# our cr!#t titill!tin", the pr!ctitioner’s is ! stron"er pl!ce th!n th!t o# the per#ormer. It is this pr!ctitioner’s position #rom
which we must strive to oper!te. Pr!ctitioners do not present. St!rs do not !udition.”
—Bl!ir Enns, dm!ll.me/13eVrWD
style prototypedm!ll.me/11"6UQK
dm!ll.me/11"3Ow0
4 design process tips for responsive web design
From Vox Medi! Director o" Desi#n Ted Irvine (@ted_irvine)
“Thin"s c!n look be!uti#ul in Photoshop, but h!vin" them work responsivel$ in code "ives $ou ! more
honest sense o# the desi"n. As desi"ners, we're o#ten ! bit dishonest !bout content. We re!lized th!t the more
quickl$ we "ot into code, the more quickl$ thin"s broke, !nd the more quickl$ we could #ix them.”
be honest
j
1
“Protot$pe with re!l content.”
real content
j
2
“We still do ! lot o# work in Photoshop when we needed to #ocus. Sometimes when $ou work onl$ in code, $ou work too #!st. We needed to slow down.”
Slow down
j
3
“We !lw!$s st!rt with ! 2-week t$po"r!ph$ stud$ in ! browser. For responsive projects, desi"n elements "o !w!$ when the viewport "ets sm!ller, so t$po"r!ph$
pl!$s !n import!nt p!rt in c!rr$in" the br!nd.”
Start with type
j
4
Designing in the browser
Designing in the browser
dm!ll.me/Xz!8z5
Photoshop will h!ve ! pl!ce in m$ work#low #or ! lon" time to come. It !llows me to be
expressive in ! w!$ th!t I c!n’t be with code.
inventing on principle
Bret Victor—vimeo.com/36579366
inventing on principle
“How would I ever h!ve discovered th!t [!nim!tion ide!] i# I h!d to compile ever$ time I m!de ! ch!n"e? So much o# cre!tion is !bout discover$, !nd $ou c!n’t discover !n$thin" i#
$ou c!n’t see wh!t $ou’re doin".”
—Bret Victor
For some, “desi"nin" in the browser” !ctu!ll$ me!ns skippin" desi"n to st!rtin" buildin" inste!d.
“Let’s ch!n"e the phr!se ‘desi"nin" in the browser’ to
‘decidin" in the browser.’”—Me, http://the-p!str$-box-project.net/d!n-m!ll/2012-september-12/
Yes, I re!lize I just cited m$sel#. A"!in.
I !m so sorr$.
A modern design workflow starts in
the sales process
You c!n’t expect to implement ! new process i# $ou’re sellin" the old w!$.
You c!n’t expect to implement ! new process i# $ou’re sellin" the old w!$.
You c!n’t expect to implement ! new process i# $ou’re sellin" the old w!$.
dm!ll.me/13c9Jrd
Not the first time we’ve heard that.
“C S S is so box$.”
—Ever$one in 2001
csszen"!rden.com
CSS Zen Garden
“At the time, people didn’t underst!nd wh$ CS S w!s import!nt.
I w!nted to show them.”—D!ve She!
the modern-day equivalent of the css zen garden?
boston"lobe.com
microso#t.com
responsivenews.co.uk/news
pol$"on.com
It’s all of those and none of those.
We’re still figuring all of this out.
IA/UX
Desi"n
HTML/CSS
J!v!Script
Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10
proposed schedule
IA/UX
Desi"n
HTML/CSS
J!v!Script
Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Week 11 Week 12
Actual schedule
Let’s keep talking, tweeting, posting,
and sharing.
and remember…
responsive web design is
hard/easy
Be afraid/Don’t worry!
Thanks!B u
@d!nielm!ll d!n@d!nielm!ll.com