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
86
Introduction to PHPConf.Asia 2018
miccheng
0
720
What about Ruby on Rails?... from a PHP Guy
miccheng
0
140
Engineers.SG Volunteers Training (July 2017)
miccheng
0
100
Concourse CI in the Wild
miccheng
0
230
Other Decks in Programming
See All in Programming
CSC305 Lecture 06
javiergs
PRO
0
270
CSC509 Lecture 05
javiergs
PRO
0
310
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
790
CSC509 Lecture 08
javiergs
PRO
0
230
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
13k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
670
理論と実務のギャップを超える
eycjur
0
170
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
Google Opalで使える37のライブラリ
mickey_kubo
3
130
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Site-Speed That Sticks
csswizardry
13
920
Art, The Web, and Tiny UX
lynnandtonic
303
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
For a Future-Friendly Web
brad_frost
180
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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