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
160
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
85
Introduction to PHPConf.Asia 2018
miccheng
0
710
What about Ruby on Rails?... from a PHP Guy
miccheng
0
140
Engineers.SG Volunteers Training (July 2017)
miccheng
0
94
Concourse CI in the Wild
miccheng
0
230
Other Decks in Programming
See All in Programming
兎に角、コードレビュー
mitohato14
0
140
実践 Dev Containers × Claude Code
touyu
1
220
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
630
Infer入門
riru
4
1.5k
バイブコーディング × 設計思考
nogu66
0
120
Flutterと Vibe Coding で個人開発!
hyshu
1
260
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
570
Constant integer division faster than compiler-generated code
herumi
2
670
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
実践!App Intents対応
yuukiw00w
1
320
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
What's in a price? How to price your products and services
michaelherold
246
12k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Thoughts on Productivity
jonyablonski
69
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
It's Worth the Effort
3n
187
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
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