WORKFLOWRESPONSIVE DESIGN

STEPHEN HAY . BDCONF ORLANDO 20120415

UNSEXYSOME ASPECTS OF OUR WORK ARE DECIDEDLY

(AND WORKFLOW IS ONE OF THEM)

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.

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.

OUR CLIENT WANTS SOME CHANGES MADE.

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

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

FROM THE CONTENT OUT.

Content and form are lovers,

THEIR LOVE-CHILD IS DESIGN

TECHMUCH DESIGN DECISIONMAKING IS BASED ON

THIS IS A BAD THING.

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

AND LITTLE OL’ ME

Absolutely shameless, yet tasteful book plug

— BRYAN RIEGER

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

— BRYAN RIEGER

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

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

— BRYAN RIEGER

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

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

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

WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS

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

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

SMABLET

SMABLETi

NOWWORKFLOW

INFORMATIONARCHITECTURE

flickr.com/photos/cannedtuna/4853380320/

INTERACTIONDESIGN

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

INTERACTIONDESIGN

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

LOOK, MA!

DESIGN

flickr.com/photos/zieak/2905918515/

DESIGN

flickr.com/photos/zieak/2905918515/

PHOTOSHOP, RINSE, REPEAT

DECORATIONDESIGN IS NOT

AND DECORATION IS NOT DESIGN

RESPONSIVEWORKFLOW

RESPONSIVEWORKFLOW:10 STEPS

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

1. CONTENT INVENTORY

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

CONTENT REFERENCE WIREFRAMES

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

CONTENT REFERENCE WIREFRAMES

CONTENT REFERENCE WIREFRAMES

1

2, 3 4

5

6

7

8

9

10

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

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

http://johnmacfarlane.net/pandoc/

pandoc content.md -o content.html

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

MOBILE-READYTHE WORLD’S FIRST WEBSITE IS ALMOST

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

OPERA MOBILE, SAMSUNG GALAXY TAB

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

THINK, DONE.THE ZERO INTERFACE:

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

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

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

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

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

SKETCHDON’T FORGET TO

6. DESIGN FOR VARIOUS BREAKPOINTS

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

WHAT DO WE DELIVER?

AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:

HOUSTON, WE HAVE A PROBLEM.

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMESCSS

PROTOTYPE

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMESCSS

VERSION CONTROL

PREPROCESSORS / HELPER SCRIPTS

FRAMEWORKS (BE CAREFUL, THOUGH)

HTML TEMPLATING, STATIC SITE GENERATORS

DEVELOPMENT APPROACHES (SMACSS, ETC.)

8 & 9. SOME PRESENTATION PSYCHOLOGY

8 & 9. SOME PRESENTATION PSYCHOLOGY

1. For the first presentation, use screenshots.

8 & 9. SOME PRESENTATION PSYCHOLOGY

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

DEVELOPERS?10. AND WHAT DO WE GIVE TO THE

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

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

WHAT I USE: DEXYhttp://www.dexy.it/

WHAT I USE: DEXYhttp://www.dexy.it/

WHAT I USE: DEXYhttp://www.dexy.it/

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

CSSHTML

SYNTAX HIGHLIGHTING

MARKDOWN

HTML

DESIGN GUIDEYOU’VE JUST CREATED A

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

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

KEEP LEARNING.KEEP ADAPTING.

THX@STEPHENHAY

THE-HAYSTACK.COM

SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER