Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation

For the best experience please use the latest Chrome, Safari or Firefox browser

Plan for Multiple Devices

  1. Markup should impact design as little as possible
    • i.e. changes to markup should impact design as little as possible
  2. Load only what you need when you need it
    • Microlibraries are available for many things (find them at http://microjs.com/ and all over github)
  3. Separate the need for functionality from the need for resolution
    • Support as much as possible without javascript or with as little javascript as possible
    • Support as many resolutions as possible using media queries and layout changes
    • Add on to your base and build up to full support (applies to both form and function)
  4. Browsers have inconsistencies and we can't negate them all. Plan for them, but support only what you're able to
    • ≤ IE8 have display inconsistencies, much moreso than FF and Webkit, so keep that in mind
    • CSS3 is great - where available. Use Modernizr to detect support
    • Polyfills and shims save lives (or, at least, headaches)

CSS Optimization

  1. Limit recalculating
    • Avoid manipulating the DOM, hiding (via display: none or visibility: hidden), and using CSS or javascript animations before page/content is fully loaded
  2. No:
    • Unnecessary tag identifiers (e.g. ul#navigation and ul.menu), HTML, or CSS
    • Ancestors or chaining
    • Universal or unqualified selectors (e.g. [title^="whatever"] because it applies to everything)
  3. Keep your css simple
  4. LESS and SASS/SCSS are nice, but be weary of them

Responsive Images via Picturefill.js

  1. Source at https://github.com/scottjehl/picturefill
  2. For mobile-first, adaptive approach
  3. Can be lighter weight up-front
  4. ≤ IE8 may require conditional comments due to lack of media query support
  5. Example usage:
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</div>

Test Your Performance

  1. Webkit Dev Tools are your friends
    • Network, for finding heavy assets
    • Timeline, for finding what's taking so damned long
    • Profiles, for testing performance
    • Audits, for testing unused CSS
  2. Responsinator for testing generic design across multiple device sizes
  3. I wanted to put something about TDD javascript, but I haven't really done anything with it. Maybe Todd will enlighten us all at some point in the future