WORKFLOW
RESPONSIVE DESIGN
STEPHEN HAY . WEBSHAPED HELSINKI 20120516
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
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
The answer is to design from the bottom up,
which means
Slide 17
Slide 17 text
The answer is to design from the bottom up,
which means
FROM THE CONTENT OUT.
Slide 18
Slide 18 text
Content and form are lovers,
THEIR LOVE-CHILD IS DESIGN
Slide 19
Slide 19 text
TECH
MUCH DESIGN DECISIONMAKING IS BASED ON
THIS IS A BAD THING.
Slide 20
Slide 20 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 21
Slide 21 text
— BRYAN RIEGER
“One technique I've used for
years is to 'design in text'… not
necessarily describing
everything in textual form[…]”
Slide 22
Slide 22 text
— BRYAN RIEGER
“(which usually results in docs
sounding oddly creepy, '–it puts
the lotion on it's skin!')[…]”
Slide 23
Slide 23 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 24
Slide 24 text
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
Slide 25
Slide 25 text
MOBILE
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
Slide 26
Slide 26 text
MOBILE
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
Slide 27
Slide 27 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 28
Slide 28 text
SMABLET
Slide 29
Slide 29 text
SMABLET
i
Slide 30
Slide 30 text
NOW
WORKFLOW
Slide 31
Slide 31 text
INFORMATION
ARCHITECTURE
flickr.com/photos/cannedtuna/4853380320/
DECORATION
DESIGN IS NOT
AND DECORATION IS NOT DESIGN
Slide 37
Slide 37 text
RESPONSIVE
WORKFLOW
Slide 38
Slide 38 text
RESPONSIVE
WORKFLOW:
10 STEPS
Slide 39
Slide 39 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 40
Slide 40 text
1. CONTENT INVENTORY
Slide 41
Slide 41 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 46
Slide 46 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
Slide 47
Slide 47 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
http://johnmacfarlane.net/pandoc/
pandoc content.md -o content.html
Slide 48
Slide 48 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
Slide 49
Slide 49 text
3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT
Slide 50
Slide 50 text
MOBILE-READY
THE WORLD’S FIRST WEBSITE IS ALMOST
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
OPERA BROWSER
Slide 51
Slide 51 text
OPERA MOBILE, SAMSUNG GALAXY TAB
Slide 52
Slide 52 text
The device landscape is constantly changing.
Capabilities are constantly changing.
Properly structured content is portable
to future platforms.
Slide 53
Slide 53 text
THINK, DONE.
THE ZERO INTERFACE:
ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,
SO CHOOSE WISELY.
Slide 54
Slide 54 text
4. LINEAR “DESIGN”
THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
Slide 55
Slide 55 text
5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
Slide 56
Slide 56 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 57
Slide 57 text
SKETCH
DON’T FORGET TO
6. DESIGN FOR VARIOUS BREAKPOINTS
Slide 58
Slide 58 text
PHOTOSHOP
,
7. IF WE’RE NOT DELIVERING DESIGNS IN
WHAT DO WE DELIVER?
Slide 59
Slide 59 text
AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
Slide 60
Slide 60 text
HOUSTON, WE HAVE A PROBLEM.
Slide 61
Slide 61 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
Slide 62
Slide 62 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
Slide 63
Slide 63 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
Slide 64
Slide 64 text
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
Slide 65
Slide 65 text
PROTOTYPE
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
VERSION CONTROL
PREPROCESSORS / HELPER SCRIPTS
FRAMEWORKS (BE CAREFUL, THOUGH)
HTML TEMPLATING, STATIC SITE GENERATORS
DEVELOPMENT APPROACHES (SMACSS, ETC.)
Slide 68
Slide 68 text
8 & 9. SOME PRESENTATION PSYCHOLOGY
Slide 69
Slide 69 text
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
Slide 70
Slide 70 text
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
2. See above.
Slide 71
Slide 71 text
DEVELOPERS?
10. AND WHAT DO WE GIVE TO THE
Slide 72
Slide 72 text
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer
Slide 73
Slide 73 text
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer
Slide 74
Slide 74 text
WHAT I USE: DEXY
http://www.dexy.it/
Slide 75
Slide 75 text
WHAT I USE: DEXY
http://www.dexy.it/
Slide 76
Slide 76 text
WHAT I USE: DEXY
http://www.dexy.it/
Slide 77
Slide 77 text
HOW DEXY WORKS
http://www.dexy.it/
CSS
HTML
SYNTAX HIGHLIGHTING
MARKDOWN
HTML
DOCS
SCREENSHOTS VIA
CasperJS / PhantomJS
Slide 78
Slide 78 text
STYLE GUIDE
YOU’VE JUST CREATED A
AND THAT’S SO MUCH MORE USEFUL THAN A PIXEL-PERFECT PHOTOSHOP FILE
Slide 79
Slide 79 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 80
Slide 80 text
KEEP LEARNING.
KEEP ADAPTING.
Slide 81
Slide 81 text
THX
@STEPHENHAY
THE-HAYSTACK.COM
SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON