Mozilla Developer Derby October 2012: Media Queries
CSS Media Queries
Web and Django DeveloperSeneca College ProfBoulevard Platform FounderTom Aratyntom@aratyn.name
Today • HTML/CSS Refresher • What are CSS Media Queries • What is Responsive Design • Understanding Media • Understanding Screens • Demos + Resources
Welcome!Let’s go round theroom What’s your heart’s desire?
• NotWhat we’re doing… – Comprehensive and… and what we’re not detailed course on CSS Media Queries and Responsive Designed • Are – Give you the basic tools to hack and continue learning – I’ll be around to help out and give advice! – There are also other awesome people in the room! They’ll help too!
―In recent years, I’ve beenThe Problem meeting with more companies that request ―an iPhone website‖ as part of their Ethan project…But what’s next? An iPad website? An N90 website? Can we reallyMarotte continue to commit to supporting each new user agent with its own bespoke on experience? At some point, this starts to feel like a zeroA List Apart sum game. But how can we— ‖ and our designs—adapt?
The(?) SolutionResponsiveDesign • Fluid Grids – Relative Sizes • Media Queries – Style based on resolution • http://www.alistapart.com/d/r esponsive-web-design/ex/ex- site-FINAL.html
It’s multiple designs The different sized assets, content elimination decisions mean that you’re basically doing multiple designs anyway
Can Be Data IntensiveDoes everyone download all the designs?
Defeat UserExpectations ―One of the biggest bugbears I have with responsive design relates to when I am used to a particular desktop design, only to find that the responsive design is completely different.‖
Tools• Twitter Bootstrap – Has a lot of features – Includes responsive design helpers – http://twitter.github.com/bootstrap/index .html• Zurb Foundation 3 – Specifically a Responsive CSS Framework – http://foundation.zurb.com/• Firefox Responsive Design View