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

    View full-size slide

  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.

    View full-size slide

  3. Who?
    • Who are we building for?
    • Browser support, screen resolution?
    • Grade A, B, C, D
    • Desktop, tablet, smartphone, feature phone.

    View full-size slide

  4. What’s the stack?
    • Front end web
    • HTML5, CSS3, Javascript.
    • Semantic naming. Class > ID
    • Frameworks are okay.

    View full-size slide

  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/)

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide