Building a Responsive
Website
Best Practices & Case Study
Slide 2
Slide 2 text
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.
Slide 3
Slide 3 text
Who?
• Who are we building for?
• Browser support, screen resolution?
• Grade A, B, C, D
• Desktop, tablet, smartphone, feature phone.
Slide 4
Slide 4 text
What’s the stack?
• Front end web
• HTML5, CSS3, Javascript.
• Semantic naming. Class > ID
• Frameworks are okay.
Slide 5
Slide 5 text
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/)
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
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.