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
110
Prioritizing Technical Debt
miccheng
0
160
JuniorDevSG - Intro to Coding Dojo
miccheng
0
150
Intro to Web Development with PHP - Lesson 1
miccheng
0
130
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
99
Concourse CI in the Wild
miccheng
0
230
Other Decks in Programming
See All in Programming
私はどうやって技術力を上げたのか
yusukebe
43
18k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
120
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
690
Le côté obscur des IA génératives
pascallemerrer
0
130
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
200
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
650
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
240
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
CSC305 Lecture 03
javiergs
PRO
0
240
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
3
1.3k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Writing Fast Ruby
sferik
629
62k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Balancing Empowerment & Direction
lara
4
680
Raft: Consensus for Rubyists
vanstee
139
7.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Cult of Friendly URLs
andyhume
79
6.6k
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