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
Responsive Design Talk @ Toronto Dev Derby March
Web and Django DeveloperSeneca College ProfBoulevard Platform FounderJustly Done CreatorTom Aratyntom@aratyn.name
Today • What is Responsive Design • What are CSS Media Queries • Understanding Media • Understanding Screens • Demos + Resources
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 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!
―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.‖
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