Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building a Responsive Website - Best Practices ...
Search
Michael Cheng
December 06, 2013
Programming
2
260
Building a Responsive Website - Best Practices & Case Study
Presented at Hackers and Painters on 6 December 2013
Michael Cheng
December 06, 2013
Tweet
Share
More Decks by Michael Cheng
See All by Michael Cheng
Intro to GraphQL Workshop
miccheng
0
100
Prioritizing Technical Debt
miccheng
0
150
JuniorDevSG - Intro to Coding Dojo
miccheng
0
140
Intro to Web Development with PHP - Lesson 1
miccheng
0
120
Engineers.SG Volunteers Training (4 Aug 2018)
miccheng
0
84
Introduction to PHPConf.Asia 2018
miccheng
0
700
What about Ruby on Rails?... from a PHP Guy
miccheng
0
130
Engineers.SG Volunteers Training (July 2017)
miccheng
0
91
Concourse CI in the Wild
miccheng
0
230
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Team operations that are not burdened by SRE
kazatohiei
1
310
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AIともっと楽するE2Eテスト
myohei
7
2.7k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
850
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
530
Is Xcode slowly dying out in 2025?
uetyo
1
280
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
It's Worth the Effort
3n
185
28k
Facilitating Awesome Meetings
lara
54
6.4k
Building an army of robots
kneath
306
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Transcript
Building a Responsive Website Best Practices & Case Study
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.
Who? • Who are we building for? • Browser support,
screen resolution? • Grade A, B, C, D • Desktop, tablet, smartphone, feature phone.
What’s the stack? • Front end web • HTML5, CSS3,
Javascript. • Semantic naming. Class > ID • Frameworks are okay.
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/)
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.
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.
Demo