FITC - 2012-04-23 - Responsive Web Design
Download as PPTX, PDF2 likes1,459 views
The document discusses responsive web design and its key elements. It notes that the web is now accessed through various devices like desktops, mobile phones, tablets, TVs and game consoles. Responsive web design adapts websites to different screen sizes and devices by using flexible grids, images and media queries. Some key aspects are using relative units like ems instead of pixels, flexible layouts, images that scale with the page and media queries to apply CSS styles for different devices. The document provides examples and resources for learning more about responsive design.
FITC - 2012-04-23 - Responsive Web Design
- 1. Frédéric Harper Developer Evangelist @ Microsoft Canada @fharper | outofcomfortzone.net
- 2. Sorry…
- 3. How we viewed the web… • The Desktop Browser
- 4. How we view the web today… • The Desktop Browser • Mobile Browsers • Tablet form-factors • Televisions • Game Consoles • More…
- 5. How we view the web today… • The Desktop Browser • Mobile Browsers • Tablet form-factors • Televisions • Game Consoles • More… • So what’s the problem?
- 9. Responsive Web Design • Thinking of the user’s needs instead of ours. • Adapt to various device capabilities instead of configurations. • Help future-proof our sites.
- 10. The way to go
- 11. Elements of Responsive Web Design
- 12. Elements of Responsive Web Design • A flexible, grid-based layout,
- 13. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media,
- 14. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, • Media queries.
- 15. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, • Media queries. • Something else.
- 17. Ok, so what’s the problem? • Non-responsive sites are no fun. • Fixed-width sites are not the best experiences. • Design tools tend to use pixels. • Sometimes a pixel does not equal a pixel. • So how do we turn pixels to their em counterparts?
- 18. Pixels to Ems Algorithm
- 20. Responsive Web Design READ MORE >> h1 { h1 { em font-size: 24px; 24 / 16 = 1.5 font-size: 1.5em; } } h1 a { h1 a { % 11 / 24 = font-size: 11px; font: 0.458333333+; 0.458333333+ } } 1 2 3
- 21. And the Grid?
- 23. A Simple Solution img { max-width: 100%; } Works on images, as well as other media like <video>.
- 24. Another Possibility Filament Group – depends on cookies and JavaScript
- 25. Media Queries
- 26. Not so long ago… • We could define media types: screen and print. • But not easily respond to the user’s display. • Lots of grunt work. • Didn’t spend much time thinking about mobile devices.
- 27. CSS3 Media Queries • The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities.
- 28. Simple Example @media screen and (max-width: 600px) { body { font-size: 80%; } }
- 29. Other Queries @media screen and (min-width:320px) and (max- width:480px) @media not print and (max-width:600px) @media screen (x) and (y), print (a) and (b)
- 30. Can be declared… In the Stylesheet Import Rule @import url(mq.css) only screen and (max- width:600px) link Element <link rel=“stylesheet” media=“only screen and (max-width:800px)” href=“mq.css”>
- 31. Supported Media Properties • min/max-width • device-aspect-ratio • min/max-height • color • device-width • color-index • device-height • monochrome • orientation • resolution • aspect-ratio
- 32. Supported Media Properties • min/max-width • device-aspect-ratio • min/max-height • color • device-width • color-index • device-height • monochrome • orientation • resolution • aspect-ratio
- 34. What About Devices? • viewport meta tag • <meta name=“viewport” content=“width=device- width”> • device-width vs. width • maximum-zoom
- 35. What about non-supportive browsers? • css3-mediaqueries-js by Wouter van der Graaf • Just include the script in your pages • Parses the CSS and applies style for positive media tests
- 44. Resources • http://www.alistapart.com/articles/responsive-web-design/ • http://www.lukew.com/ff/entry.asp?1514 • http://filamentgroup.com/examples/responsive-images/ • http://code.google.com/p/css3-mediaqueries-js/ • http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries • http://www.stunningcss3.com/index.php • http://www.abookapart.com/products/responsive-web-design • http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques- tools-and-design-strategies/ • http://mediaqueri.es/ • http://www.w3.org/TR/css3-mediaqueries/
- 45. Hey, what was that 4th thing?
- 46. Hey, what was that 4th thing? Design
- 47. Hey, what was that 4th thing? Design • Do we start with mobile-first?
- 48. Hey, what was that 4th thing? Design • Do we start with mobile-first? • Is it best that all sites are responsive?
- 49. Hey, what was that 4th thing? Design • Do we start with mobile-first? • Is it best that all sites are responsive? • Do we need or want to do visual comps for every device?
- 50. Hey, what was that 4th thing? Design • Do we start with mobile-first? • Is it best that all sites are responsive? • Do we need or want to do visual comps for every device? • Don’t dismiss mobile as walking and looking something up.
- 51. Hey, what was that 4th thing? Design • Do we start with mobile-first? • Is it best that all sites are responsive? • Do we need or want to do visual comps for every device? • Don’t dismiss mobile as walking and looking something up. • We are at the beginning, that’s what makes this interesting!
- 52. Hey, what was that 4th thing? Design • Do we start with mobile-first? • Is it best that all sites are responsive? • Do we need or want to do visual comps for every device? • Don’t dismiss mobile as walking and looking something up. • We are at the beginning, that’s what makes this interesting!
- 53. Free t-shirts to first 50 people Paul Laberge 2:15 tomorrow Like a boss: crushing it with the new Web standards
- 54. Questions? Frédéric Harper Developer Evangelist @ Microsoft [email protected] @fharper http://webnotwar.ca http://outofcomfortzone.net
Editor's Notes
- #41: http://www.lukew.com/ff/entry.asp?1514