Viewport Trickery (v1.1)

Putting responsive UIs atop desktop-only sites.

Presented at MelbJS on 09/09/2015

Transcript

1. Viewport Trickery or, putting responsive UIs atop desktop-only sites v1.1
2. Jessica Stokes Cybersorceress jessicastokes.net | @ticky
4. Photo by Patrick Lauke (CC-BY-NC-ND; Cropped) https://flic.kr/p/bTt6P8
5. Bugherd • Point-and-click bug tracker • Lives inside other peoples’ websites • Needs to work on desktop and mobile sites • Responsive or not • On any device
6. Mobile browsers are liars! • …for kinda reasonable reasons • position: fixed; // more-or-less useless on mobile
7. BugHerd Classic • Sidebar-based • Never handled mobile devices
9. New Bugherd • Simple layer over Stack, our task management product • Just buttons and an issue report UI • Mobile-compatible, day 1
11. Solution? • Detect real zoom level and viewport position • Scale and position the whole UI to suit
12. Viewporter • Tools for working with all sorts of browser viewports • getScaleFactor getMobileScaleFactor for zoom detection • getViewportCoordinates for viewport location • Demo at https://macropodhq.github.io/viewporter https://github.com/macropodhq/viewporter | https://git.io/vOlJ9
13. PostCSS px to em • Makes your UI scalable • Pixel measurements become ems • Base font size, 16px by default • Designers developers work in pixels for precision https://github.com/macropodhq/postcss-px-to-em | https://git.io/vOlUr
14. Jessica Stokes Cybersorceress jessicastokes.net | @ticky • Viewporter is available at https://git.io/vOlJ9 • PostCSS px to em is available at https://git.io/vOlUr • Go make something cool with them!