$30 off During Our Annual Pro Sale. View Details »

Viewport Trickery (v1.1)

Viewport Trickery (v1.1)

Putting responsive UIs atop desktop-only sites.

Presented at MelbJS on 09/09/2015

Jessica Stokes

September 09, 2015
Tweet

More Decks by Jessica Stokes

Other Decks in Programming

Transcript

  1. Viewport Trickery or, putting responsive UIs atop desktop-only sites v1.1

  2. Jessica Stokes Cybersorceress jessicastokes.net | @ticky

  3. None
  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

  8. None
  9. New Bugherd • Simple layer over Stack, our task management

    product • Just buttons and an issue report UI • Mobile-compatible, day 1
  10. None
  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!