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
940
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
88
Blur the Lines: Write Web Apps That Feel Native
robtarr
1
95
Blur The Lines - Native Feeling Web Apps
robtarr
0
78
Blur the Lines: How to write web apps that look native.
robtarr
0
78
Development Tools and Responsive JavaScript
robtarr
1
150
JavaScript App Development
robtarr
3
390
Other Decks in Technology
See All in Technology
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
Janus
bkuhlmann
1
490
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
130
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
230
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
440
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
390
反実仮想機械学習とは何か
usaito
PRO
9
3.2k
On Your Data を超えていく!
hirotomotaguchi
2
650
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.4k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
A Tale of Four Properties
chriscoyier
151
22k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Design by the Numbers
sachag
274
18k
The Mythical Team-Month
searls
216
42k
Automating Front-end Workflow
addyosmani
1356
200k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
120
39k
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