PURPOSE CONTENT
& HIERARCHY
SYSTEMS
& STYLE
STRATEGY
DESIGN
DEVELOPMENT
Slide 10
Slide 10 text
PURPOSE CONTENT
& HIERARCHY
SYSTEMS
& STYLE
WIREFRAMES
Slide 11
Slide 11 text
“
— Victor Papanek
DESIGN IS THE CONSCIOUS EFFORT
TO IMPOSE A MEANINFUL ORDER
Slide 12
Slide 12 text
WHY
RESPONSIVE WIREFRAMES?
Slide 13
Slide 13 text
http://imgur.com/a/q1WIO
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream
Slide 17
Slide 17 text
“
— 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.
Slide 18
Slide 18 text
“
— from the Agile Manifesto
WORKING SOFTWARE ALWAYS TRUMPS
DOCUMENTS ABOUT WORKING SOFTWARE.
Slide 19
Slide 19 text
BONUS REASON:
IT’S NOT THAT HARD!
Slide 20
Slide 20 text
USE A FRAMEWORK
ROLL YOUR OWN?
or
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
FRAMEWORK CONS
‣ Working with someone else’s code
‣ Learning curve
‣ Might not be the best fit for your situation
Slide 23
Slide 23 text
ROLL YOUR OWN PROS
‣ Ownership
‣ Flexibility
‣ Customization
‣ More likely creates HTML/styles for final product
‣ Build up your own component / style library
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
PROTOTYPING FRAMEWORKS
‣ Twitter Bootsrap
‣ Zurb Foundation
‣ Skeleton
Slide 26
Slide 26 text
BOOTSTRAP
Pros
‣ Popular
‣ Lots of documentation
‣ 5 break points
‣ Templates & Components
‣ Active development
Cons
‣ Not semantic
‣ Not mobile rst
Slide 27
Slide 27 text
SKELETON
Pros
‣ Good documentation
‣ 5 break points
Cons
‣ Not popular
‣ Not semantic
‣ Not mobile rst
Slide 28
Slide 28 text
FOUNDATION
Pros
‣ Popular
‣ Mobile rst
‣ Optionally semantic
‣ Templates & Components
‣ Active development
‣ Paid training available
Cons
‣ Only 1 break point
Slide 29
Slide 29 text
GET SKETCHY
Slide 30
Slide 30 text
GETTING STARTED WITH
FOUNDATION
Slide 31
Slide 31 text
THE PLACES YOU’LL GO
‣ DOWNLOAD: http://foundation.zurb.com
‣ DOCUMENTATION: http://foundation.zurb.com/docs/
‣ TEMPLATES: http://foundation.zurb.com/templates.php
Slide 32
Slide 32 text
GETTING STARTED
‣ Grid
‣ Templates
‣ Other Goodies
Slide 33
Slide 33 text
THE GRID
‣ 12 columns (small and large)
‣ Nestable
‣ Fluid, with an arbitrary max-width
Slide 34
Slide 34 text
x = number of grid columns
Small screen: “small-x columns”
Large screen: “large-x columns”
Slide 35
Slide 35 text
...
Slide 36
Slide 36 text
small-12 large-8
...
Slide 37
Slide 37 text
small-12
...
Slide 38
Slide 38 text
small-12 large-8 large-offset-4
...
Slide 39
Slide 39 text
small-12 large-8 large-offset-3
...
...
Slide 40
Slide 40 text
small-10 large-8 large-centered
...
Slide 41
Slide 41 text
small-10 large-8 large-uncentered
...
Slide 42
Slide 42 text
small-12 large-8 & large-4
...
...
Slide 43
Slide 43 text
small-8 within small-12
small-8 within large-5
...
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
COMPONENTS & ELEMENTS
‣ Navigation
‣ Buttons
‣ Forms
‣ Typography
‣ Components