Responsive images, Part 2—Body Images
It᾿s been a while since my last post, thanks in part to life, and also to my attempts to get to grips with Drupal, the CMS on which Beautiful Web was previously built. I᾿ve had a few problems with Drupal, so I᾿ve changed to my own custom-built set of web pages. Anyhoo, here᾿s the next instalment of Beautiful Web, looking at the images in The Great Discontent and their responsive behaviour.
Images in the body area of TGD seem to come in two flavours: large and small. I᾿ll deal with each of these in turn below. Also, I᾿ll have a quick look at the nifty loader image that you see for a few seconds when an image appears on screen.
Skip to navigationLarge images
The first image type is full screen width at smaller sizes, but at 990px, it squashes to about two-thirds as the caption below it is forced to the right.
Here is the HTML for this type of image:
Wait just one second, mister — going through this markup line by line, I᾿m comfortable with the two div
s, but I have questions about the figure
and noscript
elements, and about the data-src
, data-src-small
and data-src-medium
attributes in the img
element.
What does the figure
element do?
Although figure
is part of my passive web design vocabulary, I᾿m not 100% sure how it᾿s used. This article gives the basic low-down: www.w3schools.com/tags/tag_figure.asp, while this gives a bit more insight into how to use figure
: html5doctor.com/the-figure-figcaption-elements. Essentially, figure
is intended to be a semantic container (like header
or article
) for images and captions which are related to the main content. So, by itself figure
doesn᾿t do much, but you can use it to group an img
and its corresponding figcaption
together instead of using an unsemantic div
.
What does the noscript
element do?
Again, from the name it᾿s pretty obvious what this is for. Here᾿s a description: www.w3schools.com/tags/tag_noscript.asp. According to this article, whatever appears inside noscript
is triggered when JavaScript is disabled on the user᾿s browser. Examples online give examples only of text, for example, a message which says “You have disabled JavaScript!”. In the above code snippet, however, it᾿s clear that you can add other elements, not just text, inside the noscript
tag.
What do the data-*
attributes do?
According to w3schools.com/tags/att_global_data.asp, you can define your own attributes for elements using the data-
prefix. Browsers will overlook these custom attributes, but you can make use of them through JavaScript, and I suspect that these are referenced by Picturefill (discussed in my previous blog post). This is a little beyond my ken at the moment, but for posterity, this article looks interesting: html5doctor.com/html5-custom-data-attributes.
So, the figure
and noscript
elements, and (used in conjunction with JavaScript) data-*
attributes are all important ways of optimising images on a site. Now what about the small images?
Small images
The final image type spans the screen width up to 480px, but then reduces to about two-thirds of the screen as the caption moves to the right. At 990px, the image and caption shrink to about 25% of the screen width and are pulled to the right, out of the flow of the body text.
Here᾿s the HTML for all this:
For me, the above markup is pretty clear, but what I like about this is the way the images and their figcaption
s bounce around the screen according to viewport width. TGD clearly makes creative use of the underlying grid that it employs.
The Loader Image
Finally, I want to have a look at the loader image that TGD uses when an image comes into the viewport. There is a pause of a second or so while the image loads, during which time you see a grey image with a circle of dots that seems to rotate.
From the HTML snippets above, we can see that the src
attribute of the img
s is set to “loader-4x6.gif”. Presumably, the picturefill polyfill, discussed in my previous blog post, controls this behaviour; the polyfill causes the src
image to appear for a second or so before the data-src
image. So, if I want a loader image to appear, I set the src
attribute of my img
to the loader GIF, and then set data-src
to the actual image that I want.
To wrap up with TGD, I᾿ve learnt a lot over the course of the last two blog posts:
- You can plug Scott Jehl᾿s picturefill into a site to enable finer control over image quality and bandwidth.
- You can apply a funky image cropping effect at different screen sizes.
- You can use certain HTML tags and attributes to add better control over images and other elements. These tags are:
figure
,noscript
anddata-*
. - You can be very creative in the way images interact with your underlying grid.
- You can make a cool loader GIF display while an image is loading.
On the whole, I᾿d say it᾿s been a productive couple of posts.
That concludes my exploration of The Great Discontent. I᾿ve learnt a lot, but it᾿s now time to move on to a new site: A List Apart.
Skip to navigation
Comments
comments powered by Disqus