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
Responsive Design
Search
Andy Hume
November 13, 2011
Technology
23
1.3k
Responsive Design
Practical approaches to building responsive websites
Andy Hume
November 13, 2011
Tweet
Share
More Decks by Andy Hume
See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
andyhume
2
1.2k
Building for performance and resilience
andyhume
5
1.2k
Architecting resilient front ends
andyhume
3
870
Guardian Responsive Design, SmashingConf 2013
andyhume
6
660
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
780
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.9k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
290
Anatomy of a responsive page load, Responsive Day Out 2013
andyhume
23
3.3k
Responsive Guardian
andyhume
21
1.1k
Other Decks in Technology
See All in Technology
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
330
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
200
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
870
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
180
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
970
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
120
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.2k
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
930
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.1k
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
610
OPENLOGI Company Profile for engineer
hr01
1
37k
リリース2ヶ月で収益化した話
kent_code3
1
220
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Invisible Side of Design
smashingmag
301
51k
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Fireside Chat
paigeccino
38
3.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
It's Worth the Effort
3n
185
28k
Transcript
@andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE
@andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE
None
From now on, instead of talking about making a site
accessible, I'm going to talk about keeping it accessible. “ Jeremy Keith
TRY NOT TO BREAK IT? THE WEB WORKS
RESPONSIVENESS? WHAT BROKE .container { width: 960px; }
SEMANTIC HTML STEPS[0]
OOCSS STEPS[1] Loosely couple content styling from layout styling <link
rel="stylesheet" href="core.css">
CORE.CSS STEPS[4] .product .title { font-size: 1em; } @media screen
and (min-width: 60em) { .product .title { font-size: 1.4em; } } Keep modules together
SELECTOR QUERIES? STEPS[4] <div class="product" data-squery="min-width: 400px=wide max-width:10em=small"> <p>Content here</p>
</div> Adapt content based on container width https://github.com/ahume/selector-queries
SELECTOR QUERIES? STEPS[4] .product img { max-width: 100%; } .product.wide
img { // greater than 400px float: left; margin-right: 1em; max-width: auto; } Adapt content based on container width https://github.com/ahume/selector-queries
NAVIGATION STEPS[2]
NAVIGATION STEPS[2]
ADDING LAYOUT STEPS[3] <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="layout.css" media="screen
and (min-width:40em)"> Loosely couple content styling from layout styling
IE <9 STEPS[5] Send full ‘desktop’ layout <link rel="stylesheet" href="core.css">
<link rel="stylesheet" href="layout.css" media="screen and (min-width:40em)"> <!--[if lt IE 9]> <link rel="stylesheet" href="layout.css" media="screen"> <![endif]-->
IE <9 STEPS[5] Send full ‘desktop’ layout - but not
to mobile <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="layout.css" media="screen and (min-width:40em)"> <!--[if lt IE 9] & !(IEMobile)]> <link rel="stylesheet" href="layout.css" media="screen"> <![endif]-->
IE <9 STEPS[5] Send full ‘desktop’ layout - or not
<link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="layout.css" media="screen and (min-width:40em)"> <!--[if lt IE 9] & !(IEMobile) & (gt IE6)]> <link rel="stylesheet" href="layout.css" media="screen"> <![endif]-->
IE <9 STEPS[5] Polyfill media queries <script rel="respond.js"></script> https://github.com/scottjehl/Respond
VIEWPORT STEPS[6] Set layout viewport width to the device width
<meta name="viewport" content="width=device-width, initial-scale=1.0">
VIEWPORT STEPS[6] W3C Syntax: coming soon http://dev.w3.org/csswg/css-device-adapt/ @viewport { width:
device-width; zoom: 1.0; }
IMAGES STEPS[7] Shrinking img { max-width: 100%; }
RESPONSIVE IMAGES STEPS[7] Small image by default Don’t download both
RESPONSIVE IMAGES STEPS[7] Client-side solutions https://github.com/filamentgroup/Responsive-Images https://github.com/ahume/Responsive-Images https://github.com/allmarkedup/responsive-images-alt
RESPONSIVE IMAGES STEPS[7] Here and now? src.sencha.io <img src="http://src.sencha.io/http://andyhume.net/ u.jpg">
RESPONSIVE IMAGES STEPS[7] Here and now? Image replacement <div class="logo">
<img src="logo.png" alt="Company name"> </div> .logo { background-image: url(logo-large.png); } .logo img { position: absolute; left: -9999px; }
SVG STEPS[8] Same approaches to support as responsive images
ENHANCING CONTENT STEPS[9] What’s core content?
ENHANCING CONTENT STEPS[9]
ENHANCING CONTENT STEPS[9]
ENHANCING CONTENT STEPS[9] if ($(document).width() > 640) { ! $.get('path/to/html',
function(data) { ! ! $('[role="complementary"]').append(data); ! }); } What’s core content?
WHAT ELSE? Bandwidth Touch Individual user behaviour
THE END @andyhume Multipack Presents • 12th November 2011