CSS In Your Pocket - Mobile CSS Tips From The Trenches

Explore mobile CSS tips and debugging techniques in this conference talk from CSSConfUS2014. Learn to target multiple devices and deployment channels for modern web applications. Discover effective CSS debugging workflows for responsive, hosted applications and packaged apps distributed through marketplaces. Dive into cross-device debugging methods, including browser tools, remote on-device debugging, and command-line options. Gain insights on prototyping, designing within constraints, and using tools like Firefox's Responsive Design View. Address common pitfalls, such as Android 2.3 compatibility and position:fixed issues. Understand the importance of early performance testing and optimizing preprocessor output. Explore debugging techniques for Firefox OS devices and learn about Project FeverDream.

Intro
Two Types of CSS Debugging
A Manageable Workflow: Get Layout Right Early
Who is your target demographic? Decide on target devices & browsers
Prototype in your browser Don't even open Photoshop yet
Design within the context of your constraints
TOOL: Responsive Design View & Media Queries Helper in Firefox
3. START TESTING ON DEVICES
Android 2.3 is the new IE6 A Checklist of Common Pitfalls
position: fixed; doesn't behave well
Firefox and Chrome on Android
Layout decent? Perf time! Use this point as your baseline
Performance Problems: A Crash Course
Check your preprocessor output!
Test on Firefox OS Devices First
Debug Firefox or Fx for Android?
PROJECT FEVERDREAM