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
830
Guardian Responsive Design, SmashingConf 2013
andyhume
6
630
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
760
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
SREが実現する開発者体験の革新
sansantech
PRO
0
130
自分の軸足を見つけろ
tsuemura
1
150
Medmain FACTBOOK
akinaootani
0
160
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
160
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
700
50人の組織でAIエージェントを使う文化を作るためには / How to Create a Culture of Using AI Agents in a 50-Person Organization
yuitosato
3
1.6k
こんなデータマートは嫌だ。どんな? / waiwai-data-meetup-202504
shuntak
3
590
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
130
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
270
OPENLOGI Company Profile
hr01
0
62k
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
40
15k
20250325_Logic Apps / Power Automate の SharePoint コネクタの裏側を知る 〜Graph APIで直接操作してみよう〜
yutakaosada
0
110
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
28
870
A Tale of Four Properties
chriscoyier
158
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
630
How to Ace a Technical Interview
jacobian
276
23k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Done Done
chrislema
183
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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