Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (16)
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Mozilla Developer Derby October 2012: Media Queries
Ähnlich wie Mozilla Developer Derby October 2012: Media Queries (20)
Mozilla Developer Derby October 2012: Media Queries
- 2. Web and Django Developer Seneca College Prof Boulevard Platform Founder Tom Aratyn tom@aratyn.name
- 3. Today • HTML/CSS Refresher • What are CSS Media Queries • What is Responsive Design • Understanding Media • Understanding Screens • Demos + Resources
- 4. Welcome! Let’s go round the room What’s your heart’s desire?
- 5. • Not What 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!
- 7. What is HTML? <title> <head> holds ―metadata‖ <head> <style> <html> <h1> <div> <p> <body> holds data <body> (read content) <li> <ul> <li> <li>
- 10. CSS: Style
- 12. Self Closing HTML Tags <br> <hr>
- 13. Regular HTML Tags <p></p> <div></div> <html></html>
- 14. Define the style of elements (read: tags) What is CSS?
- 15. Styles ―cascade‖ (read: apply on to each other) Rules are applied based on: • priority (read: specificity) • order Why Cascading?
- 16. • Semantic Tags • <header> • Not <div class=―header‖> • <article> • Not <div class=―blogpost‖> • Also <video>, <audio>, a nd <canvas> • Not Flash
- 17. What are CSS Media Queries? Lets us ―style‖ our content ―right‖ depending on the media it’s displayed on. Goodnight!
- 18. What kind of media are there?
- 19. 90’s
- 20. 2000-2006
- 21. 2007-Now
- 22. Interface (Click Vs. Touch) Screen Size Bandwidth Some Major Concerns of Multi-Device Design
- 23. Lets us ―style‖ our content ―right‖ no matter which media it is being displayed on. What are CSS Media Queries?
- 26. ―In recent years, I’ve been The 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 really Marotte continue to commit to supporting each new user agent with its own bespoke on experience? At some point, this starts to feel like a zero A List Apart sum game. But how can we— ‖ and our designs—adapt?
- 27. The(?) Solution Responsive Design • 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. Criticism?
- 29. It’s multiple designs The different sized assets, content elimination decisions mean that you’re basically doing multiple designs anyway
- 30. Can Be Data Intensive Does everyone download all the designs?
- 31. Defeat User Expectations ―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. Desktop Designs Are Good Enough Goldplating
- 33. Other Design Approaches • Mobile First • Progressive Enhancement • Modernizr
- 34. $0.02 • Offering a way back to the desktop design may make sense. • User expectations are in flux – few clear idioms yet.
- 35. Media Types in the Braille Embossed Spec http://www.w3.org/TR/CSS21/m edia.html Handheld Print Projection Screen Speech Tty TV
- 36. Media Types I’ve Seen Unfortunately I haven’t media types that are related to accessibility. Print Screen
- 37. Different types of Screens
- 38. What’s In A (Mobile) Pixel? <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width‖>
- 39. Pixel Density Media Query (webkit-min-device-pixel- ratio: 2) (min-resolution: 2ddpx)
- 40. Based On Twitter Bootstrap Phone < 767 PX What resolution is on what Tablets 768px – 978 PX device? Desktops > 979 PX
- 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. 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
Hinweis der Redaktion
- 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