Mozilla Developer Derby October 2012: Media Queries Presentation Transcript
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!
What is HTML? <title> <head> holds ―metadata‖ <head> <style> <html> <h1> <div> <p><body> holds data <body>(read content) <li> <ul> <li> <li>
Division of Responsibilities
Self Closing HTML Tags <br> <hr>
Regular HTML Tags <p></p> <div></div><html></html>
Define the style of elements (read: tags)What is CSS?
Styles ―cascade‖ (read: apply on to each other) Rules are applied based on: • priority (read: specificity) • orderWhy Cascading?
• Semantic Tags • <header> • Not <div class=―header‖> • <article> • Not <div class=―blogpost‖>• Also <video>, <audio>, a nd <canvas> • Not Flash
What are CSS Media Queries?Lets us ―style‖ our content―right‖ depending on the media it’s displayed on. Goodnight!
What kind of media are there?
Interface (Click Vs. Touch)Screen SizeBandwidthSome Major Concerns ofMulti-Device Design
Lets us ―style‖ our content ―right‖no matter which media it is beingdisplayed on.What are CSS Media Queries?
http://mediaqueri.es/Responsive Web Design
Screenshot of http://mediaqueri.es
―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.‖
Desktop Designs Are Good Enough Goldplating
Other Design Approaches• Mobile First• Progressive Enhancement • Modernizr
$0.02• Offering a way back to the desktop design may make sense.• User expectations are in flux – few clear idioms yet.
Media Types in the Braille Embossed Spechttp://www.w3.org/TR/CSS21/media.html Handheld Print Projection Screen Speech Tty TV
Media Types I’ve SeenUnfortunately I haven’t mediatypes that are related toaccessibility. Print Screen
Different types of Screens
What’s In A (Mobile) Pixel?<meta name="viewport"content="width=320"><meta name="viewport" content="width=device-width‖>
Pixel Density Media Query(webkit-min-device-pixel-ratio: 2)(min-resolution: 2ddpx)
Based On TwitterBootstrap Phone < 767 PXWhatresolution ison what Tablets 768px – 978 PXdevice? Desktops > 979 PX
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