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.1k
Building for performance and resilience
andyhume
5
1.2k
Architecting resilient front ends
andyhume
3
820
Guardian Responsive Design, SmashingConf 2013
andyhume
6
630
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
750
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.9k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
260
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
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
540
現場で役立つAPIデザイン
nagix
33
12k
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
240
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
130
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
200
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
2.9k
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
720
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
0
110
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Ace a Technical Interview
jacobian
276
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Bash Introduction
62gerente
611
210k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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