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 Enhancement
Search
Swwweet
December 07, 2012
Technology
12
580
Responsive Enhancement
Presentation by @htmlboy at Barcelona Developers Conference 2012.
Swwweet
December 07, 2012
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
340
How to be the best web designer in the world.
swwweet
6
1.3k
Design for loading
swwweet
5
520
Mobile First: as difficult as doing things right
swwweet
225
10k
One Size Fits None
swwweet
12
870
One Size Fits None - From the Front 2013
swwweet
2
720
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.2k
The future of code
swwweet
4
600
Other Decks in Technology
See All in Technology
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
400
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
Digitization部 紹介資料
sansan33
PRO
1
5.6k
Kubernetes self-healing of your workload
hwchiu
0
350
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
800
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
160
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
290
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
140
React19.2のuseEffectEventを追う
maguroalternative
2
590
Microsoft 365 の認証と承認を理解する / Understanding Microsoft 365 Authentication and Authorization
karamem0
0
110
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
190
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
180
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Music & Morning Musume
bryan
46
6.9k
Facilitating Awesome Meetings
lara
57
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Pragmatic Product Professional
lauravandoore
36
7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Transcript
RESPONSIVE ENHANCEMENT
I WORK AT SWWWEET.COM HI, I’M @HTMLBOY
I WORK AT SWWWEET.COM HI, I’M @HTMLBOY
I’m a web designer & front-end dev
I’m a web designer & front-end dev DISSAPOINTED
TOP 10 WEB DESIGN MYTHS
the Future is high-speed connections everywhere MYTH #1
flickr.com/photos/potjie/543400371
MYTH #2 Mobile = Stress Desktop = Relax
flickr.com/photos/shareski/5453209957
MYTH #3 We can’t give the full content to mobile
devices
3 or 4 Ferraris are sold every month on eBay's
mobile apps.” “ globalmoxie.com/blog/mobile-commerce-belly-flop.shtml
MYTH #4 Superhardware awesomeness!
flickr.com/photos/alien-paranoia/4941130941
MYTH #5 Auto-updated high-tech browsers by default
flickr.com/photos/mattimattila/5703851562
MYTH #6 Nobody browses without JS (and we have <noscript>)
We don't have any non-JavaScript users” No, all your users
are non-JS while they're downloading your JS Jake Archibald “
MYTH #7 We control the content with JS and CSS
None
MYTH #8 We should only care about popular devices
None
MYTH #9 Everybody browses full-screen
None
MYTH #10 Big = mouse Small = touch
None
CHANGING THE WAY WE WORK
Build always with a FALLBACK
HTML FALLBACKS <canvas> <span>Fallback content</span> </canvas>
.canvas{ border:10px solid grey; border-color: rgba(0,0,0,.5); } CSS FALLBACKS
Detect SUPPORT for new & shiny properties
modernizr.com MODERNIZR .no-cssgradients .button{ background: url(gradient.png); }
bit.ly/css-supports @SUPPORTS @supports (display:flex) { section { display: flex; }
}
RESPONSIVE web design
None
None
None
FLEXIBLE GRIDS aside{ width: 38%; margin-left: 2%; float: right; }
FLEXIBLE IMAGES .img-container img{ max-width:100%; }
@media all and (max-width:400px){ .aside{ width:100%; margin-left:0; float:left; } }
MEDIA QUERIES
MOBILE FIRST
One-column Small assets Clear hierarchy
<!-- [if lte IE 8]> <link rel=”stylesheet” href=”ie8.css”> <![endif]--> IE8
!= MEDIA QUERIES
or use respond.js github.com/scottjehl/Respond
We are reaching the BREAKING POINT
We can’t use the same CSS & JS everywhere
RESPONSIVE ENHANCEMENT introducing...
Instead of just using progressive enhancement to throw in some
rounded corners[...], we can apply the same thinking to layout.” Jeremy Keith “
START WITH THE CONTENT Text Images Links
LEGACY LAYOUT Let’s call it the
Consider the LAYOUT as an ENHANCEMENT
HIDING STYLES @media all and (min-width:1px){ /*styles for browsers with
media query support*/ }
FIX THE DESIGN IF IT BREAKS Stop being obsessed with
“popular devices”
USE EM-BASED MEDIA QUERIES Be prepared to be zoomed. Play
nice with smart TVs
Consider JAVASCRIPT as an ENHANCEMENT
NON-JS BY DEFAULT
CONTENT FIRST So basically...
ENHANCE IT WITH LAYOUT, JAVASCRIPT & DECORATION
Build for THE FUTURE
Build for THE FUTURE and for THE PAST
THANKS! Javier Usobiaga @htmlboy