Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobile Development
Web and Django DeveloperSeneca College ProfBoulevard Platform FounderJustly Done CreatorTom Aratyntom@aratyn.name
Today        • What is Responsive          Design        • What are CSS Media          Queries        • Understanding Medi...
Welcome!Let’s go round theroom                          What’s your                     favourite colour?
• NotWhat we’re doing…        – Comprehensive and… and what we’re not       detailed course on CSS                        ...
―In recent years, I’ve beenThe Problem    meeting with more companies               that request ―an iPhone               ...
The(?) SolutionResponsiveDesign     • Fluid Grids                    – Relative Sizes                  • Media Queries    ...
http://mediaqueri.es/Responsive Web Design
Screenshot of http://mediaqueri.es
Criticism?
It’s multiple designs              The different sized assets,            content elimination decisions             mean t...
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      ...
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 idio...
What are CSS Media                  Queries?Lets us ―style‖ our content―right‖ depending on the    media and size it’s    ...
Media Available
Interface (Click Vs. Touch)Screen SizeBandwidthSome Major Concerns ofMulti-Device Design
Media Types in the             Braille         Embossed        Spechttp://www.w3.org/TR/CSS21/media.html                  ...
Media Types I’ve SeenUnfortunately I haven’t mediatypes that are related toaccessibility.                   Print         ...
Different types of     Screens
Based On TwitterBootstrap           Phone       < 767 PXWhatresolution ison what                   Tablets    768px – 978 ...
What’s In A                (Mobile) Pixel?<meta name="viewport"content="width=320"><meta name="viewport"      content="wid...
Pixel Density                  Media Query(webkit-min-device-pixel-ratio: 2)(min-resolution: 2ddpx)
HTML Syntax<link rel="stylesheet"      type="text/css‖      media="screen"      href=‖awesome-screen.css">
CSS Syntax@media screen { /* css */ }@media (max-width: 1024px) {  /* css code */}
Let’s Play with Code
Resources• What browser supports what?  – http://caniuse.com• Responsive Layout Patterns  – http://www.lukew.com/ff/entry....
Tools• Twitter Bootstrap  – Has a lot of features  – Includes responsive design helpers  – http://twitter.github.com/boots...
Thank You! Questions?
BrainstormingProject Ideas?
Upcoming SlideShare
Loading in …5
×

Responsive Design Talk @ Toronto Dev Derby March

444 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Design Talk @ Toronto Dev Derby March

  1. 1. Mobile Development
  2. 2. Web and Django DeveloperSeneca College ProfBoulevard Platform FounderJustly Done CreatorTom Aratyntom@aratyn.name
  3. 3. Today • What is Responsive Design • What are CSS Media Queries • Understanding Media • Understanding Screens • Demos + Resources
  4. 4. Welcome!Let’s go round theroom What’s your favourite colour?
  5. 5. • NotWhat we’re doing… – Comprehensive and… and what we’re not detailed course on CSS Media Queries and Responsive Designe • 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. ―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?
  7. 7. 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
  8. 8. http://mediaqueri.es/Responsive Web Design
  9. 9. Screenshot of http://mediaqueri.es
  10. 10. Criticism?
  11. 11. It’s multiple designs The different sized assets, content elimination decisions mean that you’re basically doing multiple designs anyway
  12. 12. Can Be Data IntensiveDoes everyone download all the designs?
  13. 13. 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.‖
  14. 14. Desktop Designs Are Good Enough Goldplating
  15. 15. Other Design Approaches• Mobile First• Progressive Enhancement • Modernizr
  16. 16. $0.02• Offering a way back to the desktop design may make sense.• User expectations are in flux – few clear idioms yet.• Design is about managing tradeoffs
  17. 17. What are CSS Media Queries?Lets us ―style‖ our content―right‖ depending on the media and size it’s displayed on. Goodnight!
  18. 18. Media Available
  19. 19. Interface (Click Vs. Touch)Screen SizeBandwidthSome Major Concerns ofMulti-Device Design
  20. 20. Media Types in the Braille Embossed Spechttp://www.w3.org/TR/CSS21/media.html Handheld Print Projection Screen Speech Tty TV
  21. 21. Media Types I’ve SeenUnfortunately I haven’t mediatypes that are related toaccessibility. Print Screen
  22. 22. Different types of Screens
  23. 23. Based On TwitterBootstrap Phone < 767 PXWhatresolution ison what Tablets 768px – 978 PXdevice? Desktops > 979 PX
  24. 24. What’s In A (Mobile) Pixel?<meta name="viewport"content="width=320"><meta name="viewport" content="width=device-width‖>
  25. 25. Pixel Density Media Query(webkit-min-device-pixel-ratio: 2)(min-resolution: 2ddpx)
  26. 26. HTML Syntax<link rel="stylesheet" type="text/css‖ media="screen" href=‖awesome-screen.css">
  27. 27. CSS Syntax@media screen { /* css */ }@media (max-width: 1024px) { /* css code */}
  28. 28. Let’s Play with Code
  29. 29. 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/
  30. 30. 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
  31. 31. Thank You! Questions?
  32. 32. BrainstormingProject Ideas?

×