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
250
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
130
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
90
Concourse CI in the Wild
miccheng
0
230
Other Decks in Programming
See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
5つのアンチパターンから学ぶLT設計
narihara
1
110
エラーって何種類あるの?
kajitack
5
300
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
GraphRAGの仕組みまるわかり
tosuri13
7
480
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
エンジニア向け採用ピッチ資料
inusan
0
160
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.5k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Balancing Empowerment & Direction
lara
1
370
The Invisible Side of Design
smashingmag
299
51k
BBQ
matthewcrist
89
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Embracing the Ebb and Flow
colly
86
4.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Become a Pro
speakerdeck
PRO
28
5.4k
Facilitating Awesome Meetings
lara
54
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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