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

Building a Responsive Website - Best Practices & Case Study

Building a Responsive Website - Best Practices & Case Study

Presented at Hackers and Painters on 6 December 2013

Michael Cheng

December 06, 2013
Tweet

More Decks by Michael Cheng

Other Decks in Programming

Transcript

  1. Building a Responsive Website Best Practices & Case Study

  2. Responsive? • How fast your website responds to user input.

    • http://developer.yahoo.com/performance/ rules.html • How well your website gracefully degrades for optimum viewing on various browsers/platforms.
  3. Who? • Who are we building for? • Browser support,

    screen resolution? • Grade A, B, C, D • Desktop, tablet, smartphone, feature phone.
  4. What’s the stack? • Front end web • HTML5, CSS3,

    Javascript. • Semantic naming. Class > ID • Frameworks are okay.
  5. What we use? • LESS CSS Pre-processor (http://lesscss.org/) • LESS

    Elements (http://lesselements.com/) • PHPTal templating (http://phptal.org/) • Vanilla JS (http://vanilla-js.com/)
  6. Best Practices • Media Queries are your friend. Resolution depends

    on your design. • Build for the smallest device first. Then layer up. • Load assets as you need it. • Style a tag instead of adding a div class. Solve DIV-itis / CLASS-itis.
  7. Best Practices • Browser developer tools are your best friend.

    • Minify / GZip your JS / CSS. • Use CDN to distribute static assets (if you can). • CSS3 Transitions for smooth resizing.
  8. Demo