FITC - 2012-04-23 - Responsive Web Design
-
Upload
frederic-harper -
Category
Technology
-
view
1.694 -
download
0
Transcript of FITC - 2012-04-23 - Responsive Web Design
![Page 1: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/1.jpg)
Responsive Web Design,get best of your design
Frédéric HarperDeveloper Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
![Page 2: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/2.jpg)
Sorry…
![Page 3: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/3.jpg)
How we viewed the web…• The Desktop Browser
![Page 4: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/4.jpg)
How we view the web today…• The Desktop Browser• Mobile Browsers• Tablet form-factors• Televisions• Game Consoles• More…
![Page 5: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/5.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 6: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/6.jpg)
The Anti-Pattern
![Page 7: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/7.jpg)
Responsive Web Designs
![Page 8: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/8.jpg)
![Page 9: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/9.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 10: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/10.jpg)
The way to go
![Page 11: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/11.jpg)
Elements of Responsive Web Design
![Page 12: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/12.jpg)
Elements of Responsive Web Design• A flexible, grid-based layout,
![Page 13: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/13.jpg)
Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,
![Page 14: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/14.jpg)
Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,• Media queries.
![Page 15: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/15.jpg)
Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,• Media queries.• Something else.
![Page 16: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/16.jpg)
Flexible, Grid-based Layout
![Page 17: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/17.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 18: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/18.jpg)
𝚫 𝒚𝚫 𝒙
≈ 𝐥𝐢𝐦𝒏→∞ (𝟏+𝟏
𝒏 )𝒏
×−𝒃±√𝒃𝟐−𝟒𝒂𝒄
𝟐𝒂± 𝒇 (𝒙 )=𝒂𝟎+∑
𝒏=𝟏
∞
(𝒂𝒏𝐜𝐨𝐬𝒏𝝅 𝒙𝑳
+𝒃𝒏𝐬𝐢𝐧𝒏𝝅 𝒙𝑳 )
Pixels to Ems Algorithm
![Page 19: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/19.jpg)
target context result÷ ¿
![Page 20: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/20.jpg)
target context result÷ ¿
h1 { font-size: 24px;}
24 / 16 = 1.5h1 { font-size: 1.5em;}
h1 a { font-size: 11px;}
11 / 24 = 0.458333333+
h1 a { font: 0.458333333+;}
32
Responsive Web Design READ MORE >>
1
em
%
![Page 21: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/21.jpg)
And the Grid?#page { margin: 36px auto; width: 960px;}.blog { margin: 0 auto 53px; width: 900px;}.blog .main { float: left; width: 566px;}.blog .other { float:right; width: 331px;}
#page { margin: 36px auto; width: 90%;}.blog { margin: 0 auto 53px; width: 93.75%; /* 900/600 */}.blog .main { float: left; width: 62.88+%;}.blog .other { float:right; width: 36.77+%;}
.blog { width: 900/960;}.blog .main { width: 566/900;}.blog .other { width: 331/900;}
target context result÷ ¿
![Page 22: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/22.jpg)
Flexible Images and Media
![Page 23: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/23.jpg)
A Simple Solution
Works on images, as well as other media like <video>.
img { max-width: 100%;}
![Page 24: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/24.jpg)
Another PossibilityFilament Group –
depends on cookies and JavaScript
![Page 25: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/25.jpg)
Media Queries
![Page 26: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/26.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 27: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/27.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 28: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/28.jpg)
Simple Example
@media screen and (max-width: 600px) { body { font-size: 80%; }}
![Page 29: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/29.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 30: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/30.jpg)
Can be declared…In the StylesheetImport 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 31: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/31.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 32: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/32.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 33: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/33.jpg)
Little Pea Bakery
![Page 34: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/34.jpg)
What About Devices?
• viewport meta tag•<meta name=“viewport” content=“width=device-width”>
• device-width vs. width• maximum-zoom
![Page 35: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/35.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 36: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/36.jpg)
Resources
![Page 37: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/37.jpg)
![Page 38: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/38.jpg)
![Page 39: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/39.jpg)
![Page 40: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/40.jpg)
![Page 42: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/42.jpg)
![Page 43: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/43.jpg)
![Page 44: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/44.jpg)
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/
![Page 45: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/45.jpg)
Hey, what was that 4th thing?
![Page 46: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/46.jpg)
Hey, what was that 4th thing?Design
![Page 47: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/47.jpg)
Hey, what was that 4th thing?Design• Do we start with mobile-first?
![Page 48: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/48.jpg)
Hey, what was that 4th thing?Design• Do we start with mobile-first?• Is it best that all sites are responsive?
![Page 49: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/49.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 50: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/50.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 51: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/51.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 52: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/52.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 53: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/53.jpg)
Free t-shirts to first 50 people
Paul Laberge2:15 tomorrow
Like a boss: crushing it with the new Web standards
![Page 54: FITC - 2012-04-23 - Responsive Web Design](https://reader036.fdocuments.net/reader036/viewer/2022070314/554d1f39b4c905c5208b497a/html5/thumbnails/54.jpg)
Questions?Frédéric Harper
Developer Evangelist @ [email protected]@fharper
http://webnotwar.cahttp://outofcomfortzone.net