SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
Upcoming SlideShare
Loading in...5
×
 

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design

on

  • 1,165 views

 

Statistics

Views

Total Views
1,165
Views on SlideShare
921
Embed Views
244

Actions

Likes
0
Downloads
16
Comments
1

4 Embeds 244

http://outofcomfortzone.net 236
http://feeds.feedburner.com 6
http://www.twylah.com 1
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://www.lukew.com/ff/entry.asp?1514

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design Presentation Transcript

  • Frédéric HarperTechnical Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
  • Sorry…
  • How we viewed the web…• The Desktop Browser View slide
  • How we view the web today…• The Desktop Browser• Mobile Browsers• Tablet form-factors• Televisions• Game Consoles• More… View slide
  • How we view the web today…• The Desktop Browser• Mobile Browsers• Tablet form-factors• Televisions• Game Consoles• More…• So what’s the problem?
  • The Anti-Pattern
  • Responsive WebDesigns
  • Responsive Web Design
  • Responsive Web Design• Thinking of the user’s needs instead of ours.
  • Responsive Web Design• Thinking of the user’s needs instead of ours.• Adapt to various device capabilities instead of configurations.
  • 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.
  • The way to go
  • Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,• Media queries.• Something else.
  • Flexible, Grid-basedLayout
  • 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?
  • Pixels to Ems Algorithm
  • 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
  • And the Grid?
  • Flexible Images andMedia
  • A Simple Solution img { max-width: 100%; }Works on images, as well as other media like <video>.
  • Another Possibility Filament Group – depends on cookies and JavaScript
  • Picture element, draft proposed<picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p></picture>
  • Media Queries
  • 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.
  • CSS3 Media QueriesThe CSS3 Media Queries Module specifies methodsto enable web developers to scope a style sheet to aset of precise device capabilities.
  • Simple Example@media screen and (max-width: 600px) { body { font-size: 80%; }}
  • 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)
  • 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”>
  • Supported Media Properties• min/max-width • device-aspect-ratio• min/max-height • color• device-width • color-index• device-height • monochrome• orientation • resolution• aspect-ratio
  • Supported Media Properties• min/max-width • device-aspect-ratio• min/max-height • color• device-width • color-index• device-height • monochrome• orientation • resolution• aspect-ratio
  • Little Pea Bakery
  • 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
  • Mostly Fluid
  • Column Drop
  • Layout Shifter
  • Tiny Tweaks
  • Off Canvas
  • Resources• http://www.alistapart.com/articles/responsive-web-design/• http://quirktools.com/screenfly/• 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/• http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html
  • 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!
  • Questions?Frédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net