A brief history lesson 2009

A brief history lessonA website that looks good no matter where or how I access it. bouncebargainrentals.com

A brief history lessonA website that looks good no matter where or how I access it. alistapart.com/article/responsive-web-design

Waterfall Image: http://dmall.me/ZX7pfN

Image: Google flexible old lady AGile

responsive web design is hard/easy Be afraid/Dont worry!

What changed? Web design used to be so easy!

Things are different now.

88% of people have a mobile phone. The number of people that use their phone to access the Internet went from 31% (2009) to 55% (2012). 35% of people in the US dont have Internet access at home. 59% of Americans who make less than $30,000 have no Internet access at home. 88% of Americans without a high school diploma dont have Internet access at home. Karen McGrane, via Luke Wroblewski. http://www.lukew.com/ff/entry.asp?1602

The way people are using the web has changed.

design process z

Heres what your site will look like A typical design approach

Image: dmall.me/13cuOBM

zero-sum game Designing to breakpointsor worse, device widthis a

Heres what your site will look like A typical design approach

Heres what your site will feel like A new design approach

Visual inventory Design by reference

Visual inventory Design by reference

Visual inventory Design by reference

Visual inventory Design by reference

Visual inventory Design by reference

Visual inventory Design by reference

Solve your own problems by using the successes and failures of others.

Visual inventory Design by reference

Visual inventory Design by reference

Photoshop comps dont cut it. At least not the way we used to do it.

dmall.me/XA93U2dmall.me/13dialY

Im not making a case for ditching Photoshop altogether and designing solely in the browser but rather better understanding how we use Photoshop in modern web design. Brad Frost, Front-End Designer

I dont think were in a post-P S D era, but I do think were moving towards a post-full-comp era. Me

New design deliverables Style tiles, element collages, & style prototypesoh my!

Style Tiles styletil.es

[Style tiles are] a catalyst for discussions around the preferences and goals of the client. Samantha Warren: Designer, Twitter

dmall.me/13dv0R2

a game of riddles

There is a cabin on the side of a mountain. Three people are inside and they are dead. How did they die?

They were killed in a plane crash. * airplane cabin Image: dmall.me/11fsiFO

There is an ancient invention still used in some parts of the world today that allows people to see through walls. What is it?

Windows. Image: Hope for Today, by Shane Mielkedmall.me/13dXv1h

A woman leaves home and makes three left turns. She returns home again. On the way, she passed two women with masks. Who were the two women?

The umpire and the catcher. Image: dmall.me/13dXWsm

Too much abstraction and lack of context lead to misdirection. The point

element collages danielmall.com/articles/rif-element-collages

element collages

element collages

element collages

element collages

element collages

element collages

element collages

Electric

Shape, book, heart, bubble

Visual booklists

Pages themed in books

Turn the page for step 2

Turn the page for step 2

Visual booklists

Pages themed in books

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks. rif.superfriend.ly/designs/round2

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Obviously this is not a website. But I see how it could be one. The perfect clients reaction to an element collage

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks.

Turn powerful phrases into visual hooks. bradfrostweb.com/blog/post/atomic-web-design

demo.pattern-lab.info

Obviously this is not a website. But I see how it could be one. The perfect clients reaction to an element collage clearleft.com/thinks/visualdesignexplorations

drbl.in/gXno

Its like giving your client a peek at those hidden layers. Paul Lloyd: Senior Visual Designer, Clearleft

Its like giving your client a peek at those hidden layers. Paul Lloyd: Senior Visual Designer, Clearleft

We will replace presentations with conversations

We must move away from the place where the client sits with arms crossed in the role of judge, and we take to the stage with song and dance in the role of auditioning talent. While both parties find the showmanship of our craft titillating, the practitioners is a stronger place than that of the performer. It is this practitioners position from which we must strive to operate. Practitioners do not present. Stars do not audition. Blair Enns, dmall.me/13eVrWD

style prototype dmall.me/11g6UQK

dmall.me/11g3Ow0

4 design process tips for responsive web design From Vox Media Director of Design Ted Irvine (@ted_irvine)

Things can look beautiful in Photoshop, but having them work responsively in code gives you a more honest sense of the design. As designers, we're often a bit dishonest about content. We realized that the more quickly we got into code, the more quickly things broke, and the more quickly we could fix them. be honest j 1

Prototype with real content. real content j 2

We still do a lot of work in Photoshop when we needed to focus. Sometimes when you work only in code, you work too fast. We needed to slow down. Slow down j 3

We always start with a 2-week typography study in a browser. For responsive projects, design elements go away when the viewport gets smaller, so typography plays an important part in carrying the brand. Start with type j 4

Designing in the browser

Designing in the browser dmall.me/Xza8z5

Photoshop will have a place in my workflow for a long time to come. It allows me to be expressive in a way that I cant be with code.

inventing on principle Bret Victorvimeo.com/36579366

inventing on principle

inventing on principle

How would I ever have discovered that [animation idea] if I had to compile every time I made a change? So much of creation is about discovery, and you cant discover anything if you cant see what youre doing. Bret Victor

For some, designing in the browser actually means skipping design to starting building instead.

Lets change the phrase designing in the browser to deciding in the browser. Me, http://the-pastry-box-project.net/dan-mall/2012-september-12/

Yes, I realize I just cited myself. Again. I am so sorry.

A modern design workflow starts in the sales process

You cant expect to implement a new process if youre selling the old way.

You cant expect to implement a new process if youre selling the old way.

You cant expect to implement a new process if youre selling the old way.

dmall.me/13c9Jrd

Not the first time weve heard that.

CS S is so boxy. Everyone in 2001

csszengarden.com CSS Zen Garden

At the time, people didnt understand why CSS was important. I wanted to show them. Dave Shea

the modern-day equivalent of the css zen garden?

bostonglobe.com

microsoft.com

responsivenews.co.uk/news

polygon.com

Its all of those and none of those.

Were still figuring all of this out.

IA/UX Design HTML/CSS JavaScript Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 proposed schedule

IA/UX Design HTML/CSS JavaScript 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

Lets keep talking, tweeting, posting, and sharing.

and remember

responsive web design is hard/easy Be afraid/Dont worry!

Thanks! B u @danielmall dan@danielmall.com