�ݺ�ߣ

»
Responsive ImagesResponsive Images
Fort Collins Internet ProfessionalsFort Collins Internet Professionals
July 18, 2013July 18, 2013

» 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

• 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

• 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.responsive-31 { width:31%;}
http://www.frameworkstimber.com/
> About > Stewardship

» 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=/slideshow/responsive-images-fcip-july-2013/24418594/"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>

<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=/slideshow/responsive-images-fcip-july-2013/24418594/"/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-
<div data-src="/wp-content/themes/fwt/images/home-background-5000.jpg" data-
media="(min-width: 2001px)"></div>

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

�ݺ�ߣ

Responsive Images FCIP July 2013

More Related Content

Responsive Images FCIP July 2013