Your SlideShare is downloading. ×
0
Responsive Web Design
Frédéric Harper
Senior Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
2013-09-18
How we view the web today…
• The Desktop Browser
• Mobile Browsers
• Tablet form-factors
• Televisions
• Game Consoles
• M...
The Anti-Pattern
Responsive Web
Designs
Responsive Web Design
• Thinking of the user’s needs instead of ours.
• Adapt to various device capabilities instead of
co...
The way to go
Elements of Responsive Web Design
• A flexible, grid-based layout,
• Flexible images and media,
• Media queries.
• Somethi...
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 t...
Pixels to Ems Algorithm
h1 {
font-size: 24px;
}
24 / 16 = 1.5
h1 {
font-size: 1.5em;
}
h1 a {
font-size: 11px;
}
11 / 24 =
0.458333333+
h1 a {
fon...
And the Grid?
Flexible Images and
Media
ASimple Solution
Works on images, as well as other media like <video>.
img {
max-width: 100%;
}
Another Possibility
Filament Group –
depends on cookies
and JavaScript
Responsive images
Picture element, draft proposed
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x,
big-hd.jpg 2x">
<source sr...
srcset, draft proposed
<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x,
small-hd.jpg 640w 2x, med.jpg 1x, med-hd....
Media Queries
Not so long ago…
• We could define media types: screen and print.
• But not easily respond to the user’s display.
• Lots o...
CSS3 Media Queries
The CSS3 Media Queries Module specifies methods
to enable web developers to scope a style sheet to a
se...
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 scr...
Can be declared…
In the Stylesheet
Import Rule
@import url(mq.css) only screen and (max-
width:600px)
link Element
<link r...
Supported Media Properties
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• ...
Supported Media Properties
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• 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
...
Mostly Fluid
Column Drop
Layout Shifter
Tiny Tweaks
Off Canvas
Resources
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.lukew.com/ff/entry.asp?1514
• http://fi...
Hey, what was that 4th thing?
Design
• Dowestartwithmobile-first?
• Isitbestthatallsitesareresponsive?
• Doweneedorwanttod...
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Upcoming SlideShare
Loading in...5
×

Responsive Web Design - Web & PHP Conference - 2013-09-18

4,538

Published on

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,538
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • This presentation is about 1h with questionsSTART ZOOM IT
  • As you know by now, the conference is using conferences.io as a questions platformYou can ask your question on the site, and I’ll check the questions if I have time at the endIf you have no problem, leave your Twitter handle in the questions, and I’ll answer them after my talkOr just come see me during the break
  • http://fitc.ca/
  • http://www.lukew.com/ff/entry.asp?1514
  • As you know by now, the conference is using conferences.io as a questions platformYou can ask your question on the site, and I’ll check the questions if I have time at the endIf you have no problem, leave your Twitter handle in the questions, and I’ll answer them after my talkOr just come see me during the break
  • As you remember, my name is Frédéric HarperI’m Technical Evangelist focussing on Firefox OS, so please contact me if you have any questionsFeel free to follow me on Twitter or add me to LinkedInIf you want to read some amazing technical posts on Firefox, Firefox OS, Developer Tool, and the Open Web, please check our hacks blogLast, but not least, you can check my personal blog: it’s all about gnomes, and unicorns
  • Transcript of "Responsive Web Design - Web & PHP Conference - 2013-09-18"

    1. 1. Responsive Web Design Frédéric Harper Senior Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net 2013-09-18
    2. 2. How we view the web today… • The Desktop Browser • Mobile Browsers • Tablet form-factors • Televisions • Game Consoles • More… • So what’s the problem?
    3. 3. The Anti-Pattern
    4. 4. Responsive Web Designs
    5. 5. 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.
    6. 6. The way to go
    7. 7. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, • Media queries. • Something else.
    8. 8. Flexible, Grid-based Layout
    9. 9. 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?
    10. 10. Pixels to Ems Algorithm
    11. 11. 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+; } 32 Responsive Web Design READ MORE >> 1 em %
    12. 12. And the Grid?
    13. 13. Flexible Images and Media
    14. 14. ASimple Solution Works on images, as well as other media like <video>. img { max-width: 100%; }
    15. 15. Another Possibility Filament Group – depends on cookies and JavaScript
    16. 16. Responsive images
    17. 17. Picture element, draft proposed <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
    18. 18. srcset, draft proposed <img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">
    19. 19. Media Queries
    20. 20. 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.
    21. 21. 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.
    22. 22. Simple Example @media screen and (max-width: 600px) { body { font-size: 80%; } }
    23. 23. 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)
    24. 24. 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”>
    25. 25. Supported Media Properties • min/max-width • min/max-height • device-width • device-height • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution
    26. 26. Supported Media Properties • min/max-width • min/max-height • device-width • device-height • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution
    27. 27. Little Pea Bakery
    28. 28. 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
    29. 29. Mostly Fluid
    30. 30. Column Drop
    31. 31. Layout Shifter
    32. 32. Tiny Tweaks
    33. 33. Off Canvas
    34. 34. 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/ • http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html
    35. 35. Hey, what was that 4th thing? Design • Dowestartwithmobile-first? • Isitbestthatallsitesareresponsive? • Doweneedorwanttodovisualcompsforeverydevice? • Don’tdismissmobileaswalkingandlookingsomethingup. • Weareatthebeginning,that’swhatmakesthisinteresting!
    36. 36. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×