Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Responsive Design
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
850
Building for performance and resilience
andyhume
5
830
Architecting resilient front ends
andyhume
4
540
Guardian Responsive Design, SmashingConf 2013
andyhume
6
390
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
590
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.4k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
110
Anatomy of a responsive page load, Responsive Day Out 2013
andyhume
23
3.1k
Responsive Guardian
andyhume
21
780
Other Decks in Technology
See All in Technology
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
5
2.8k
Motto Go Forward スライドトップと Goを支える文化とコミュニティ してご利用ください 〜なぜ我々はコミュニティにコントリ ビュートするのか〜
luccafort
0
170
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
2.8k
mROS 2のススメ
takasehideki
0
290
プロダクション環境の信頼性を損ねず観測する技術
egmc
4
310
jaws-ug-asa-datasync-20220510
hiashisan
0
460
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
20220510_簡単にできるコスト異常検出(Cost Anomaly Detection) /jaws-ug-asa-cost-anomaly-detection-20220510
emiki
2
310
AWS CloudShellという推しサービスについて / lt-20220502-jawsug-cli
becominn
0
630
We’re all on the path of growth 🌱
mosky
1
360
完全に理解した incremetal 〜そして、何もわからないへ〜
mashiike
0
210
Salesforce女子部-権限についてまとめてみたその1
sfggjp
0
180
Featured
See All Featured
Infographics Made Easy
chrislema
233
17k
Building Adaptive Systems
keathley
25
1.1k
How to name files
jennybc
39
58k
Scaling GitHub
holman
451
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Code Reviewing Like a Champion
maltzj
506
37k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Optimizing for Happiness
mojombo
365
63k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Bash Introduction
62gerente
596
210k
The Language of Interfaces
destraynor
148
20k
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