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 & Case Study
Search
Michael Cheng
December 06, 2013
Programming
2
240
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
82
Prioritizing Technical Debt
miccheng
0
120
JuniorDevSG - Intro to Coding Dojo
miccheng
0
110
Intro to Web Development with PHP - Lesson 1
miccheng
0
100
Engineers.SG Volunteers Training (4 Aug 2018)
miccheng
0
73
Introduction to PHPConf.Asia 2018
miccheng
0
650
What about Ruby on Rails?... from a PHP Guy
miccheng
0
120
Engineers.SG Volunteers Training (July 2017)
miccheng
0
78
Concourse CI in the Wild
miccheng
0
180
Other Decks in Programming
See All in Programming
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
【Go言語】golangci-lintの使い方
tomo1227
0
280
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
How STYLIGHT went responsive
nonsquared
93
5k
What the flash - Photography Introduction
edds
65
11k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Producing Creativity
orderedlist
PRO
340
39k
Building Adaptive Systems
keathley
34
2k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Facilitating Awesome Meetings
lara
46
5.8k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
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