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
530
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
260
How to be the best web designer in the world.
swwweet
6
1.1k
Design for loading
swwweet
5
430
Mobile First: as difficult as doing things right
swwweet
219
8.8k
One Size Fits None
swwweet
12
780
One Size Fits None - From the Front 2013
swwweet
2
630
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
480
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
How to Think Like a Performance Engineer
csswizardry
4
590
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
The Language of Interfaces
destraynor
151
23k
Unsuck your backbone
ammeep
666
57k
Faster Mobile Websites
deanohume
303
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Navigating Team Friction
lara
181
13k
RailsConf 2023
tenderlove
16
720
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
How to Think Like a Performance Engineer
csswizardry
4
590
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Producing Creativity
orderedlist
PRO
340
39k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
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