Viewport Trickery (v1.0)

Putting responsive UIs atop desktop-only sites.

Presented at MelbMobile on 05/08/2015

Transcript

1. Viewport Trickery or, putting responsive UIs atop desktop-only sites
2. Jessica Stokes Cybersorceress jessicastokes.net | @ticky
4. Photo by Patrick Lauke (CC-BY-NC-ND; Cropped) https://flic.kr/p/bTt6P8
5. Bugherd • Needs to work on desktop and mobile sites • Responsive or not • On any device • Mobile browsers are liars • …for kinda reasonable reasons • position: fixed; // more-or-less useless on mobile
6. BugHerd Classic • Sidebar-based • Never handled mobile devices
8. New Bugherd • Simple layer over Stack, our task management product • Just buttons and an issue report UI • Mobile-compatible, day 1
10. Solution? • Detect real zoom level and viewport position • Scale and position the whole UI to suit
11. 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
12. 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
13. 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!