HTML programming
CompleteExercise 7.3 on page 156-158of the text
If that isnt good enough, try including Picturefill with your web pages.
Picturefill is an example of a polyfill, a script that makes older browsers
behave as though they support a new technologyin this case, responsive
images. It was created by Scott Jehl of Filament Group, creators of many fine
responsive design and frontend development tools. Go to scottjehl.github.io/
picturefill/ to download the script and read the very thorough tutorial on how
it works and how to use it.
Responsive Images Summary
This has been a long discussion about responsive images, and weve really
only scratched the surface. Weve looked at how to use the img element with
srcset and sizes to make pixel-ratio-based and viewport-size-based selections
(you can try them yourself in EXERCISE 7-3). We also saw how the picture
element can be used for art-direction-based and image-type-based selections.
Ive kept my examples short and sweet, but know that it is possible to com-
bine techniques in different ways, often resulting in a tower of code for each
image. To see some examples of how these responsive image techniques
might be combined to target more than one condition, I recommend Andreas
Bovenss article Responsive Images: Use Cases and Documented Code
Snippets to Get You Started on the Dev.Opera site (dev.opera.com/articles/
responsive-images/).
I also recommend the 10-part Responsive Images 101 tutorial by Jason
Grigsby at Cloud Four. He goes into a bit more detail than I was able to here
and provides links to other good resources. Start with Part 1: Definitions
(cloudfour.com/thinks/responsive-images-101-definitions/).
B rOWS E r SU P PO rt
t I P
The site CanIUse.com is a great tool
for checking on the browser support
for HTML, CSS, and other frontend
web technologies. Type in picture,
srcset, or sizes to see where
browser support stands.
EXERCISE 7-3. Adding responsive images
Ready to try out some of this responsive image stuff? I recommend downloading the
latest version of Google Chrome (google.com/chrome/) or Firefox (firefox.com) so you are
certain it supports the responsive image HTML features. The materials for this exercise are
provided at learningwebdesign.com/5e/materials. Use the responsivegallery directory
that contains a starter HTML file and images directory.
Were going to give the Black Goose Bistro Gallery page a makeover using responsive
images. Now, instead of the user clicking a thumbnail and going to a separate page, the
large images appear right on the page and resize to fill the available space. Small devices
and browsers that dont support picture get a 400-pixel-square version of each image
(FIGURE 7-15).
1. Open the file index.html located in the responsivegallery directory in a text or HTML
editor. Ive added a meta element that sets the viewport to the same size as the device
width, which is required to make this page responsive. I also added a style for img
elements that sets their maximum width to 100% of the available space. That is the bit
that makes the images scale down for smaller screen widths. Well talk a lot more about
Part II. HTML for Structure
Responsive Image Markup
156
Small devices like the iPhone show
the cropped 400-pixel-square image.
On viewports larger than 480
pixels, like the iPad shown here,
the full version of the image is
used. It resizes to fill the available
width of the page between the
margins.
On very large desktop displays, the full version of the
image resizes to fill the available width.
Browsers that do not support picture display the
400-pixel-square image specified by the img element.
FIGURE 7-15. The Black Goose Bistro Gallery with responsive images in place.
Smaller devices see a square cropped version of the image. Larger browsers get the full
image that resizes to fill the content width.
responsive design in Chapter 17, so dont worry about it too much now. I just wanted to
point out changes from our previous exercise.
2. Because we want to change between horizontal and square versions of the image on
this page, well need to use the picture element. Start by adding the bare bones of a
picture element in the first paragraph after Our Baked Goods, including the picture
wrapper and its required img element. The img element points to the default square
version of the image (bread-400.jpg). Add a line break element after the picture
element to start the text on the next line:
7. Adding Images
Responsive Image Markup
157
We start our day
3. That takes care of small devices and the fallback for non-supporting devices. Now add
a source element that tells browser to use a 1200-pixel-wide landscape version of the
image when the viewport is larger than 480 pixels:
We start our day
Note that because there is only one image specified in the source, we could have used
a simple src attribute here, but we have more work to do, so the srcset gets us ready
for the next step.
4. Because we dont want to force such a large image on everyone, lets give the browser
an 800-pixel-wide version as well. (Even more versions would be useful, but for the sake
of keeping this exercise manageable, well stop at two.) Remember that the srcset
attribute specifies a comma-separated list of images and their respective pixel widths
with w-descriptors. Ive added the 1200w descriptor to the original image and added
the 800-pixel option to the srcset. Finally, use the sizes attribute to let the browser
know that the image will occupy 80% of the viewport width (the style sheet adds a 10%
margin on the left and right sides, leaving 80% for the content). Now the browser can
choose the most appropriate size.
We start our day
5. Save the file. Launch the Chrome or Firefox desktop browser and resize the window to
as narrow as it will go. Open index.html and you should see the square cropped version
of the bread photo. Slowly drag the corner of the browser window to make the window
wider. When it gets wider than 480 pixels, it should switch to the full version of the
photo. If you see a little 800 in the corner of the image, that means the browser has
downloaded bread-800.jpg for this task. Keep expanding the window, and the image
should keep getting larger. If you see 1200, it means it is using bread-1200.jpg. Once
the larger image is in the browsers cache, you wont see the 800-pixel version again. Try
making the window narrow and wide again and watch what changes. Congratulations!
You are now an official responsive web designer! Making windows narrow and wide is
how we spend a good portion of our workday.
6. Add the remaining two images to the page, following my example. Try experimenting
with different min- and max-widths in the media attribute.
EXERCISE 7-3. Continued
NOTE
If you dont see the images at all, it
could be that your pathnames are
incorrect or the images directory hasnt
copied to your computer.
Part II. HTML for Structure
Responsive Image Markup
158
