Defensive Development = Qualified Upgrades
Experience Divisions
Slide 25
Slide 25 text
Basic CSS
Slide 26
Slide 26 text
“Basic” = safe defaults
• Tweaks to browser typography
• Horizontal rules
• Text alignment
• Display: Inline / Block
• No complex layout or positioning
Slide 27
Slide 27 text
“Basic”
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Enhanced Experience
Slide 30
Slide 30 text
The @media qualifier
Slide 31
Slide 31 text
Ethan Marcotte
“If you’re awesome,
or you’re Internet Explorer,
you get enhanced.”
Slide 32
Slide 32 text
@media-fortified design.
Slide 33
Slide 33 text
All in your
Slide 34
Slide 34 text
The Concatenator
Slide 35
Slide 35 text
Server-side Concatenation
Minify + Gzip
Slide 36
Slide 36 text
Enhanced CSS
/* styles for everyone go here.. */
@media all and (min-width: 500px){ .. }
@media all and (min-width: 620px){ .. }
@media all and (min-width: 950px){ .. }
Slide 37
Slide 37 text
Inheritance Prevention
@media all and (min-width: 500px)
and (max-width: 700px){
/* styles constrained to 500-700px */
}
Slide 38
Slide 38 text
Left
Right
Left
Slide 39
Slide 39 text
Display: table + table-cell
Slide 40
Slide 40 text
Ems all the way down.
Ems allow for components to adapt
differently in different containers
Slide 41
Slide 41 text
• ResponsiveImages.js
• Respond.js
• Modernizr / extensions / HTML5 Shim
• The Boston Globe JS Framework
Basic.js: “just enough”
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Also.
Slide 44
Slide 44 text
Responsive Images
Slide 45
Slide 45 text
Edge Cases
Slide 46
Slide 46 text
Edge Cases
Slide 47
Slide 47 text
Respond.js
https://github.com/scottjehl/Respond
Now available as part of
Our width usage rule of thumb:
screen for assets
window for design
Slide 68
Slide 68 text
Why Screen, not viewport?
• Fixed per device
• Assets delivered to device’s
potential, not just current state.
• Orientation-change makes resize
relevant again.