responsive design workflow (breaking development conference 2012 orlando)

76
WORKFLOW RESPONSIVE DESIGN STEPHEN HAY . BDCONF ORLANDO 20120415

Upload: stephen-hay

Post on 17-Aug-2014

32.635 views

Category:

Design


3 download

DESCRIPTION

Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that video of the talk will be available in the near future on the Breaking Development website.

TRANSCRIPT

Page 1: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

WORKFLOWRESPONSIVE DESIGN

STEPHEN HAY . BDCONF ORLANDO 20120415

Page 2: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

UNSEXYSOME ASPECTS OF OUR WORK ARE DECIDEDLY

(AND WORKFLOW IS ONE OF THEM)

Page 3: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the time.Web design workflow generally remains unchanged.

Page 4: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the time.Web design workflow generally remains unchanged.

THIS IS *^%$#@! WEIRD.

Page 5: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Page 6: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

OUR CLIENT WANTS SOME CHANGES MADE.

Page 7: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Page 8: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Page 9: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Page 10: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Page 11: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

The answer is to design from the bottom up,which means

Page 12: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

The answer is to design from the bottom up,which means

FROM THE CONTENT OUT.

Page 13: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Content and form are lovers,

THEIR LOVE-CHILD IS DESIGN

Page 14: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

TECHMUCH DESIGN DECISIONMAKING IS BASED ON

THIS IS A BAD THING.

Page 15: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

ANDY CLARKEELLIOT JAY STOCKSPAUL BOAGRACHEL ANDREWLEA VEROUDAVID STOREYCHRIS HEILMANNAARRON WALTERARAL BALKANBEN SCHWARZDMITRY FADEYEVMARC EDWARDS

AND LITTLE OL’ ME

Absolutely shameless, yet tasteful book plug

Page 16: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

— BRYAN RIEGER

“One technique I've used for years is to 'design in text'… not necessarily describing everything in textual form[…]”

Page 17: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

— BRYAN RIEGER

“(which usually results in docs sounding oddly creepy, '–it puts the lotion on it's skin!')[…]”

Page 18: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

“essentially what is the message that needs to be communicated if I was ONLY able to provide the user with unstyled HTML?”

— BRYAN RIEGER

Page 19: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:

Page 20: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

MOBILEWE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:

Page 21: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

MOBILEWE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:

WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS

Page 22: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

MOBILEWE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:

WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPSOR DO WE?

Page 23: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

SMABLET

Page 24: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

SMABLETi

Page 25: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

NOWWORKFLOW

Page 26: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

INFORMATIONARCHITECTURE

flickr.com/photos/cannedtuna/4853380320/

Page 27: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

INTERACTIONDESIGN

http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

Page 28: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

INTERACTIONDESIGN

http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

LOOK, MA!

Page 30: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

DESIGN

flickr.com/photos/zieak/2905918515/

PHOTOSHOP, RINSE, REPEAT

Page 31: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

DECORATIONDESIGN IS NOT

AND DECORATION IS NOT DESIGN

Page 32: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

RESPONSIVEWORKFLOW

Page 33: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

RESPONSIVEWORKFLOW:10 STEPS

Page 34: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

RESPONSIVEWORKFLOW:10 STEPS

1. Content inventory2. Content reference wireframes3. Design in text (structured content)

4. Linear design5. Breakpoint graph6. Design for various breakpoints7. HTML design prototype8. Present prototype screenshots9. Present prototype after revision10. Document for production

Page 35: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

1. CONTENT INVENTORY

Page 36: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

1. CONTENT INVENTORY

1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. Secondary navigation

Page 37: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

CONTENT REFERENCE WIREFRAMES

http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

Page 38: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

CONTENT REFERENCE WIREFRAMES

Page 39: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

CONTENT REFERENCE WIREFRAMES

1

2, 3 4

5

6

7

8

9

10

Page 40: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

CONTENT REFERENCE WIREFRAMES

1

2, 3 4

5

6

7

8

9

10

1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. Secondary navigation

Page 41: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

Page 42: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

http://johnmacfarlane.net/pandoc/

pandoc content.md -o content.html

Page 43: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

Page 44: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

Page 45: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

MOBILE-READYTHE WORLD’S FIRST WEBSITE IS ALMOST

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html OPERA BROWSER

Page 46: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

OPERA MOBILE, SAMSUNG GALAXY TAB

Page 47: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

The device landscape is constantly changing. Capabilities are constantly changing. Properly structured content is portable to future platforms.

Page 48: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

THINK, DONE.THE ZERO INTERFACE:

ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,SO CHOOSE WISELY.

Page 49: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

4. LINEAR “DESIGN”THE BARE ESSENTIALS. START PLAYING AROUND A BIT.

Page 50: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS

Page 51: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS

THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.

Page 52: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

SKETCHDON’T FORGET TO

6. DESIGN FOR VARIOUS BREAKPOINTS

Page 53: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

PHOTOSHOP,7. IF WE’RE NOT DELIVERING DESIGNS IN

WHAT DO WE DELIVER?

Page 54: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:

Page 55: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

HOUSTON, WE HAVE A PROBLEM.

Page 56: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

Page 57: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

Page 58: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

Page 59: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMESCSS

Page 60: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

PROTOTYPE

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMESCSS

Page 61: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Page 62: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

VERSION CONTROL

PREPROCESSORS / HELPER SCRIPTS

FRAMEWORKS (BE CAREFUL, THOUGH)

HTML TEMPLATING, STATIC SITE GENERATORS

DEVELOPMENT APPROACHES (SMACSS, ETC.)

Page 63: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

8 & 9. SOME PRESENTATION PSYCHOLOGY

Page 64: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

8 & 9. SOME PRESENTATION PSYCHOLOGY

1. For the first presentation, use screenshots.

Page 65: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

8 & 9. SOME PRESENTATION PSYCHOLOGY

1. For the first presentation, use screenshots.2. See above.

Page 66: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

DEVELOPERS?10. AND WHAT DO WE GIVE TO THE

Page 67: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer

Page 68: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer

Page 72: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

HOW DEXY WORKShttp://www.dexy.it/

CSSHTML

SYNTAX HIGHLIGHTING

MARKDOWN

HTML

Page 73: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

DESIGN GUIDEYOU’VE JUST CREATED A

AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE

Page 74: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

RESPONSIVEWORKFLOW:10 STEPS

1. Content inventory2. Content reference wireframes3. Design in text (structured content)

4. Linear design5. Breakpoint graph6. Design for various breakpoints7. HTML design prototype8. Present prototype screenshots9. Present prototype after revision10. Document for production

Page 75: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

KEEP LEARNING.KEEP ADAPTING.

Page 76: Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

THX@STEPHENHAY

THE-HAYSTACK.COM

SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER