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
Viewport Trickery (v1.1)
Search
Jessica Stokes
September 09, 2015
Programming
0
270
Viewport Trickery (v1.1)
Putting responsive UIs atop desktop-only sites.
Presented at MelbJS on 09/09/2015
Jessica Stokes
September 09, 2015
Tweet
Share
More Decks by Jessica Stokes
See All by Jessica Stokes
Viewport Trickery (v1.0)
ticky
0
51
Other Decks in Programming
See All in Programming
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
390
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
180
Vue :: Better Testing 2024
up1
1
390
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.2k
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
390
(Deep|Web) Link support with expo-router
mrtry
0
170
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
220
フロントエンドの現在地とこれから
koba04
10
4.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
7
270
Frontend Magic mit CSS Houdini
joergneumann
0
430
コードレビューと私の過去と未来
jxmtst
0
240
ファーストペンギンBot @Qiita Hackathon 2024 予選
dyson_web
0
220
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
Practical Orchestrator
shlominoach
186
10k
Navigating Team Friction
lara
183
14k
A designer walks into a library…
pauljervisheath
202
24k
Writing Fast Ruby
sferik
626
60k
How STYLIGHT went responsive
nonsquared
95
5.1k
Code Reviewing Like a Champion
maltzj
519
39k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Designing for humans not robots
tammielis
249
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Six Lessons from altMBA
skipperchong
26
3.4k
Transcript
Viewport Trickery or, putting responsive UIs atop desktop-only sites v1.1
Jessica Stokes Cybersorceress jessicastokes.net | @ticky
None
Photo by Patrick Lauke (CC-BY-NC-ND; Cropped) https://flic.kr/p/bTt6P8
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
Mobile browsers are liars! • …for kinda reasonable reasons •
position: fixed; // more-or-less useless on mobile
BugHerd Classic • Sidebar-based • Never handled mobile devices
None
New Bugherd • Simple layer over Stack, our task management
product • Just buttons and an issue report UI • Mobile-compatible, day 1
None
Solution? • Detect real zoom level and viewport position •
Scale and position the whole UI to suit
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
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
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!