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!

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
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>
48. COMPONENTS & ELEMENTS ‣ Navigation ‣ Buttons ‣ Forms ‣ Typography ‣ Components
54. LET’S GIVE IT A TRY!
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