Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Real with Responsive Wireframes

7653c7c449918ff6542880a8c284f5e7?s=47 Jared Ponchot
November 04, 2013

Getting Real with Responsive Wireframes

From Artifact East, 2013

7653c7c449918ff6542880a8c284f5e7?s=128

Jared Ponchot

November 04, 2013
Tweet

Transcript

  1. Jared Ponchot // @jponch // Artifact East 2013 With Responsive

    Wireframes GETTING REAL
  2. HI, MY NAME IS JARED PONCHOT & I’m a unicorn

  3. 1. WHY WIREFRAME 2. WHY HTLM WIREFRAMES 3. HOW TO

  4. BLESSING!

  5. WHY WIREFRAME

  6. None
  7. CHEAP & UGLY

  8. FURTHER CLARIFY ... CONTENT, STRUCTURE & PRIORITY

  9. LIGHT-WEIGHT, LIVING DELIVERABLES

  10. DISPLAY MODEL ‣ Capture the types of displays your site

    will need ‣ Brainstorm the components for each display ‣ Prioritize the components for each display ‣ Discover patterns ‣ Identify the unique things to design for and with
  11. DISPLAY MODEL WIREFRAME

  12. PURPOSE CONTENT STYLE STRATEGY DESIGN DEVELOPMENT

  13. PURPOSE CONTENT STYLE WIREFRAMES

  14. PURPOSE, NOT PREFERENCE PRIORITY, NOT PLACEMENT SYSTEMS, NOT PAGES

  15. “ — Victor Papanek DESIGN IS THE CONSCIOUS EFFORT TO

    IMPOSE A MEANINGFUL ORDER
  16. WHY HTML WIREFRAMES?

  17. http://imgur.com/a/q1WIO

  18. None
  19. None
  20. Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream

  21. “ — from 37Signals “Getting Real” GETTING REAL DELIVERS BETTER

    RESULTS BECAUSE IT FORCES YOU TO DEAL WITH THE ACTUAL PROBLEMS YOU'RE TRYING TO SOLVE INSTEAD OF YOUR IDEAS ABOUT THOSE PROBLEMS. IT FORCES YOU TO DEAL WITH REALITY.
  22. “ — from the Agile Manifesto WORKING SOFTWARE ALWAYS TRUMPS

    DOCUMENTS ABOUT WORKING SOFTWARE.
  23. BONUS REASON: IT’S NOT THAT HARD!

  24. USE A FRAMEWORK ROLL YOUR OWN? or

  25. FRAMEWORK PROS ‣ Low learning curve ‣ Speed ‣ Built-in

    grid ‣ Built-in styles ‣ Built-in components (some) ‣ Pre-tested in browsers ‣ Open-source community ‣ Widespread use ‣ Support ‣ Upgrades & updates ‣ Easy knowledge transfer
  26. FRAMEWORK CONS ‣ Working with someone else’s code ‣ Learning

    curve ‣ Might not be the best fit for your situation
  27. ROLL YOUR OWN PROS ‣ Ownership ‣ Flexibility ‣ Customization

    ‣ More likely creates HTML/styles for final product ‣ Build up your own component / style library
  28. ROLL YOUR OWN CONS ‣ Initial time/thought investment ‣ Lots

    of choices to be made (grid, directory structure, etc.) ‣ Possibly longer implementation time ‣ On your own for support & testing ‣ Create your own documentation
  29. PROTOTYPING FRAMEWORKS ‣Twitter Bootsrap ‣Zurb Foundation ‣ Gumby ‣ Wirefy

    ‣ Proty ‣ Skeleton ‣ 320 and up ‣ and so on ...
  30. BOOTSTRAP Pros ‣ Popular ‣ Lots of documentation ‣ 4

    default break points ‣ Templates & Components ‣ Active development Cons ‣ Not semantic ‣ Not mobile first (now mobile first)
  31. FOUNDATION Pros ‣ Popular ‣ Mobile first ‣ Optionally semantic

    ‣ Templates & Components ‣ Active development ‣ Paid training available Cons ‣ Only 1 default break point (small/large)
  32. GETTING STARTED WITH FOUNDATION

  33. THE PLACES YOU’LL GO ‣ DOWNLOAD: http://foundation.zurb.com ‣ DOCUMENTATION: http://foundation.zurb.com/docs/

    ‣ TEMPLATES: http://foundation.zurb.com/templates.php
  34. GETTING STARTED ‣ Grid ‣ Templates ‣ Other Goodies

  35. THE GRID ‣ 12 columns (small and large) ‣ Nestable

    ‣ Fluid, with an arbitrary max-width
  36. x = number of grid columns Small screen: “small-x columns”

    Large screen: “large-x columns”
  37. <div class="row"> <div class="small-12 large-8 columns">...</div> </div>

  38. small-12 large-6 <div class="row"> <div class="small-12 large-6 columns">...</div> </div>

  39. small-12 <div class="row"> <div class="small-12 columns">...</div> </div>

  40. small-12 large-8 large-offset-4 <div class="row"> <div class="small-12 large-8 large-offset-4 columns">...</div>

    </div>
  41. small-12 large-8 large-offset-3 <div class="row"> <div class="small-12 large-1 columns">...</div> <div

    class="small-12 large-8 large-offset-3 columns">...</div> </div>
  42. small-10 large-8 large-centered <div class="row"> <div class="small-10 large-8 large-centered columns">...</div>

    </div>
  43. small-10 large-8 large-uncentered <div class="row"> <div class="small-10 small-centered large-8 large-uncentered

    columns">...</div> </div>
  44. small-12 large-8 & large-4 <div class="row"> <div class="small-12 large-8 columns">...</div>

    <div class="small-12 large-4 columns">...</div> </div>
  45. small-8 within small-12 small-8 within large-5 <div class="row"> <div class="small-12

    large-5 columns"> <div class="row"> <div class="small-8 columns">...</div> </div> </div> </div>
  46. None
  47. None
  48. None
  49. None
  50. None
  51. COMPONENTS & ELEMENTS ‣ Navigation ‣ Buttons ‣ Forms ‣

    Typography ‣ Components
  52. None
  53. None
  54. None
  55. None
  56. None
  57. LET’S GIVE IT A TRY!

  58. Site Name Portfolio Item Portfolio Item Portfolio Item Portfolio Item

    Legal text Portfolio Item Portfolio Item Navigation Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Legal text Menu
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. Site Name Portfolio Item Portfolio Item Portfolio Item Portfolio Item

    Legal text Portfolio Item Portfolio Item Navigation Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Legal text Menu
  71. None
  72. None
  73. I’M PARTIAL TO PARTIALS

  74. None
  75. None
  76. <!-- @import ../_partials/nav-primary -->

  77. INDEX.HTML ‣ index.kit ‣ Document Head ‣ Primary Navigation ‣

    Global Footer ‣ Document Foot
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. LESSONS FROM THE FRONT LINES

  85. HELPFUL TIPS ‣ Keep sketching ‣ Keep innovating ‣ Keep

    it cheap ‣ Keep iterating
  86. TA DA! Jared Ponchot // @jponch // Artifact East 2013

  87. HELPFUL LINKS ‣ http://foundation.zurb.com ‣ http://html5boilerplate.com ‣ http://incident57.com/codekit/ ‣ http://html5doctor.com

    ‣ http://www.dontfeartheinternet.com/ html/html ‣ http://www.codeschool.com/courses/ assembling-sass ‣ http://bradfrost.github.io/this-is- responsive/resources.html#frameworks