Upgrade to Pro — share decks privately, control downloads, hide ads and more …

responsive view - viennajs 2013-08

responsive view - viennajs 2013-08

slides from my talk about http://rv.k94n.com on the viennajs meetup


Klemens Gordon

August 28, 2013

More Decks by Klemens Gordon

Other Decks in Technology


  1. responsiveview develop & explorer responsive webdesign

  2. frontend developer at karriere.at love vanilla js twitter.com/thisisgordon github.com/k9ordon hi.k94n.com

    klemens gordon
  3. current task optimizing the frontend of karriere.at for a lot

    of screen sizes
  4. the problem resizing, resizing, resizing.

  5. 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 …)
  6. 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
  7. 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
  8. what it looks like Browser Window 11” device 1 device

    2 device 3
  9. limitations - changing urls - cross domain issues (no iframe

    to host connection) - size issues (iframe size is device pixel size) - cpu …
  10. 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
  11. the ui device stage Controls: href, device-set, device-scale size device

    1 device 2 device 3 device 4
  12. 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/

  13. None
  14. 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
  15. None
  16. the crossdomain issue - keep devices in sync (scroll, location

    …) => postMessage() => Weeeeeee chrome extension version! - no problem on initial load good for sharing without extension
  17. 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 }]
  18. 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
  19. communicating across domains 3/5 top runs an instance of _stage,

    validates the handshake and sends back a success handshake stage.js#L66
  20. communicating across domains 4/5 waiter recives handshake & boots client

  21. communicating across domains 5/5 client has event listeners on iframe

    document + posts messages to top client.js#L55
  22. Way to go ... - user agents - more +

    custom device sets - rotateable devices - share/explore responsive sites - create sharable screenshots
  23. None