Responsive Design Workflow (Mobilism 2012)

Transcript

1. WORKFLOW RESPONSIVE DESIGN STEPHEN HAY . MOBILISM AMSTERDAM 20120511

2. UNSEXY SOME ASPECTS OF OUR WORK ARE DECIDEDLY (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. None

6. OUR CLIENT WANTS SOME CHANGES MADE.

7. None
8. None
9. None
10. None

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

    means

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

    means FROM THE CONTENT OUT.

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

14. TECH MUCH DESIGN DECISIONMAKING IS BASED ON THIS IS A

    BAD THING.

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

16. — BRYAN RIEGER “One technique I've used for years is

    to 'design in text'… not necessarily describing everything in textual form[…]”

17. — BRYAN RIEGER “(which usually results in docs sounding oddly

    creepy, '–it puts the lotion on it's skin!')[…]”

18. “essentially what is the message that needs to be communicated

    if I was ONLY able to provide the user with unstyled HTML?” — BRYAN RIEGER

19. WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT

    DESKTOP:

20. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS

    NOT DESKTOP:

21. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS

    NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS

22. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS

    NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?

23. SMABLET

24. SMABLET i

25. NOW WORKFLOW

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

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

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

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

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

31. DECORATION DESIGN IS NOT AND DECORATION IS NOT DESIGN

32. RESPONSIVE WORKFLOW

33. RESPONSIVE WORKFLOW: 10 STEPS

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

35. 1. CONTENT INVENTORY

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

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

38. CONTENT REFERENCE WIREFRAMES

39. CONTENT REFERENCE WIREFRAMES 1 2, 3 4 5 6 7

    8 9 10

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

41. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT

42. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT http://johnmacfarlane.net/pandoc/ pandoc content.md

    -o content.html

43. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT

44. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT

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

46. OPERA MOBILE, SAMSUNG GALAXY TAB

47. The device landscape is constantly changing. Capabilities are constantly changing.

    Properly structured content is portable to future platforms.

48. THINK, DONE. THE ZERO INTERFACE: ANY STEP WE ADD TO

    THAT HAS THE POTENTIAL TO RUIN EVERYTHING, SO CHOOSE WISELY.

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

    BIT.

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

    FOR BREAKPOINT GRAPHS

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

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

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

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

    DO WE DELIVER?

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

55. HOUSTON, WE HAVE A PROBLEM.

56. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES

57. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES

58. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES

59. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES CSS

60. PROTOTYPE STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES CSS

61. None

62. VERSION CONTROL PREPROCESSORS / HELPER SCRIPTS FRAMEWORKS (BE CAREFUL, THOUGH)

    HTML TEMPLATING, STATIC SITE GENERATORS DEVELOPMENT APPROACHES (SMACSS, ETC.)

63. 8 & 9. SOME PRESENTATION PSYCHOLOGY

64. 8 & 9. SOME PRESENTATION PSYCHOLOGY 1. For the first

    presentation, use screenshots.

65. 8 & 9. SOME PRESENTATION PSYCHOLOGY 1. For the first

    presentation, use screenshots. 2. See above.

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

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

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

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

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

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

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

    DOCS SCREENSHOTS VIA CasperJS / PhantomJS

73. STYLE GUIDE YOU’VE JUST CREATED A AND THAT’S SO MUCH

    MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE

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

75. KEEP LEARNING. KEEP ADAPTING.

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

    and ANA NELSON