1.
RESPONSIVE DESIGN
WORKFLOW STEPHEN HAY . BDCONF ORLANDO 20120415

2.
SOME ASPECTS OF OUR WORK ARE DECIDEDLY
UNSEXY(AND WORKFLOW IS ONE OF THEM)

3.
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.

4.
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.

5.
OUR CLIENT WANTS SOME CHANGES MADE.

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

7.
The answer is to design from the bottom up,
which means
FROM THE CONTENT OUT.

8.
Content and form are lovers,
THEIR LOVE-CHILD IS DESIGN

9.
MUCH DESIGN DECISIONMAKING IS BASED ON
TECH THIS IS A BAD THING.

10.
ANDY CLARKE
ELLIOT JAY STOCKS
PAUL BOAG
RACHEL ANDREW
LEA VEROU
DAVID STOREY
CHRIS HEILMANN
AARRON WALTER
Absolutely ARAL BALKAN
shameless, BEN SCHWARZ
yet tasteful DMITRY FADEYEV
book plug MARC EDWARDS
AND LITTLE OL’ ME

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

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

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

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

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

16.
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
MOBILE
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS

17.
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
MOBILE
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
OR DO WE?

18.
SMABLET

19.
i SMABLET

20.
WORKFLOW
NOW

21.
INFORMATION
ARCHITECTURE
flickr.com/photos/cannedtuna/4853380320/

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

23.
LOOK, MA!
INTERACTION
DESIGN
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

24.
DESIGN
flickr.com/photos/zieak/2905918515/

25.
DESIGN
PHOTOSHOP, RINSE, REPEAT
flickr.com/photos/zieak/2905918515/

26.
DESIGN IS NOT
DECORATION
AND DECORATION IS NOT DESIGN

27.
RESPONSIVE
WORKFLOW

28.
RESPONSIVE
WORKFLOW:
10 STEPS

29.
1. Content inventory
2. Content reference wireframes
3. Design in text (structured content)
4. Linear design
5. Breakpoint graph
6. Design for various breakpoints
7. HTML design prototype
RESPONSIVE 8. Present prototype screenshots
WORKFLOW: 9. Present prototype after revision
10 STEPS 10. Document for production

30.
1. CONTENT INVENTORY

31.
1. CONTENT INVENTORY
1. Site navigation
2. Logo
3. Date & location
4. Social media links
5. Registration status/link
6. Introductory text
7. Speakers (with photo)
8. Countdown
9. Sponsors
10. Secondary navigation

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

33.
CONTENT REFERENCE WIREFRAMES

34.
CONTENT REFERENCE WIREFRAMES
1
2, 3 4
5
6
7
8
9
10

35.
CONTENT REFERENCE WIREFRAMES
1
2, 3 4
1. Site navigation 5
2. Logo 6
3. Date & location
4. Social media links
5. Registration status/link 7
6. Introductory text
7. Speakers (with photo)
8. Countdown 8
9. Sponsors 9
10. Secondary navigation
10

36.
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

37.
3. DESIGNING
pandoc content.md -o content.html
IN TEXT
ENVISIONING
STRUCTURED CONTENT
http://johnmacfarlane.net/pandoc/

38.
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

39.
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

40.
THE WORLD’S FIRST WEBSITE IS ALMOST
MOBILE-READY
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
OPERA BROWSER

41.
OPERA MOBILE, SAMSUNG GALAXY TAB

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

43.
THE ZERO INTERFACE:
THINK, DONE.
ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,
SO CHOOSE WISELY.

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

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

46.
5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.

47.
6. DESIGN FOR VARIOUS BREAKPOINTS
DON’T FORGET TO
SKETCH

48.
7. IF WE’RE NOT DELIVERING DESIGNS IN
PHOTOSHOP,
WHAT DO WE DELIVER?

49.
AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:

50.
HOUSTON, WE HAVE A PROBLEM.

51.
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

52.
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

53.
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

54.
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS

55.
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
PROTOTYPE

56.
VERSION CONTROL
PREPROCESSORS / HELPER SCRIPTS
FRAMEWORKS (BE CAREFUL, THOUGH)
HTML TEMPLATING, STATIC SITE GENERATORS
DEVELOPMENT APPROACHES (SMACSS, ETC.)

57.
8 & 9. SOME PRESENTATION PSYCHOLOGY

58.
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.

59.
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
2. See above.

60.
10. AND WHAT DO WE GIVE TO THE
DEVELOPERS?

61.
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer

62.
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer

63.
WHAT I USE: DEXY
http://www.dexy.it/

64.
WHAT I USE: DEXY
http://www.dexy.it/

65.
WHAT I USE: DEXY
http://www.dexy.it/

66.
HOW DEXY WORKS
http://www.dexy.it/
MARKDOWN
HTML CSS
HTML
SYNTAX HIGHLIGHTING

67.
YOU’VE JUST CREATED A
DESIGNGUIDE
AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE

68.
1. Content inventory
2. Content reference wireframes
3. Design in text (structured content)
4. Linear design
5. Breakpoint graph
6. Design for various breakpoints
7. HTML design prototype
RESPONSIVE 8. Present prototype screenshots
WORKFLOW: 9. Present prototype after revision
10 STEPS 10. Document for production

69.
KEEP ADAPTING.
KEEPLEARNING.

70.
THX
@STEPHENHAY
THE-HAYSTACK.COM
SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER