• Save
Responsive Images FCIP July 2013
Upcoming SlideShare
Loading in...5
×
 

Responsive Images FCIP July 2013

on

  • 417 views

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 ...

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)

Statistics

Views

Total Views
417
Slideshare-icon Views on SlideShare
417
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

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…
Post Comment
Edit your comment

    Responsive Images FCIP July 2013 Responsive Images FCIP July 2013 Presentation Transcript

    • » Responsive ImagesResponsive Images Fort Collins Internet ProfessionalsFort Collins Internet Professionals July 18, 2013July 18, 2013
    • » 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 attributes on images
    • » 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
    • » 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
    • » Implementation Example img { max-width: 100%; } img.responsive-31 { width:31%;} http://www.frameworkstimber.com/ > About > Stewardship
    • » Goal 2: Responsible Images
    • » 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)
    • » 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?
    • » 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
    • » 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>
    • » 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="/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>
    • » 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.
    • » 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
    • » 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
    • » 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 rel="stylesheet" media=”print" href="c.css" />
    • » 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 … }
    • » 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
    • » 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
    • » 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 about IE5 – IE8: <!--[if lt IE 9]> <script type="text/javascript" src="js/css3-mediaqueries.js"></script> <![endif]-->