+ All Categories
Home > Design > Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

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

Date post: 11-Aug-2014
Category:
Upload: dan-mall
View: 9,371 times
Download: 4 times
Share this document with a friend
Description:
 
Popular Tags:
159
Transcript
Page 1: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 2: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 3: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

A brief history lesson2009

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

A brief history lessonA website th!t looks "ood no m!tter where or how I !ccess it.

bounceb!r"!inrent!ls.com

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

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

Page 6: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 7: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

WaterfallIm!"e: http://dm!ll.me/ZX7p#N

Page 8: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 9: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 10: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 11: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 12: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Im!"e: Goo"le “#lexible old l!d$”

AGile

Page 13: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 14: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 15: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 16: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 17: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 18: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 19: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 20: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 21: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 22: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 23: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 24: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 25: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 26: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 27: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 28: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 29: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 30: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 31: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 32: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 33: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

responsive web design is

hard/easy

Be afraid/Don’t worry!

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

What changed?

Web desi"n used to be so e!s$!

Page 35: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 36: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 37: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Things are different now.

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

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

Page 39: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 40: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

The w!$ people !re usin" the web h!s ch!n"ed.

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

design process

z

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

“Here’s what your site will look like”

A t$pic!l desi"n !ppro!ch

Page 43: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 44: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 45: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 46: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Im!"e: dm!ll.me/13cuOBM

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

zero-sum gameDesi"nin" to bre!kpoints—or worse, device width—is !

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

“Here’s what your site will look like”

A t$pic!l desi"n !ppro!ch

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

“Here’s what your site will feel like”

A new desi"n !ppro!ch

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

Visual inventoryDesi"n b$ re#erence

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

Visual inventoryDesi"n b$ re#erence

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

Visual inventoryDesi"n b$ re#erence

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

Visual inventoryDesi"n b$ re#erence

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

Visual inventoryDesi"n b$ re#erence

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

Visual inventoryDesi"n b$ re#erence

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

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

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

Visual inventoryDesi"n b$ re#erence

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

Visual inventoryDesi"n b$ re#erence

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

Photoshop comps don’t cut it.

At le!st not the w!$ we used to do it.

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

dm!ll.me/XA93U2dm!ll.me/13di!lY

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

“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

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

“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

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

New design deliverablesSt$le tiles, element coll!"es, % st$le protot$pes—oh m$!

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

Style Tilesst$letil.es

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

“[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

Page 66: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 67: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

dm!ll.me/13dv0R2

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

a game of riddles

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

There is ! c!bin on the side o# ! mount!in. Three people !re inside !nd the$ !re

de!d. How did the$ die?

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

The$ were killed in ! pl!ne cr!sh.

* !irpl!ne c!bin

Im!"e: dm!ll.me/11#siFO

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

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?

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

Windows.

Im!"e: Hope #or Tod!$, b$ Sh!ne Mielke—dm!ll.me/13dXv1h

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

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?

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

The umpire !nd the c!tcher.

Im!"e: dm!ll.me/13dXWsm

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

Too much !bstr!ction !nd l!ck o# context le!d to misdirection.

The point

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

element collagesd!nielm!ll.com/!rticles/ri#-element-coll!"es

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

element collages

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

element collages

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

element collages

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

element collages

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

element collages

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

element collages

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

element collages

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

“Electric”

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

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

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

“Visu!l booklists”

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

“P!"es… themed in books”

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

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

Page 89: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 90: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

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

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

“Visu!l booklists”

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

“P!"es… themed in books”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

br!d#rostweb.com/blo"/post/!tomic-web-desi"n

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

demo.p!ttern-l!b.in#o

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

“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

Page 112: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 113: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

drbl.in/"Xno

Page 114: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 115: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

“It’s like "ivin" $our client ! peek !t those hidden l!$ers.”

—P!ul Llo$d: Senior Visu!l Desi"ner, Cle!rle#t

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

“It’s like "ivin" $our client ! peek !t those hidden l!$ers.”

—P!ul Llo$d: Senior Visu!l Desi"ner, Cle!rle#t

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

We will replace presentations with conversations

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

“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

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

style prototypedm!ll.me/11"6UQK

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

dm!ll.me/11"3Ow0

Page 121: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 122: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Page 123: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

4 design process tips for responsive web design

From Vox Medi! Director o" Desi#n Ted Irvine (@ted_irvine)

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

“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

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

“Protot$pe with re!l content.”

real content

j

2

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

“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

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

“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

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

Designing in the browser

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

Designing in the browser

dm!ll.me/Xz!8z5

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

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.

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

inventing on principle

Bret Victor—vimeo.com/36579366

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

inventing on principle

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

inventing on principle

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

“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

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

For some, “desi"nin" in the browser” !ctu!ll$ me!ns skippin" desi"n to st!rtin" buildin" inste!d.

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

“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/

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

Yes, I re!lize I just cited m$sel#. A"!in.

I !m so sorr$.

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

A modern design workflow starts in

the sales process

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

You c!n’t expect to implement ! new process i# $ou’re sellin" the old w!$.

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

You c!n’t expect to implement ! new process i# $ou’re sellin" the old w!$.

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

You c!n’t expect to implement ! new process i# $ou’re sellin" the old w!$.

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

dm!ll.me/13c9Jrd

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

Not the first time we’ve heard that.

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

“C S S is so box$.”

—Ever$one in 2001

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

csszen"!rden.com

CSS Zen Garden

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

“At the time, people didn’t underst!nd wh$ CS S w!s import!nt.

I w!nted to show them.”—D!ve She!

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

the modern-day equivalent of the css zen garden?

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

boston"lobe.com

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

microso#t.com

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

responsivenews.co.uk/news

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

pol$"on.com

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

It’s all of those and none of those.

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

We’re still figuring all of this out.

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

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

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

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

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

Let’s keep talking, tweeting, posting,

and sharing.

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

and remember…

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

responsive web design is

hard/easy

Be afraid/Don’t worry!

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

Thanks!B u

@d!nielm!ll d!n@d!nielm!ll.com


Recommended