Mozilla Developer Derby October 2012: Media Queries

559 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
559
On SlideShare
0
From Embeds
0
Number of Embeds
204
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Empty.
  • http://en.wikipedia.org/wiki/File:Airbus_A380_cockpit.jpg
  • See cascading-example.html
  • http://en.wikipedia.org/wiki/File:The_Time_Machine_Classics_Illustrated_133.jpg
  • http://en.wikipedia.org/w/index.php?title=File:Symbian_logo_4.svg&page=1http://en.wikipedia.org/wiki/File:PalmPilot5000.jpghttp://www.flickr.com/photos/juniorvelo/1455787847/sizes/z/in/photostream/http://en.wikipedia.org/wiki/File:Refreshable_Braille_display.jpghttp://en.wikipedia.org/wiki/File:Netscape_classic_logo.pnghttp://blogs.msdn.com/b/ie/archive/2010/09/16/internet-explorer-9-logo-visual-refresh.aspx
  • Blackberries!
  • Index.html
  • http://www.alistapart.com/articles/responsive-web-design/
  • Needs Cost Benefit Analysis
  • Need to be careful how you structure your document
  • Menu’s at the bottom
  • Let’s see some code:Index.html
  • http://en.wikipedia.org/w/index.php?title=File:Vector_Video_Standards4.svgCode samples1. Html-5asside
  • Html5-ad.html
  • Mozilla Developer Derby October 2012: Media Queries

    1. 1. CSS Media Queries
    2. 2. Web and Django DeveloperSeneca College ProfBoulevard Platform FounderTom Aratyntom@aratyn.name
    3. 3. Today • HTML/CSS Refresher • What are CSS Media Queries • What is Responsive Design • Understanding Media • Understanding Screens • Demos + Resources
    4. 4. Welcome!Let’s go round theroom What’s your heart’s desire?
    5. 5. • 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!
    6. 6. HTML/CSS Tutorial/Refresher
    7. 7. What is HTML? <title> <head> holds ―metadata‖ <head> <style> <html> <h1> <div> <p><body> holds data <body>(read content) <li> <ul> <li> <li>
    8. 8. Division of Responsibilities
    9. 9. HTML: Structure
    10. 10. CSS: Style
    11. 11. JavaScript: Interaction
    12. 12. Self Closing HTML Tags <br> <hr>
    13. 13. Regular HTML Tags <p></p> <div></div><html></html>
    14. 14. Define the style of elements (read: tags)What is CSS?
    15. 15. Styles ―cascade‖ (read: apply on to each other) Rules are applied based on: • priority (read: specificity) • orderWhy Cascading?
    16. 16. • Semantic Tags • <header> • Not <div class=―header‖> • <article> • Not <div class=―blogpost‖>• Also <video>, <audio>, a nd <canvas> • Not Flash
    17. 17. What are CSS Media Queries?Lets us ―style‖ our content―right‖ depending on the media it’s displayed on. Goodnight!
    18. 18. What kind of media are there?
    19. 19. 90’s
    20. 20. 2000-2006
    21. 21. 2007-Now
    22. 22. Interface (Click Vs. Touch)Screen SizeBandwidthSome Major Concerns ofMulti-Device Design
    23. 23. Lets us ―style‖ our content ―right‖no matter which media it is beingdisplayed on.What are CSS Media Queries?
    24. 24. http://mediaqueri.es/Responsive Web Design
    25. 25. Screenshot of http://mediaqueri.es
    26. 26. ―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?
    27. 27. 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
    28. 28. Criticism?
    29. 29. It’s multiple designs The different sized assets, content elimination decisions mean that you’re basically doing multiple designs anyway
    30. 30. Can Be Data IntensiveDoes everyone download all the designs?
    31. 31. 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.‖
    32. 32. Desktop Designs Are Good Enough Goldplating
    33. 33. Other Design Approaches• Mobile First• Progressive Enhancement • Modernizr
    34. 34. $0.02• Offering a way back to the desktop design may make sense.• User expectations are in flux – few clear idioms yet.
    35. 35. Media Types in the Braille Embossed Spechttp://www.w3.org/TR/CSS21/media.html Handheld Print Projection Screen Speech Tty TV
    36. 36. Media Types I’ve SeenUnfortunately I haven’t mediatypes that are related toaccessibility. Print Screen
    37. 37. Different types of Screens
    38. 38. What’s In A (Mobile) Pixel?<meta name="viewport"content="width=320"><meta name="viewport" content="width=device-width‖>
    39. 39. Pixel Density Media Query(webkit-min-device-pixel-ratio: 2)(min-resolution: 2ddpx)
    40. 40. Based On TwitterBootstrap Phone < 767 PXWhatresolution ison what Tablets 768px – 978 PXdevice? Desktops > 979 PX
    41. 41. Resources• What browser supports what? – http://caniuse.com• Responsive Layout Patterns – http://www.lukew.com/ff/entry.asp?1514• Initial Responsive Design Article – http://www.alistapart.com/articles/respon sive-web-design/
    42. 42. 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
    43. 43. Thank You! Questions?
    44. 44. BrainstormingProject Ideas?

    ×