prairie dev con west - 2012-03-15 - responsive web design
TRANSCRIPT
![Page 1: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/1.jpg)
Responsive Web Design: The View of the World Depends
on the Glasses I Wear Frédéric Harper Developer Evangelist @ Microsoft Canada @fharper | outofcomfortzone.net
![Page 2: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/2.jpg)
How we viewed the web…
• The Desktop Browser
![Page 3: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/3.jpg)
How we view the web today…
• The Desktop Browser
• Mobile Browsers
• Tablet form-factors
• Televisions
• Game Consoles
• More…
• So what’s the problem?
![Page 4: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/4.jpg)
The Anti-Pattern
![Page 5: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/5.jpg)
![Page 6: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/6.jpg)
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.
![Page 7: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/7.jpg)
Responsive Web Designs
![Page 8: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/8.jpg)
Elements of Responsive Web Design
• A flexible, grid-based layout,
• Flexible images and media, and
• Media queries.
• Something else.
![Page 9: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/9.jpg)
Flexible, Grid-based Layout
![Page 10: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/10.jpg)
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?
![Page 11: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/11.jpg)
𝚫𝒚
𝚫𝒙≈ 𝐥𝐢𝐦𝒏→∞𝟏 +𝟏
𝒏
𝒏
×−𝒃 ± 𝒃𝟐 − 𝟒𝒂𝒄
𝟐𝒂± 𝒇 𝒙 = 𝒂𝟎 + 𝒂𝒏 𝐜𝐨𝐬
𝒏𝝅𝒙
𝑳+ 𝒃𝒏 𝐬𝐢𝐧
𝒏𝝅𝒙
𝑳
∞
𝒏=𝟏
Pixels to Ems Algorithm
![Page 12: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/12.jpg)
![Page 13: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/13.jpg)
h1 { font-size: 24px; }
24 / 16 = 1.5 h1 { font-size: 1.5em; }
h1 a { font-size: 11px; }
11 / 24 = 0.458333333+ h1 a { font: 0.458333333+; }
3 2
Responsive Web Design READ MORE >>
1
em
%
![Page 14: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/14.jpg)
And the Grid?
![Page 15: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/15.jpg)
Flexible Images and Media
![Page 16: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/16.jpg)
A Simple Solution
Works on images, as well as other media like <video>.
![Page 17: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/17.jpg)
Another Possibility
Filament Group – depends on cookies
and JavaScript
![Page 18: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/18.jpg)
Media Queries
![Page 19: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/19.jpg)
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.
![Page 20: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/20.jpg)
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.
![Page 21: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/21.jpg)
Simple Example
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
![Page 22: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/22.jpg)
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)
![Page 23: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/23.jpg)
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”>
![Page 24: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/24.jpg)
Supported Media Properties
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
![Page 25: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/25.jpg)
Little Pea Bakery
![Page 26: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/26.jpg)
What About Devices?
• viewport meta tag
• <meta name=“viewport” content=“width=device-width”>
• device-width vs. width
• maximum-zoom
![Page 27: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/27.jpg)
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
![Page 28: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/28.jpg)
![Page 29: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/29.jpg)
![Page 30: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/30.jpg)
![Page 32: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/32.jpg)
![Page 33: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/33.jpg)
![Page 34: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/34.jpg)
Hey, what was that 4th thing?
![Page 35: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/35.jpg)
Hey, what was that 4th thing?
Design
![Page 36: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/36.jpg)
Hey, what was that 4th thing?
Design
• Do we start with mobile-first?
![Page 37: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/37.jpg)
Hey, what was that 4th thing?
Design
• Do we start with mobile-first?
• Is it best that all sites are responsive?
![Page 38: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/38.jpg)
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?
![Page 39: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/39.jpg)
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.
![Page 40: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/40.jpg)
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!
![Page 41: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/41.jpg)
Resources • http://www.alistapart.com/articles/responsive-web-design/
• 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/
![Page 42: Prairie Dev Con West - 2012-03-15 - Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060108/554d1ef6b4c905ca208b4a0b/html5/thumbnails/42.jpg)
Questions?
Frédéric Harper
Developer Evangelist @ Microsoft
@fharper
http://webnotwar.ca
http://outofcomfortzone.net