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
250
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
94
Prioritizing Technical Debt
miccheng
0
140
JuniorDevSG - Intro to Coding Dojo
miccheng
0
130
Intro to Web Development with PHP - Lesson 1
miccheng
0
110
Engineers.SG Volunteers Training (4 Aug 2018)
miccheng
0
81
Introduction to PHPConf.Asia 2018
miccheng
0
690
What about Ruby on Rails?... from a PHP Guy
miccheng
0
130
Engineers.SG Volunteers Training (July 2017)
miccheng
0
85
Concourse CI in the Wild
miccheng
0
210
Other Decks in Programming
See All in Programming
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
160
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
150
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.4k
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
810
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
240
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
310
Unlock the Potential of Swift Code Generation
rockname
0
220
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
290
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
170
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
700
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
260
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.4k
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Speed Design
sergeychernyshev
28
880
Building Adaptive Systems
keathley
41
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
A designer walks into a library…
pauljervisheath
205
24k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Automating Front-end Workflow
addyosmani
1369
200k
Writing Fast Ruby
sferik
628
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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