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
57
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
560
How to hamburger
k9ordon
0
59
Webpack FTW
k9ordon
1
640
Javascript Event Emitter
k9ordon
0
74
Other Decks in Technology
See All in Technology
業務ツールをAIエージェントとつなぐ - Composio
knishioka
0
110
トレードオフスライダーにおける品質について考えてみた
suzuki_tada
3
180
生成AIを活用した機能を、顧客に提供するまでに乗り越えた『4つの壁』
toshiblues
1
210
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
17
4k
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
120
ココナラのセキュリティ組織の体制・役割・今後目指す世界
coconala_engineer
0
220
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
18
6.8k
エラーバジェット枯渇の原因 - 偽陽性との戦い -
phaya72
1
100
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
1
420
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
[SRE kaigi 2025] ガバメントクラウドに向けた開発と変化するSRE組織のあり方 / Development for Government Cloud and the Evolving Role of SRE Teams
kazeburo
4
1.9k
20250125_Agent for Amazon Bedrock試してみた
riz3f7
2
110
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
310
For a Future-Friendly Web
brad_frost
176
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
A better future with KSS
kneath
238
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
KATA
mclloyd
29
14k
Become a Pro
speakerdeck
PRO
26
5.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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