SlideShare a Scribd company logo

Responsive Web Design - 01.26.12

•
•
Digiflare
Digiflare

This document discusses responsive web design and how it allows websites to adapt to different screen sizes and devices. It introduces some key concepts of responsive design including flexible grid-based layouts, flexible images and media, and media queries. It provides examples of how to use these techniques like converting pixel sizes to relative units and setting breakpoints with media queries. The goal of responsive design is to think about the user's needs on different devices and help future-proof websites.

Related slideshows

MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-russian
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-russianMALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-russian
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-russian
 
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-norwegian
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-norwegianMALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-norwegian
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-norwegian
 
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-icelandic
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-icelandicMALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-icelandic
MALCOLM X (Building Bridges – Getting The DEVIL OFF YOUR BACK)-icelandic
 
1 of 37
Responsive Web Design: The View of the World Depends on the Glasses I Wear Paul Laberge Technical Evangelist Microsoft Canada @plaberge paul.laberge@microsoft.com
How we viewed the web… • The Desktop Browser
How we view the web today… • The Desktop Browser • Mobile Browsers • Tablet form-factors • Televisions • Game Consoles • More… • Yeah, so what’s the problem?
demo The Anti-Pattern
Responsive Web Design - 01.26.12
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.
demo Responsive Web Designs
Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, and • Media queries. • Something else.
Flexible, Grid-based Layout
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 - 01.26.12
Responsive Web Design READ MORE >> h1 { h1 { em font-size: 24px; 24 / 16 = 1.5 font-size: 1.5em; } } h1 a { 11 / 24 = h1 a { % font-size: 24px; 0.458333333+ font: 0.458333333+; } } 1 2 3
Didn’t You Say Something About a Grid?
Flexible Images and Media
A Simple Solution Works on images, as well as other media like <video>.
Another Possibility Filament Group – depends on cookies and JavaScript
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 Queries • The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set 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 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”>
Supported Media Properties • min/max-width • color • min/max-height • color-index • device-width • monochrome • device-height • resolution • orientation • aspect-ratio • device-aspect-ratio
demo Little Pea Bakery
What About Devices? • viewport meta tag • <meta name=“viewport” content=“width=device-width”> • device-width vs. width • maximum-zoom
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
Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12
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!
Responsive Web Design - 01.26.12
Remember To Complete Your Evaluations! You could WIN a Samsung Focus Windows Phone 7! Let us know what you liked & disliked! Remember, 1=Bad, 5=Good  Please provide comments! No purchase necessary. The contest is open to residents of Canada (excluding government employees). The Toronto Tech·Days evaluation form contest begins on October 25th, 2011 and ends on October 26th, 2011. The Vancouver Tech·Days evaluation form contest begins on November 15th, 2011 and ends on November 16th, 2011. The Montreal Tech·Days evaluation form contest begins on November 29th, 2011 and ends on November 30th, 2011. Participants can enter the contest in one of two ways: (1) complete and submit an evaluation form by the contest close date; or (2) provide contact information by the contest close date. The draw for Toronto will take place on October 31st, 2011. The draw for Vancouver will take place on November 21st, 2011. The draw for Montreal will take place on December 5th, 2011. The chances of being selected depend upon the number of eligible entries. Selected participants will be contacted by phone and/or e-mail and will be required to answer correctly a time-limited skill-testing question. There are three (3) prizes available to be won. One (1) prize will be given away for each Tech·Days event in Toronto (October 25-26 2011), Vancouver (November 15-16 2011) and Montreal (November 29-30 2011). The prize consists of a Samsung Focus Windows Phone 7 (handset only; voice and/or data plan not included) (approximate retail value of $499 CAD). The prize will be delivered to the shipping address designated by the winner within 6-8 weeks. The winner may be required to sign a declaration and release form. For full contest rules, please see a Microsoft Tech·Days representative. You can email any additional comments directly to td_can@microsoft.com at any time.
Q&A
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related Content

Responsive Web Design - 01.26.12

  • 1. Responsive Web Design: The View of the World Depends on the Glasses I Wear Paul Laberge Technical Evangelist Microsoft Canada @plaberge paul.laberge@microsoft.com
  • 2. How we viewed the web… • The Desktop Browser
  • 3. How we view the web today… • The Desktop Browser • Mobile Browsers • Tablet form-factors • Televisions • Game Consoles • More… • Yeah, so what’s the problem?
  • 6. 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.
  • 8. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, and • Media queries. • Something else.
  • 10. 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?
  • 11. Pixels to Ems Algorithm
  • 13. Responsive Web Design READ MORE >> h1 { h1 { em font-size: 24px; 24 / 16 = 1.5 font-size: 1.5em; } } h1 a { 11 / 24 = h1 a { % font-size: 24px; 0.458333333+ font: 0.458333333+; } } 1 2 3
  • 14. Didn’t You Say Something About a Grid?
  • 16. A Simple Solution Works on images, as well as other media like <video>.
  • 17. Another Possibility Filament Group – depends on cookies and JavaScript
  • 19. 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.
  • 20. 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.
  • 21. Simple Example @media screen and (max-width: 600px) { body { font-size: 80%; } }
  • 22. 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)
  • 23. 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”>
  • 24. Supported Media Properties • min/max-width • color • min/max-height • color-index • device-width • monochrome • device-height • resolution • orientation • aspect-ratio • device-aspect-ratio
  • 26. What About Devices? • viewport meta tag • <meta name=“viewport” content=“width=device-width”> • device-width vs. width • maximum-zoom
  • 27. 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
  • 33. 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!
  • 35. Remember To Complete Your Evaluations! You could WIN a Samsung Focus Windows Phone 7! Let us know what you liked & disliked! Remember, 1=Bad, 5=Good  Please provide comments! No purchase necessary. The contest is open to residents of Canada (excluding government employees). The Toronto Tech·Days evaluation form contest begins on October 25th, 2011 and ends on October 26th, 2011. The Vancouver Tech·Days evaluation form contest begins on November 15th, 2011 and ends on November 16th, 2011. The Montreal Tech·Days evaluation form contest begins on November 29th, 2011 and ends on November 30th, 2011. Participants can enter the contest in one of two ways: (1) complete and submit an evaluation form by the contest close date; or (2) provide contact information by the contest close date. The draw for Toronto will take place on October 31st, 2011. The draw for Vancouver will take place on November 21st, 2011. The draw for Montreal will take place on December 5th, 2011. The chances of being selected depend upon the number of eligible entries. Selected participants will be contacted by phone and/or e-mail and will be required to answer correctly a time-limited skill-testing question. There are three (3) prizes available to be won. One (1) prize will be given away for each Tech·Days event in Toronto (October 25-26 2011), Vancouver (November 15-16 2011) and Montreal (November 29-30 2011). The prize consists of a Samsung Focus Windows Phone 7 (handset only; voice and/or data plan not included) (approximate retail value of $499 CAD). The prize will be delivered to the shipping address designated by the winner within 6-8 weeks. The winner may be required to sign a declaration and release form. For full contest rules, please see a Microsoft Tech·Days representative. You can email any additional comments directly to td_can@microsoft.com at any time.
  • 36. Q&A
  • 37. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.