»
Responsive ImagesResponsive Images
Fort Collins Internet ProfessionalsFort Collins Internet Professionals
July 18, 2013J...
» Goal 1: Scaling Images
» Goal 1: Scaling Images
• Auto-scaling
• as viewport is resized
• for different devices (different screen widths)
» The Key to Responsive Images
img { max-width: 100%; }
• Important: in the HTML, don’t specify height
and width attribute...
» The Key to Responsive Images
img { max-width: 100%; }
• Important: in the HTML, don’t specify height
and width attribute...
» The Key to Responsive Images
img { max-width: 100%; }
• Important: in the HTML, don’t specify height
and width attribute...
» Implementation Example
img { max-width: 100%; }
img.responsive-31 { width:31%;}
http://www.frameworkstimber.com/
> About...
» Goal 2: Responsible Images
» Goal 2: Responsible Images
• AKA – Treat your children well
• Respect the bandwidth issues of your mobile
visitors
– Slo...
» The Situation
• Want to use images with small file sizes for
mobile visitors
• Want to serve beautiful high-res images w...
» One Technique: picturefill.js
• Scott Jehl
• https://github.com/scottjehl/picturefill
• A Responsive Images approach tha...
» One Technique: picturefill.js
<span data-picture data-alt="A giant stone face at The
Bayon temple in Angkor Thom, Cambod...
» An Implemenation
• Home page background image for
frameworkstimber.com
» An implementation
<div data-picture data-alt="Frameworks Timber - Timber Framing" id="home-background">
<div data-src="/...
» Span vs. Div
• You may have noticed that the Jehl example
uses spans and my example uses divs.
• v1 of picturefill.js us...
» Additional Resources
• The article that started it all, by Ethan Marcotte:
– http://www.alistapart.com/articles/responsi...
» Where to find me
• @ron_z – follow me on Twitter
• ronz@codegeek.net
• codegeek.net
• IgniteFortCollins.com and @IgniteF...
»
Thank YouThank You
Fort Collins Internet ProfessionalsFort Collins Internet Professionals
July 18, 2013July 18, 2013
» Media Queries?
First, Media Types, which you already know:
<link rel="stylesheet" media="screen" href="c.css" />
<link r...
» CSS3 Media Queries
In your HTML:
<link rel="stylesheet"
media="screen and (max-width:340px)” href=“c.css” />
Or more com...
» CSS3 Media Queries
• min-width (refers to viewport dimensions)
• min-device-width refers to display dimensions
of the de...
» More Media Queries
http://www.w3.org/TR/css3-mediaqueries/
• width
• height
• device-width
• device-height
• orientation...
» Browser Support
• Opera 9.5+
• Firefox 3.5+
• Safari 3+
• Chrome
• IE9 +
• Mobile Webkit
• Opera Mobile ~
» A magic bullet
code.google.com/p/css3-mediaqueries-js/
• IE5 – IE8
• Firefox 1 & 2
• Safari 2
• Legacy, if you only care...
Upcoming SlideShare
Loading in...5
×

Responsive Images FCIP July 2013

329

Published on

The basic technique for scaling images in Responsive Web Design (RWD) sites is briefly reviewed, and then one front-end / client-side technique for serving small file size images to mobile users and larger images to desktop users is demonstrated (picturefill.js)

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

  • Be the first to like this

