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 JavaScript
Search
Rob Tarr
April 26, 2013
Technology
4
950
Responsive JavaScript
JavaScript tools to help you build responsive websites.
Rob Tarr
April 26, 2013
Tweet
Share
More Decks by Rob Tarr
See All by Rob Tarr
Frontend_Testing.pdf
robtarr
0
100
Blur the Lines: Write Web Apps That Feel Native
robtarr
1
100
Blur The Lines - Native Feeling Web Apps
robtarr
0
86
Blur the Lines: How to write web apps that look native.
robtarr
0
84
Development Tools and Responsive JavaScript
robtarr
1
160
JavaScript App Development
robtarr
3
390
Other Decks in Technology
See All in Technology
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
130
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Connect 100+を支える技術
kanyamaguc
0
200
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
140
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
550
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
ゼロからはじめる採用広報
yutadayo
3
910
MobileActOsaka_250704.pdf
akaitadaaki
0
120
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making Projects Easy
brettharned
116
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Scaling GitHub
holman
460
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing for Performance
lara
610
69k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
Rob Tarr RESPONSIVE JAVASCRIPT Not Your Momma’s JavaScript Sunday, April
28, 13
Fluid Grids Flexible Media Media Queries RESPONSIVE + Sunday, April
28, 13
Fluid Grids Flexible Media Media Queries JavaScript AWESOME + Sunday,
April 28, 13
RESPONSIVE JAVASCRIPT - NOT YOUR MOMMA’S JAVASCRIPT THE ROLE OF
JAVASCRIPT IN RESPONSIVE Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Progressive Enhancement “...uses web
technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page... while also providing an enhanced version of the page...” http://en.wikipedia.org/wiki/Progressive_enhancement Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Aggressive Enhancement “...treating content
itself as an enhancement.” http://globalmoxie.com/blog/making-of-people-mobile.shtml Sunday, April 28, 13
SECTION HEADER Aggressive Enhancement ‣ http://filamentgroup.com/lab/ajax_includes_modular_content/ ‣ http://github.com/filamentgroup/Ajax-Include-Pattern/ ‣ http://github.com/filamentgroup/quickconcat
‣ http://24ways.org/2011/conditional-loading-for-responsive-designs Sunday, April 28, 13
Loading content based on media queries THE ROLE OF JAVASCRIPT
IN RESPONSIVE Enhanced Content Sunday, April 28, 13
How do you arrange your content? THE ROLE OF JAVASCRIPT
IN RESPONSIVE Positioning Content ‣ http://github.com/filamentgroup/AppendAround Sunday, April 28, 13
A better way to load CSS? THE ROLE OF JAVASCRIPT
IN RESPONSIVE eCSSential ‣ http://github.com/scottjehl/eCSSential ‣ http://github.com/filamentgroup/quickconcat Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Polyfills A shim that
mimics a future API providing fallback functionality to older browsers. http://paulirish.com/i/7570.png Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Polyfills ‣ http://github.com/scottjehl/Respond ‣
http://github.com/paulirish/matchMedia.js ‣ http://github.com/scottjehl/picturefill Sunday, April 28, 13
RESPONSIVE JAVASCRIPT - NOT YOUR MOMMA’S JAVASCRIPT PERFORMANCE ENHANCING USER
INTERACTIONS POLYFILLS Sunday, April 28, 13
position: fixed Sunday, April 28, 13
position: fixed Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE position: fixed ‣ http://github.com/filamentgroup/fixed-fixed
‣ http://github.com/scottjehl/Device-Bugs/issues/1 ‣ It’s buggy - proceed with caution ‣ Keyboard issues when filling out forms Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Orientation Change Bug ‣
http://github.com/scottjehl/iOS-Orientationchange-Fix Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE respond.js ‣ http://scottjehl.github.com/respond Sunday,
April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE matchMedia ‣ http://github.com/paulirish/matchMedia.js ‣
http://github.com/sparkbox/mediaCheck ‣ http://github.com/ten1seven/jRespond Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Responsive Nav ‣ http://responsive-nav.com/
Sunday, April 28, 13
SECTION HEADER Typography Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Typography ‣ http://fittextjs.com ‣
http://www.frequency-decoder.com/demo/slabText ‣ http://letteringjs.com ‣ http://www.kernjs.com Sunday, April 28, 13
THE ROLE OF JAVASCRIPT IN RESPONSIVE Touch ‣ http://eightmedia.github.com/hammer.js ‣
http://github.com/jairajs89/Touchy.js ‣ http://google.com ‣ http://swipejs.com ‣ http://flexslider.woothemes.com ‣ http://marktyrrell.com/labs/blueberry Sunday, April 28, 13
Code Structure Sunday, April 28, 13
$(function() { NAV.init(); }); Sunday, April 28, 13
THANKS! @robtarr
[email protected]
Sunday, April 28, 13