Building a Responsive Website - Best Practices & Case Study

Presented at Hackers and Painters on 6 December 2013

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