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
950
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
37k
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
390
Cypress or Playwright?
rainerhahnekamp
0
160
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
250
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
本当のAWS基礎
toru_kubota
1
600
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
570
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
750
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
On Your Data を超えていく!
hirotomotaguchi
2
750
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
260
Featured
See All Featured
Docker and Python
trallard
35
2.7k
The Mythical Team-Month
searls
216
42k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
6
1.3k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
A Modern Web Designer's Workflow
chriscoyier
689
190k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
It's Worth the Effort
3n
180
27k
KATA
mclloyd
16
12k
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