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
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Geminiとv0による高速プロトタイピング
shinya337
1
270
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
OPENLOGI Company Profile for engineer
hr01
1
34k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Designing for humans not robots
tammielis
253
25k
Unsuck your backbone
ammeep
671
58k
Designing for Performance
lara
610
69k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
72
4.9k
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