CSS In Your Pocket - Mobile CSS Tips From The Trenches
summary
Claims that layout belongs in the browser not Photoshop and that you must test early on devices to avoid cruft; shows Firefox Responsive Design View and Chrome device emulator, uses Charles and network link conditioner for throttling and an FPS meter for interaction testing, and reports Android usage estimates of 15–25% so “Android 2.3 is the new IE6” with concrete bugs (position:fixed, min/max-height, gradients missing). Demos remote debugging with Firefox DevTools and project fever dream connecting to Chrome on Android and Safari on iPad; the prototype mostly works.
AI-written summary · about
chapters (17)
- 0:00Intro
- 1:18Two Types of CSS Debugging
- 1:35A Manageable Workflow: Get Layout Right Early
- 2:50Who is your target demographic? Decide on target devices & browsers
- 5:48Prototype in your browser Don't even open Photoshop yet
- 6:56Design within the context of your constraints
- 8:21TOOL: Responsive Design View & Media Queries Helper in Firefox
- 13:333. START TESTING ON DEVICES
- 14:38Android 2.3 is the new IE6 A Checklist of Common Pitfalls
- 15:34position: fixed; doesn't behave well
- 21:56Firefox and Chrome on Android
- 22:53Layout decent? Perf time! Use this point as your baseline
- 23:47Performance Problems: A Crash Course
- 24:32Check your preprocessor output!
- 30:26Test on Firefox OS Devices First
- 30:58Debug Firefox or Fx for Android?
- 31:33PROJECT FEVERDREAM
