DOMkata: The Dark Art of Mobile Web
summary
Built a Wall Street Journal mobile site over 18 months that intentionally uses no media queries and one unified stylesheet to render the same on iOS and Android. Provides concrete workarounds: set target-densitydpi:160 for most Androids, detach iframes to enable overflow-scrolling: touch, and detect edge cases to serve 140 DPI when needed. Lists persistent WebKit bugs, keyboard-triggered landscape quirks, and which hacks reliably work versus which remain unreliable.
AI-written summary · about
chapters (12)
- 0:00The challenges of mobile
- 1:20Understanding pixels and units
- 3:07Defining the viewport
- 4:41Layout and scaling pitfalls
- 6:19Device width complexities
- 7:25Designing for all sizes
- 9:38Browser specific behaviors
- 11:39Android browser idiosyncrasies
- 13:34Optimizing meta tags
- 15:10Target density DPI tricks
- 17:28Advanced mobile web bugs
- 22:04Q&A and design strategies
related talks
28mBeyond Responsive: Building a mobile web you're f*ing proud of
43mThe Mobile Web: MIA
53mBreaking Limits on Mobile HTML5
47mThe Map & The Territory
56mClosing Panel: "HTML5 and Devices"
46mFront performance: the mobile web
35mWhat's Wrong with Mobile Web?
18mFixing the Mobile Web - tips and tricks that can save your sanity