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

Getting Real with Responsive Wireframes

Getting Real with Responsive Wireframes

From Artifact Austin 2013: It's becoming clear that it's preferable to transfer your designs into code as early in the process as possible, and using a grid or a framework can give you a head start. But how do you use them? Jared introduces the best options and translates a sketch to an HTML prototype before your eyes!

7653c7c449918ff6542880a8c284f5e7?s=128

Jared Ponchot

May 13, 2013
Tweet

Transcript

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

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

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

  4. BLESSING!

  5. WHY WIREFRAME

  6. CHEAP & UGLY

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

  8. (lately) DESIGN DELIVERABLES ‣ Purpose Document ‣ Content Model ‣

    Component Hierarchy Document ‣ Responsive Wireframes ‣ Style Explorations ‣ Styled Wireframe ‣ Component Collage
  9. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE STRATEGY DESIGN DEVELOPMENT

  10. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE WIREFRAMES

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

    IMPOSE A MEANINFUL ORDER
  12. WHY RESPONSIVE WIREFRAMES?

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

  14. None
  15. None
  16. Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream

  17. “ — 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.
  18. “ — from the Agile Manifesto WORKING SOFTWARE ALWAYS TRUMPS

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

  20. USE A FRAMEWORK ROLL YOUR OWN? or

  21. 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
  22. FRAMEWORK CONS ‣ Working with someone else’s code ‣ Learning

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

    ‣ More likely creates HTML/styles for final product ‣ Build up your own component / style library
  24. 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
  25. PROTOTYPING FRAMEWORKS ‣ Twitter Bootsrap ‣ Zurb Foundation ‣ Skeleton

  26. BOOTSTRAP Pros ‣ Popular ‣ Lots of documentation ‣ 5

    break points ‣ Templates & Components ‣ Active development Cons ‣ Not semantic ‣ Not mobile rst
  27. SKELETON Pros ‣ Good documentation ‣ 5 break points Cons

    ‣ Not popular ‣ Not semantic ‣ Not mobile rst
  28. FOUNDATION Pros ‣ Popular ‣ Mobile rst ‣ Optionally semantic

    ‣ Templates & Components ‣ Active development ‣ Paid training available Cons ‣ Only 1 break point
  29. GET SKETCHY

  30. GETTING STARTED WITH FOUNDATION

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

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

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

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

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

  36. small-12 large-8 <div class="row"> <div class="small-12 large-8 columns">...</div> </div>

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

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

    </div>
  39. 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>
  40. small-10 large-8 large-centered <div class="row"> <div class="small-10 large-8 large-centered columns">...</div>

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

    columns">...</div> </div>
  42. 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>
  43. 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>
  44. None
  45. None
  46. None
  47. None
  48. COMPONENTS & ELEMENTS ‣ Navigation ‣ Buttons ‣ Forms ‣

    Typography ‣ Components
  49. None
  50. None
  51. None
  52. None
  53. None
  54. LET’S GIVE IT A TRY!

  55. None
  56. [insert_terrifying_live_demo]

  57. HELPFUL LINKS ‣ http://foundation.zurb.com ‣ http://susy.oddbird.net ‣ 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
  58. THANKS! Jared Ponchot // @jponch // Artifact Austin 2013