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
110
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
microCMSではじめるAIライティング
himaratsu
0
150
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
940
shake-upを科学する
rsakata
7
1k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Code Reviewing Like a Champion
maltzj
524
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Building Applications with DynamoDB
mza
95
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
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