Responsive Design Workflow: Mobilism 2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design Workflow: Mobilism 2012

on

  • 40,530 views

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

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

Statistics

Views

Total Views
40,530
Views on SlideShare
38,202
Embed Views
2,328

Actions

Likes
165
Downloads
870
Comments
1

28 Embeds 2,328

http://www.frankwatching.com 974
https://twitter.com 301
http://www.scoop.it 280
http://viljamis 255
http://www.aynbrand.com 197
http://logmob.wordpress.com 125
http://blog.aynbrand.com 77
http://alhaqqagency.wordpress.com 28
http://www.linkedin.com 14
http://forum.dred.vn 8
http://aynbrand.com 8
http://kalovskihost.com 8
http://us-w1.rockmelt.com 7
http://www.aynbrand.net 6
https://honey.is 5
https://si0.twimg.com 5
http://campusphere.de 5
http://georgedan.wikispaces.com 3
http://thinkery.me 3
http://strawberryj.am 3
http://aynbrand.net 3
http://translate.googleusercontent.com 3
http://pinterest.com 2
http://www.pinterest.com 2
http://www.sabelonline.nl 2
http://www.pearltrees.com 2
http://beta.sabelonline.nl 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • q bueno
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Workflow: Mobilism 2012 Presentation Transcript

  • 1. RESPONSIVE DESIGNWORKFLOW STEPHEN HAY . MOBILISM AMSTERDAM 20120511
  • 2. SOME ASPECTS OF OUR WORK ARE DECIDEDLYUNSEXY(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 meansFROM THE CONTENT OUT.
  • 8. Content and form are lovers,THEIR LOVE-CHILD IS DESIGN
  • 9. MUCH DESIGN DECISIONMAKING IS BASED ONTECH THIS IS A BAD THING.
  • 10. ANDY CLARKE ELLIOT JAY STOCKS PAUL BOAG RACHEL ANDREW LEA VEROU DAVID STOREY CHRIS HEILMANN AARRON WALTERAbsolutely ARAL BALKANshameless, BEN SCHWARZyet tasteful DMITRY FADEYEVbook plug MARC EDWARDS AND LITTLE OL’ ME
  • 11. “One technique Ive 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 its 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 FOREVERYTHING THAT IS NOT DESKTOP:
  • 15. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILE
  • 16. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
  • 17. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?
  • 18. SMABLET
  • 19. i SMABLET
  • 20. WORKFLOWNOW
  • 21. INFORMATIONARCHITECTUREflickr.com/photos/cannedtuna/4853380320/
  • 22. INTERACTION DESIGNhttp://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  • 23. LOOK, MA! INTERACTION DESIGNhttp://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  • 24. DESIGNflickr.com/photos/zieak/2905918515/
  • 25. DESIGNPHOTOSHOP, RINSE, REPEATflickr.com/photos/zieak/2905918515/
  • 26. DESIGN IS NOTDECORATIONAND DECORATION IS NOT DESIGN
  • 27. RESPONSIVE WORKFLOW
  • 28. RESPONSIVEWORKFLOW: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 prototypeRESPONSIVE 8. Present prototype screenshotsWORKFLOW: 9. Present prototype after revision10 STEPS 10. Document for production
  • 30. 1. CONTENT INVENTORY
  • 31. 1. CONTENT INVENTORY1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. 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. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
  • 37. 3. DESIGNING pandoc content.md -o content.html IN TEXT ENVISIONING STRUCTURED CONTENThttp://johnmacfarlane.net/pandoc/
  • 38. 3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
  • 39. 3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
  • 40. THE WORLD’S FIRST WEBSITE IS ALMOSTMOBILE-READYhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlOPERA BROWSER
  • 41. OPERA MOBILE, SAMSUNG GALAXY TAB
  • 42. The device landscape is constantly changing.Capabilities are constantly changing.Properly structured content is portableto 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 GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
  • 46. 5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHSTHINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
  • 47. 6. DESIGN FOR VARIOUS BREAKPOINTSDON’T FORGET TOSKETCH
  • 48. 7. IF WE’RE NOT DELIVERING DESIGNS INPHOTOSHOP,WHAT DO WE DELIVER?
  • 49. AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
  • 50. HOUSTON, WE HAVE A PROBLEM.
  • 51. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
  • 52. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
  • 53. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
  • 54. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES CSS
  • 55. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES CSSPROTOTYPE
  • 56. VERSION CONTROLPREPROCESSORS / HELPER SCRIPTSFRAMEWORKS (BE CAREFUL, THOUGH)HTML TEMPLATING, STATIC SITE GENERATORSDEVELOPMENT APPROACHES (SMACSS, ETC.)
  • 57. 8 & 9. SOME PRESENTATION PSYCHOLOGY
  • 58. 8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.
  • 59. 8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.2. See above.
  • 60. 10. AND WHAT DO WE GIVE TO THEDEVELOPERS?
  • 61. INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
  • 62. INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
  • 63. WHAT I USE: DEXYhttp://www.dexy.it/
  • 64. WHAT I USE: DEXYhttp://www.dexy.it/
  • 65. WHAT I USE: DEXYhttp://www.dexy.it/
  • 66. HOW DEXY WORKShttp://www.dexy.it/ MARKDOWN HTML CSS HTML DOCS SYNTAX HIGHLIGHTING SCREENSHOTS VIA CasperJS / PhantomJS
  • 67. YOU’VE JUST CREATED ASTYLEGUIDEAND 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 prototypeRESPONSIVE 8. Present prototype screenshotsWORKFLOW: 9. Present prototype after revision10 STEPS 10. Document for production
  • 69. KEEP ADAPTING.KEEPLEARNING.
  • 70. THX@STEPHENHAYTHE-HAYSTACK.COMSPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON