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
570
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
330
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
500
Mobile First: as difficult as doing things right
swwweet
223
9.7k
One Size Fits None
swwweet
12
850
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
580
Other Decks in Technology
See All in Technology
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
400
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
1
200
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
140
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
170
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
140
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
0
190
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
430
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
GitHub Copilot の概要
tomokusaba
1
150
OPENLOGI Company Profile
hr01
0
67k
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
Featured
See All Featured
The Invisible Side of Design
smashingmag
300
51k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Automating Front-end Workflow
addyosmani
1370
200k
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