WORKFLOW
RESPONSIVE DESIGN
STEPHEN HAY . BDCONF ORLANDO 20120415
Slide 2
Slide 2 text
UNSEXY
SOME ASPECTS OF OUR WORK ARE DECIDEDLY
(AND WORKFLOW IS ONE OF THEM)
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
OUR CLIENT WANTS SOME CHANGES MADE.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
The answer is to design from the bottom up,
which means
Slide 12
Slide 12 text
The answer is to design from the bottom up,
which means
FROM THE CONTENT OUT.
Slide 13
Slide 13 text
Content and form are lovers,
THEIR LOVE-CHILD IS DESIGN
Slide 14
Slide 14 text
TECH
MUCH DESIGN DECISIONMAKING IS BASED ON
THIS IS A BAD THING.
Slide 15
Slide 15 text
ANDY CLARKE
ELLIOT JAY STOCKS
PAUL BOAG
RACHEL ANDREW
LEA VEROU
DAVID STOREY
CHRIS HEILMANN
AARRON WALTER
ARAL BALKAN
BEN SCHWARZ
DMITRY FADEYEV
MARC EDWARDS
AND LITTLE OL’ ME
Absolutely
shameless,
yet tasteful
book plug
Slide 16
Slide 16 text
— BRYAN RIEGER
“One technique I've used for
years is to 'design in text'… not
necessarily describing
everything in textual form[…]”
Slide 17
Slide 17 text
— BRYAN RIEGER
“(which usually results in docs
sounding oddly creepy, '–it puts
the lotion on it's skin!')[…]”
Slide 18
Slide 18 text
“essentially what is the message
that needs to be communicated
if I was ONLY able to provide
the user with unstyled HTML?”
— BRYAN RIEGER
Slide 19
Slide 19 text
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
Slide 20
Slide 20 text
MOBILE
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
Slide 21
Slide 21 text
MOBILE
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
Slide 22
Slide 22 text
MOBILE
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
OR DO WE?
Slide 23
Slide 23 text
SMABLET
Slide 24
Slide 24 text
SMABLET
i
Slide 25
Slide 25 text
NOW
WORKFLOW
Slide 26
Slide 26 text
INFORMATION
ARCHITECTURE
flickr.com/photos/cannedtuna/4853380320/
DECORATION
DESIGN IS NOT
AND DECORATION IS NOT DESIGN
Slide 32
Slide 32 text
RESPONSIVE
WORKFLOW
Slide 33
Slide 33 text
RESPONSIVE
WORKFLOW:
10 STEPS
Slide 34
Slide 34 text
RESPONSIVE
WORKFLOW:
10 STEPS
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
8. Present prototype screenshots
9. Present prototype after revision
10. Document for production
Slide 35
Slide 35 text
1. CONTENT INVENTORY
Slide 36
Slide 36 text
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
CONTENT REFERENCE WIREFRAMES
1
2, 3 4
5
6
7
8
9
10
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
Slide 41
Slide 41 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
Slide 42
Slide 42 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
http://johnmacfarlane.net/pandoc/
pandoc content.md -o content.html
Slide 43
Slide 43 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
Slide 44
Slide 44 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
Slide 45
Slide 45 text
MOBILE-READY
THE WORLD’S FIRST WEBSITE IS ALMOST
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
OPERA BROWSER
Slide 46
Slide 46 text
OPERA MOBILE, SAMSUNG GALAXY TAB
Slide 47
Slide 47 text
The device landscape is constantly changing.
Capabilities are constantly changing.
Properly structured content is portable
to future platforms.
Slide 48
Slide 48 text
THINK, DONE.
THE ZERO INTERFACE:
ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,
SO CHOOSE WISELY.
Slide 49
Slide 49 text
4. LINEAR “DESIGN”
THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
Slide 50
Slide 50 text
5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
Slide 51
Slide 51 text
5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
Slide 52
Slide 52 text
SKETCH
DON’T FORGET TO
6. DESIGN FOR VARIOUS BREAKPOINTS
Slide 53
Slide 53 text
PHOTOSHOP
,
7. IF WE’RE NOT DELIVERING DESIGNS IN
WHAT DO WE DELIVER?
Slide 54
Slide 54 text
AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
Slide 55
Slide 55 text
HOUSTON, WE HAVE A PROBLEM.
Slide 56
Slide 56 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
Slide 57
Slide 57 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
Slide 58
Slide 58 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
Slide 59
Slide 59 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
Slide 60
Slide 60 text
PROTOTYPE
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
VERSION CONTROL
PREPROCESSORS / HELPER SCRIPTS
FRAMEWORKS (BE CAREFUL, THOUGH)
HTML TEMPLATING, STATIC SITE GENERATORS
DEVELOPMENT APPROACHES (SMACSS, ETC.)
Slide 63
Slide 63 text
8 & 9. SOME PRESENTATION PSYCHOLOGY
Slide 64
Slide 64 text
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
Slide 65
Slide 65 text
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
2. See above.
Slide 66
Slide 66 text
DEVELOPERS?
10. AND WHAT DO WE GIVE TO THE
Slide 67
Slide 67 text
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer
Slide 68
Slide 68 text
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer
Slide 69
Slide 69 text
WHAT I USE: DEXY
http://www.dexy.it/
Slide 70
Slide 70 text
WHAT I USE: DEXY
http://www.dexy.it/
Slide 71
Slide 71 text
WHAT I USE: DEXY
http://www.dexy.it/
Slide 72
Slide 72 text
HOW DEXY WORKS
http://www.dexy.it/
CSS
HTML
SYNTAX HIGHLIGHTING
MARKDOWN
HTML
Slide 73
Slide 73 text
DESIGN GUIDE
YOU’VE JUST CREATED A
AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
Slide 74
Slide 74 text
RESPONSIVE
WORKFLOW:
10 STEPS
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
8. Present prototype screenshots
9. Present prototype after revision
10. Document for production
Slide 75
Slide 75 text
KEEP LEARNING.
KEEP ADAPTING.
Slide 76
Slide 76 text
THX
@STEPHENHAY
THE-HAYSTACK.COM
SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER