responsive design workflow: mobilism 2012

76
WORKFLOW RESPONSIVE DESIGN STEPHEN HAY . MOBILISM AMSTERDAM 20120511

Upload: stephen-hay

Post on 08-Sep-2014

39.432 views

Category:

Technology


1 download

DESCRIPTION

Almost exactly the same slides as for BDConf, but some might appreciate having the actual slides from this event.

TRANSCRIPT

Page 1: Responsive Design Workflow: Mobilism 2012

WORKFLOWRESPONSIVE DESIGN

STEPHEN HAY . MOBILISM AMSTERDAM 20120511

Page 2: Responsive Design Workflow: Mobilism 2012

UNSEXYSOME ASPECTS OF OUR WORK ARE DECIDEDLY

(AND WORKFLOW IS ONE OF THEM)

Page 3: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

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: Mobilism 2012
Page 6: Responsive Design Workflow: Mobilism 2012

OUR CLIENT WANTS SOME CHANGES MADE.

Page 7: Responsive Design Workflow: Mobilism 2012
Page 8: Responsive Design Workflow: Mobilism 2012
Page 9: Responsive Design Workflow: Mobilism 2012
Page 10: Responsive Design Workflow: Mobilism 2012
Page 11: Responsive Design Workflow: Mobilism 2012

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

Page 12: Responsive Design Workflow: Mobilism 2012

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

FROM THE CONTENT OUT.

Page 13: Responsive Design Workflow: Mobilism 2012

Content and form are lovers,

THEIR LOVE-CHILD IS DESIGN

Page 14: Responsive Design Workflow: Mobilism 2012

TECHMUCH DESIGN DECISIONMAKING IS BASED ON

THIS IS A BAD THING.

Page 15: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

— 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: Mobilism 2012

— BRYAN RIEGER

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

Page 18: Responsive Design Workflow: Mobilism 2012

“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: Mobilism 2012

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

Page 20: Responsive Design Workflow: Mobilism 2012

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

Page 21: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

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: Mobilism 2012

SMABLET

Page 24: Responsive Design Workflow: Mobilism 2012

SMABLETi

Page 25: Responsive Design Workflow: Mobilism 2012

NOWWORKFLOW

Page 26: Responsive Design Workflow: Mobilism 2012

INFORMATIONARCHITECTURE

flickr.com/photos/cannedtuna/4853380320/

Page 27: Responsive Design Workflow: Mobilism 2012

INTERACTIONDESIGN

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

Page 28: Responsive Design Workflow: Mobilism 2012

INTERACTIONDESIGN

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

LOOK, MA!

Page 30: Responsive Design Workflow: Mobilism 2012

DESIGN

flickr.com/photos/zieak/2905918515/

PHOTOSHOP, RINSE, REPEAT

Page 31: Responsive Design Workflow: Mobilism 2012

DECORATIONDESIGN IS NOT

AND DECORATION IS NOT DESIGN

Page 32: Responsive Design Workflow: Mobilism 2012

RESPONSIVEWORKFLOW

Page 33: Responsive Design Workflow: Mobilism 2012

RESPONSIVEWORKFLOW:10 STEPS

Page 34: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

1. CONTENT INVENTORY

Page 36: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

CONTENT REFERENCE WIREFRAMES

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

Page 38: Responsive Design Workflow: Mobilism 2012

CONTENT REFERENCE WIREFRAMES

Page 39: Responsive Design Workflow: Mobilism 2012

CONTENT REFERENCE WIREFRAMES

1

2, 3 4

5

6

7

8

9

10

Page 40: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

Page 42: Responsive Design Workflow: Mobilism 2012

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

http://johnmacfarlane.net/pandoc/

pandoc content.md -o content.html

Page 43: Responsive Design Workflow: Mobilism 2012

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

Page 44: Responsive Design Workflow: Mobilism 2012

3. DESIGNING IN TEXT

ENVISIONING STRUCTURED CONTENT

Page 45: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

OPERA MOBILE, SAMSUNG GALAXY TAB

Page 47: Responsive Design Workflow: Mobilism 2012

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

Page 48: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

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

Page 50: Responsive Design Workflow: Mobilism 2012

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

Page 51: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

SKETCHDON’T FORGET TO

6. DESIGN FOR VARIOUS BREAKPOINTS

Page 53: Responsive Design Workflow: Mobilism 2012

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

WHAT DO WE DELIVER?

Page 54: Responsive Design Workflow: Mobilism 2012

AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:

Page 55: Responsive Design Workflow: Mobilism 2012

HOUSTON, WE HAVE A PROBLEM.

Page 56: Responsive Design Workflow: Mobilism 2012

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

Page 57: Responsive Design Workflow: Mobilism 2012

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

Page 58: Responsive Design Workflow: Mobilism 2012

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES

Page 59: Responsive Design Workflow: Mobilism 2012

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMESCSS

Page 60: Responsive Design Workflow: Mobilism 2012

PROTOTYPE

STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMESCSS

Page 61: Responsive Design Workflow: Mobilism 2012
Page 62: Responsive Design Workflow: Mobilism 2012

VERSION CONTROL

PREPROCESSORS / HELPER SCRIPTS

FRAMEWORKS (BE CAREFUL, THOUGH)

HTML TEMPLATING, STATIC SITE GENERATORS

DEVELOPMENT APPROACHES (SMACSS, ETC.)

Page 63: Responsive Design Workflow: Mobilism 2012

8 & 9. SOME PRESENTATION PSYCHOLOGY

Page 64: Responsive Design Workflow: Mobilism 2012

8 & 9. SOME PRESENTATION PSYCHOLOGY

1. For the first presentation, use screenshots.

Page 65: Responsive Design Workflow: Mobilism 2012

8 & 9. SOME PRESENTATION PSYCHOLOGY

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

Page 66: Responsive Design Workflow: Mobilism 2012

DEVELOPERS?10. AND WHAT DO WE GIVE TO THE

Page 67: Responsive Design Workflow: Mobilism 2012

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

Page 68: Responsive Design Workflow: Mobilism 2012

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

Page 72: Responsive Design Workflow: Mobilism 2012

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

CSSHTML

SYNTAX HIGHLIGHTING

MARKDOWN

HTML DOCS

SCREENSHOTS VIACasperJS / PhantomJS

Page 73: Responsive Design Workflow: Mobilism 2012

STYLE GUIDEYOU’VE JUST CREATED A

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

Page 74: Responsive Design Workflow: Mobilism 2012

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: Mobilism 2012

KEEP LEARNING.KEEP ADAPTING.

Page 76: Responsive Design Workflow: Mobilism 2012

THX@STEPHENHAY

THE-HAYSTACK.COM

SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON