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
520
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
230
How to be the best web designer in the world.
swwweet
5
980
Design for loading
swwweet
4
410
Mobile First: as difficult as doing things right
swwweet
215
8.5k
One Size Fits None
swwweet
12
750
One Size Fits None - From the Front 2013
swwweet
2
610
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
970
The future of code
swwweet
4
430
Other Decks in Technology
See All in Technology
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
380
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
890
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
10分でわかるfreeeのQA
freee
0
260
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
850
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2.1k
GraphQLに入門してみた
chiroruxx
2
130
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
490
AWS アーキテクチャクイズ
yuu26
2
700
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Design by the Numbers
sachag
274
18k
Faster Mobile Websites
deanohume
296
30k
The Language of Interfaces
destraynor
150
23k
4 Signs Your Business is Dying
shpigford
174
21k
BBQ
matthewcrist
78
8.7k
Practical Orchestrator
shlominoach
180
9.7k
How to name files
jennybc
62
92k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
A Philosophy of Restraint
colly
195
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