Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Building a Responsive Website - Best Practices & Case Study
Michael Cheng
December 06, 2013
Programming
2
220
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
55
Prioritizing Technical Debt
miccheng
0
71
JuniorDevSG - Intro to Coding Dojo
miccheng
0
83
Intro to Web Development with PHP - Lesson 1
miccheng
0
82
Engineers.SG Volunteers Training (4 Aug 2018)
miccheng
0
57
Introduction to PHPConf.Asia 2018
miccheng
0
600
What about Ruby on Rails?... from a PHP Guy
miccheng
0
110
Engineers.SG Volunteers Training (July 2017)
miccheng
0
68
Concourse CI in the Wild
miccheng
0
110
Other Decks in Programming
See All in Programming
AWSにおける標的型Bot対策
hacomono
0
420
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
280
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
260
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
250
How to Fight Production Incidents?
asatarin
0
200
AWSとCPUのムフフな関係
cmdemura
0
470
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
Ruby Pattern Matching
bkuhlmann
0
610
Quarto Tips for Academic Presentation
nicetak
0
930
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
180
Step Functions Distributed Map を使ってみた
codemountains
0
110
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Gamification - CAS2011
davidbonilla
75
4.1k
How to train your dragon (web standard)
notwaldorf
66
4.3k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Clear Off the Table
cherdarchuk
79
290k
Building Applications with DynamoDB
mza
85
5k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Adopting Sorbet at Scale
ufuk
65
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
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