Responsive toolbox

61
Responsive Toolbox Jacob Surber Sr. Product Manager HTML Design @jacobsurber

description

Slides from my recent talk at WebVisions Portland.

Transcript of Responsive toolbox

Page 1: Responsive toolbox

ResponsiveToolbox

Jacob SurberSr. Product Manager HTML Design @jacobsurber

Page 2: Responsive toolbox
Page 3: Responsive toolbox

Ethan Marcotte

#chuckapproved

+ =

Page 4: Responsive toolbox

new

#itsOK

different

needed a name

Responsive Design

Page 5: Responsive toolbox

Contentfocused

Cleandesign

Mobilefirst

Hierarchical information ?

Page 6: Responsive toolbox

It’s really just Web Design

#srsly

Page 7: Responsive toolbox

Jacob Surber @jacobsurberSr. Product Manager HTML Design #getitright

Web DesignToolbox

Page 8: Responsive toolbox

We find ourselves on the edge

Page 9: Responsive toolbox
Page 10: Responsive toolbox

Team dynamic & individual responsibilities

Page 11: Responsive toolbox

What’s the workflow been?

Page 12: Responsive toolbox

Designers

Writers

Developers

#waterfail

Page 13: Responsive toolbox
Page 14: Responsive toolbox

#wrongexpectations

Designers Developers

desi

gn a

cuity

Page 15: Responsive toolbox
Page 16: Responsive toolbox

#harmony

Page 17: Responsive toolbox

First tool

Page 18: Responsive toolbox

Responsive Inspector

Page 20: Responsive toolbox

#letsbehonest

Page 21: Responsive toolbox

10 questions

#thecakeisreal

http://goo.gl/RTXyv

Page 22: Responsive toolbox

1. Do you consider yourself a web designer?

Page 23: Responsive toolbox

What is a “web designer”?

Page 24: Responsive toolbox

2. What are your existing tools?

Page 25: Responsive toolbox

two design camps

Page 26: Responsive toolbox

On a notepad

Ina text editor

Page 27: Responsive toolbox

Ina text editor

Page 28: Responsive toolbox

On a notepad

Page 29: Responsive toolbox
Page 30: Responsive toolbox
Page 31: Responsive toolbox

Layout

is Design

Page 32: Responsive toolbox

3. Do you know HTML & CSS? Do you want to?

Page 33: Responsive toolbox

Do you know what

float:right means?

Page 34: Responsive toolbox

Do you care about the

box model?

Page 35: Responsive toolbox

4. How do you communicate your design intent?

Page 36: Responsive toolbox

#he’ssmart

“Content Choreography”@trentwalton

Page 37: Responsive toolbox

5. Do you believe in design/prototype code?

Page 38: Responsive toolbox

#theWYSIWYGisDEAD

WYSIWYG

Page 39: Responsive toolbox

6. Are you willing to work in the browser?

Page 40: Responsive toolbox

7. Can you design using “web native graphics”

Page 41: Responsive toolbox

8. Do technical limitations effect your design vision?

Page 42: Responsive toolbox
Page 43: Responsive toolbox

#betruetoyourdev

Honesty in design

Page 44: Responsive toolbox

9. What is your deliverable and to who?

Page 45: Responsive toolbox

IA / UX Design

Information hierarchy Visual designs

site maps Style guides

Page 46: Responsive toolbox

10. What do you look for in a next-gen tool?

Page 47: Responsive toolbox

What’s out there?

Page 48: Responsive toolbox

Let’s talk about

Page 49: Responsive toolbox

Designers

desi

gn a

cuity

Developers

Page 50: Responsive toolbox

#changeiscoming

Designers Developers

Page 51: Responsive toolbox

#anewdirection

Design & Typography

HTML design surface

Flexible grid system

Intelligent weblayout

Page 52: Responsive toolbox

Mobile or Desktop?

#whichway??

Page 53: Responsive toolbox

screen grab

Page 54: Responsive toolbox
Page 55: Responsive toolbox

What is not?

Page 56: Responsive toolbox
Page 57: Responsive toolbox

Where are we going?

Page 58: Responsive toolbox
Page 59: Responsive toolbox

Style Management

Multiple pagesHTML ElementsStates

Creative CloudIntegration

Page 60: Responsive toolbox

http://goo.gl/RTXyv

Page 61: Responsive toolbox

Thanks!

html.adobe.com/edge/reflow

@Reflow

Jacob SurberSr. Product Manager HTML Design @jacobsurber