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 view - viennajs 2013-08
Search
Klemens Gordon
August 28, 2013
Technology
0
60
responsive view - viennajs 2013-08
slides from my talk about
http://rv.k94n.com
on the viennajs meetup
Klemens Gordon
August 28, 2013
Tweet
Share
More Decks by Klemens Gordon
See All by Klemens Gordon
Yo Building Progressive Framework-less Vanilla Web-applications
k9ordon
0
150
A loosely coupled front-end
k9ordon
2
590
How to hamburger
k9ordon
0
62
Webpack FTW
k9ordon
1
660
Javascript Event Emitter
k9ordon
0
77
Other Decks in Technology
See All in Technology
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
140
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
290
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
190
Kiro Hookを Terraformで検証
ao_inoue
0
140
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.8k
SAE J1939シミュレーション環境構築
daikiokazaki
1
190
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
800
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
180
claude codeでPrompt Engineering
iori0311
0
530
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
650
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
110
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
Facilitating Awesome Meetings
lara
54
6.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A Tale of Four Properties
chriscoyier
160
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Rails Girls Zürich Keynote
gr2m
95
14k
Being A Developer After 40
akosma
90
590k
Writing Fast Ruby
sferik
628
62k
Done Done
chrislema
184
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
responsiveview develop & explorer responsive webdesign
frontend developer at karriere.at love vanilla js twitter.com/thisisgordon github.com/k9ordon hi.k94n.com
klemens gordon
current task optimizing the frontend of karriere.at for a lot
of screen sizes
the problem resizing, resizing, resizing.
whats already on the table bookletmarks, extensions, websites, … -http://responsinator.com/?url=k94n.com
-http://lab.maltewassermann.com/viewport- resizer AND a lot of devices (booting, unlocking, browser, typing, wlan …)
the initial plan show a website in different device sizes
like real devices lying on a desk keep it webkit - because I love the dev tools
let's-a go! a very basic solution. [[320,480],[320,500]].forEach(function(s){ var i =
document.createElement('iframe'); i.height = s[1]; i.width = s[0]; i.src = 'http://k94n.com'; document.body.appendChild(i); }); http://jsfiddle.net/k9ordon/UR2WK
what it looks like Browser Window 11” device 1 device
2 device 3
limitations - changing urls - cross domain issues (no iframe
to host connection) - size issues (iframe size is device pixel size) - cpu …
use cases - open tool with a target page loads
in every size - synced actions - change page from a device - scroll a device - focus a device - keydown
the ui device stage Controls: href, device-set, device-scale size device
1 device 2 device 3 device 4
Demos http://rv.k94n.com/#http://www.google.com/nexus/7/ http://rv.k94n.com/#http://mashable.com/ http://rv.k94n.com/#http://getbootstrap.com/examples/jumbotron/ http://rv.k94n.com/#http://thenextweb.com/ http://rv.k94n.com/#http://skinnyties.com/ http://rv.k94n.com/#http://aneventapart.com/
None
device sizing one does not simply put a 15” viewport
into a 11” screen easy, webkitTransform: scale(*) (scale does not resize the box model) device.js#L100
None
the crossdomain issue - keep devices in sync (scroll, location
…) => postMessage() => Weeeeeee chrome extension version! - no problem on initial load good for sharing without extension
communicating across domains 1/5 chrome extensions contentscript injects a waiter
"content_scripts": [{ "matches": ["http://*/*"], "js": ["config.js", "client.js"], "run_at": "document_idle", "all_frames": true }]
communicating across domains 2/5 waiter sends handshake to top window
& listens to messages top.postMessage({method: 'handshake', h: window.innerHeight, w: window.innerWidth, l: window.location.href, o:window.location. origin, r:document.referrer}, rv_host); client.js#L4
communicating across domains 3/5 top runs an instance of _stage,
validates the handshake and sends back a success handshake stage.js#L66
communicating across domains 4/5 waiter recives handshake & boots client
script
communicating across domains 5/5 client has event listeners on iframe
document + posts messages to top client.js#L55
Way to go ... - user agents - more +
custom device sets - rotateable devices - share/explore responsive sites - create sharable screenshots
None