No Downloads
Views
Total Views
329
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Images FCIP July 2013

  1. 1. » Responsive ImagesResponsive Images Fort Collins Internet ProfessionalsFort Collins Internet Professionals July 18, 2013July 18, 2013
  2. 2. » Goal 1: Scaling Images
  3. 3. » Goal 1: Scaling Images • Auto-scaling • as viewport is resized • for different devices (different screen widths)
  4. 4. » The Key to Responsive Images img { max-width: 100%; } • Important: in the HTML, don’t specify height and width attributes on images
  5. 5. » The Key to Responsive Images img { max-width: 100%; } • Important: in the HTML, don’t specify height and width attributes on images • Image renders at the actual dimensions, as long as it’s narrower than its containing element • Modern browsers rock– they resize images proportionally, aspect ratio remains intact
  6. 6. » The Key to Responsive Images img { max-width: 100%; } • Important: in the HTML, don’t specify height and width attributes on images • Image renders at the actual dimensions, as long as it’s narrower than its containing element • Modern browsers rock– they resize images proportionally, aspect ratio remains intact • Bonus: works for embed, video, and object too
  7. 7. » Implementation Example img { max-width: 100%; } img.responsive-31 { width:31%;} http://www.frameworkstimber.com/ > About > Stewardship
  8. 8. » Goal 2: Responsible Images
  9. 9. » Goal 2: Responsible Images • AKA – Treat your children well • Respect the bandwidth issues of your mobile visitors – Slower download speeds (in many cases) – May be paying by the bit! (in $ome cases)
  10. 10. » The Situation • Want to use images with small file sizes for mobile visitors • Want to serve beautiful high-res images with larger file sizes to those with 3000px displays • But, whatever you do you don’t want mobile devices to be downloading any more images than necessary • How?
  11. 11. » One Technique: picturefill.js • Scott Jehl • https://github.com/scottjehl/picturefill • A Responsive Images approach that mimics the proposed picture element. More info: – http://usecases.responsiveimages.org/ – Use cases and requirements for standardizing responsive images, under development by the Responsive Image Community Group
  12. 12. » One Technique: picturefill.js <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min- width: 1000px)"></span> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </span>
  13. 13. » An Implemenation • Home page background image for frameworkstimber.com
  14. 14. » An implementation <div data-picture data-alt="Frameworks Timber - Timber Framing" id="home-background"> <div data-src="/wp-content/themes/fwt/images/home-background-600-n1.jpg"></div> <div data-src="/wp-content/themes/fwt/images/home-background-800-n1.jpg" data- media="(min-width: 601px) and (max-width: 800px)"></div> <div data-src="/wp-content/themes/fwt/images/home-background-1200m.jpg" data- media="(min-width: 801px) and (max-width: 1200px)"></div> <div data-src="/wp-content/themes/fwt/images/home-background-1500m.jpg" data- media="(min-width: 1201px) and (max-width: 1500px)"></div> <div data-src="/wp-content/themes/fwt/images/home-background-2000m.jpg" data- media="(min-width: 1501px) and (max-width: 2000px)"></div> <div data-src="/wp-content/themes/fwt/images/home-background-5000.jpg" data- media="(min-width: 2001px)"></div> <!--[if (lte IE 9) & (!IEMobile)]> <div data-src="/wp-content/themes/fwt/images/home-background-2000m.jpg"></div> <![endif]--> <noscript> <img src="/wp-content/themes/fwt/images/home-background-600.jpg" alt="Frameworks Timber - Timber Framing"> </noscript> </div>
  15. 15. » Span vs. Div • You may have noticed that the Jehl example uses spans and my example uses divs. • v1 of picturefill.js uses divs • Newer versions use spans for a few reasons, one of which is that since the <img> tag is an inline element by default, <span> is a better fit as it’s also an inline element compared with <div> which is a block element.
  16. 16. » Additional Resources • The article that started it all, by Ethan Marcotte: – http://www.alistapart.com/articles/responsive-web-design/ • Fluid Images by Ethan Marcotte: – http://unstoppablerobotninja.com/entry/fluid-images • IE8 and below Media Queries fix: – http://code.google.com/p/css3-mediaqueries-js/ • IE6 min/max-width hack: – http://www.cameronmoll.com/archives/000892.html • Fluid Grids by Ethan Marcotte: – http://www.alistapart.com/articles/fluidgrids/ • Media Queries reference, list of Media Query selectors available: – http://www.w3.org/TR/css3-mediaqueries/ • Responsive Typesetting: – http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html
  17. 17. » Where to find me • @ron_z – follow me on Twitter • ronz@codegeek.net • codegeek.net • IgniteFortCollins.com and @IgniteFC • The Fort Collins Hive: HiveFC.com
  18. 18. » Thank YouThank You Fort Collins Internet ProfessionalsFort Collins Internet Professionals July 18, 2013July 18, 2013
  19. 19. » Media Queries? First, Media Types, which you already know: <link rel="stylesheet" media="screen" href="c.css" /> <link rel="stylesheet" media=”print" href="c.css" />
  20. 20. » CSS3 Media Queries In your HTML: <link rel="stylesheet" media="screen and (max-width:340px)” href=“c.css” /> Or more commonly, in your CSS: @media screen and (max-width:340px) { Styles applicable for viewports 340px and narrower … }
  21. 21. » CSS3 Media Queries • min-width (refers to viewport dimensions) • min-device-width refers to display dimensions of the device (maybe safe for identifying the device, iPad, iPhone, etc.) • can select based on dpi or dpcm, not just width • can select based on color depth
  22. 22. » More Media Queries http://www.w3.org/TR/css3-mediaqueries/ • width • height • device-width • device-height • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan • grid
  23. 23. » Browser Support • Opera 9.5+ • Firefox 3.5+ • Safari 3+ • Chrome • IE9 + • Mobile Webkit • Opera Mobile ~
  24. 24. » A magic bullet code.google.com/p/css3-mediaqueries-js/ • IE5 – IE8 • Firefox 1 & 2 • Safari 2 • Legacy, if you only care about IE5 – IE8: <!--[if lt IE 9]> <script type="text/javascript" src="js/css3-mediaqueries.js"></script> <![endif]-->

×