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
150
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
700
What about Ruby on Rails?... from a PHP Guy
miccheng
0
140
Engineers.SG Volunteers Training (July 2017)
miccheng
0
92
Concourse CI in the Wild
miccheng
0
230
Other Decks in Programming
See All in Programming
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
130
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
850
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Go製CLIツールをnpmで配布するには
syumai
0
860
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
680
What's new in AppKit on macOS 26
1024jp
0
180
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
160
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
A designer walks into a library…
pauljervisheath
207
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
400
Gamification - CAS2011
davidbonilla
81
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Code Review Best Practice
trishagee
69
19k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Scaling GitHub
holman
461
140k
Designing Experiences People Love
moore
142
24k
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