Recommended
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (17)
Similar to Responsive Design Talk @ Toronto Dev Derby March
Similar to Responsive Design Talk @ Toronto Dev Derby March (20)
Recently uploaded
Recently uploaded (20)
Responsive Design Talk @ Toronto Dev Derby March
- 2. Web and Django Developer Seneca College Prof Boulevard Platform Founder Justly Done Creator Tom Aratyn tom@aratyn.name
- 3. Today • What is Responsive Design • What are CSS Media Queries • Understanding Media • Understanding Screens • Demos + Resources
- 4. Welcome! Let’s go round the room What’s your favourite colour?
- 5. • Not What 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. ―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?
- 7. 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
- 10. Criticism?
- 11. It’s multiple designs The different sized assets, content elimination decisions mean that you’re basically doing multiple designs anyway
- 12. Can Be Data Intensive Does everyone download all the designs?
- 13. 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.‖
- 14. Desktop Designs Are Good Enough Goldplating
- 15. Other Design Approaches • Mobile First • Progressive Enhancement • Modernizr
- 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. What are CSS Media Queries? Lets us ―style‖ our content ―right‖ depending on the media and size it’s displayed on. Goodnight!
- 18. Media Available
- 19. Interface (Click Vs. Touch) Screen Size Bandwidth Some Major Concerns of Multi-Device Design
- 20. Media Types in the Braille Embossed Spec http://www.w3.org/TR/CSS21/m edia.html Handheld Print Projection Screen Speech Tty TV
- 21. Media Types I’ve Seen Unfortunately I haven’t media types that are related to accessibility. Print Screen
- 22. Different types of Screens
- 23. Based On Twitter Bootstrap Phone < 767 PX What resolution is on what Tablets 768px – 978 PX device? Desktops > 979 PX
- 24. What’s In A (Mobile) Pixel? <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width‖>
- 25. Pixel Density Media Query (webkit-min-device-pixel- ratio: 2) (min-resolution: 2ddpx)
- 26. HTML Syntax <link rel="stylesheet" type="text/css‖ media="screen" href=‖awesome-screen.css">
- 27. CSS Syntax @media screen { /* css */ } @media (max-width: 1024px) { /* css code */ }
- 28. Let’s Play with Code
- 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. 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
Editor's Notes
- 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
- Blackberries!
- 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
- A physical pixel may not map
- Devices with -webkit-min-device-pixel-ratio: 1.0All non-Retina MacsAll non-Retina iOS devicesAcer Iconia A500Samsung Galaxy Tab 10.1Samsung Galaxy SDevices with -webkit-min-device-pixel-ratio: 1.3Google Nexus 7Devices with -webkit-min-device-pixel-ratio: 1.5Google Nexus SSamsung Galaxy S IIHTC DesireHTC Desire HDHTC Incredible SHTC VelocityHTC SensationDevices with -webkit-min-device-pixel-ratio: 2.0iPhone 4iPhone 4SiPhone 5iPad (3rd generation)iPad 4All Macs with Retina displaysGoogle Galaxy NexusGoogle Nexus 4Google Nexus 10Samsung Galaxy S IIISamsung Galaxy Note IISony Xperia SHTC One X