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.2k
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
3
1k
Building for performance and resilience
andyhume
5
1k
Architecting resilient front ends
andyhume
4
720
Guardian Responsive Design, SmashingConf 2013
andyhume
6
520
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
690
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.7k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
200
Anatomy of a responsive page load, Responsive Day Out 2013
andyhume
23
3.2k
Responsive Guardian
andyhume
21
960
Other Decks in Technology
See All in Technology
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.8k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
160
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.4k
しくじり先生、PharmaXのLLMアプリケーション開発の失敗を語る
pharma_x_tech
0
130
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
180
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
1
770
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
4.7k
認知症フレンドリーテックとスタックチャン
naokiuc
0
360
DX企業CTOとして考える技術への向き合い方
shoheitai
0
110
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1.1k
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
420
生産性向上チームの紹介
cybozuinsideout
PRO
1
960
Featured
See All Featured
A Tale of Four Properties
chriscoyier
153
22k
Web Components: a chance to create the future
zenorocha
306
41k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Design by the Numbers
sachag
274
18k
Embracing the Ebb and Flow
colly
80
4.2k
Done Done
chrislema
178
15k
Side Projects
sachag
451
41k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Happy Clients
brianwarren
92
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Atom: Resistance is Futile
akmur
260
25k
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