Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

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$”

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

“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

Solve $our own problems b$ usin" the successes !nd #!ilures o# others.

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!.”

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

“Electric”

“Sh!pe, book, he!rt, bubble”

“Visu!l booklists”

“P!"es… themed in books”

“Turn the p!"e #or step 2”

“Visu!l booklists”

“P!"es… themed in books”

Turn power#ul phr!ses into visu!l hooks.

ri#.super#riend.l$/desi"ns/round2

“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

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

“Protot$pe with re!l content.”

real content

“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

“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

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!$.

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.

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

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