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
560
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
320
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
490
Mobile First: as difficult as doing things right
swwweet
223
9.5k
One Size Fits None
swwweet
12
840
One Size Fits None - From the Front 2013
swwweet
2
700
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
560
Other Decks in Technology
See All in Technology
OCI見積もり入門セミナー
oracle4engineer
PRO
0
120
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
250
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
730
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.6k
Redefine_Possible
upsider_tech
0
280
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
440
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
130
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
150
20250326_管理ツールの権限管理で改善したこと
sasata299
1
390
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
Documentation Writing (for coders)
carmenintech
69
4.7k
Bash Introduction
62gerente
611
210k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Practical Orchestrator
shlominoach
187
10k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
17
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
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