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
730
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
Shinagile 2024
kawaguti
PRO
1
110
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
8
5.1k
個人のAWSアカウントをマルチ運用してみた
miura55
2
290
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
130
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
370
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
18
4.6k
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
1
320
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
120
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
290
AWS Observability ベストプラクティス 大紹介
o11yfes2023
0
130
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
210
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
210
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Web Components: a chance to create the future
zenorocha
306
41k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Debugging Ruby Performance
tmm1
70
11k
What's in a price? How to price your products and services
michaelherold
238
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Designing for Performance
lara
601
67k
The Brand Is Dead. Long Live the Brand.
mthomps
49
30k
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