Squash & Stretch (the Zombie’s Face)

20.06.2017 |

Episode #7 of the course Responsive design: An undead introduction by John Rhea

 

In a world of responsive websites, there’s one element that’s both common and poorly designed for responding to context: the image.

If an image’s aspect ratio changes, it’ll look squashed or stretched. If it’s a zombie’s face, that’s probably okay, but for just about any other image, it won’t look good. Or perhaps even worse, if nothing is done to help the image be flexible, it’ll just shove its way out of the box you put it in, breaking your layout and letting the zombies win. A little bit of CSS will help us fix most situations:

img {
width: 100%;
height: auto;
}

This sets the image tag to the full width of its container and keeps the height automatically generated so the aspect ratio stays the same. But like any new weapon the military brings to bear on the zombie plague, there are problems.

If the container is wider than the image, the image will scale up, degrading quality. If the container is smaller than the image, then the image will be scaled down. That works great unless you’re on mobile, where the 6MB hero image that makes your desktop version a zombie killer chokes your internet connection like a zombie going after your brains.

The last big drawback of this method is that it doesn’t give you a chance to be specific about what part of the image is shown. For instance, at desktop sizes, you may want to show the full photo of the so-called “Last Press Conference before the Apocalypse,” where zombies overran the President’s announcement of their existence. But as the image scales down, it can be harder and harder to see the podium and the look of terror on the President’s face as a zombie shuffles toward him. Being able to show something other than a straight scaled-down version (art direction) could be really important for demonstrating the dangers of public speaking during an apocalypse.

 

Art-Directing Zombies

There are two competing standards for providing art direction. One adds a “srcset” attribute to the img tag, but since that isn’t as well supported as the alternative, we’ll leave it on the side of the road and carry on with the <picture> element.

<Picture> works as a wrapper for an img tag, allowing multiple sources with “mini” media queries built into the element to change photos under particular conditions.

Here’s an example:

<picture>
<source srcset=“large-scary-zombie.jpg” media=“(min-width: 1000px)”>
<source srcset=“medium-less-scary-zombie.jpg” media=“(min-width: 600px)”>
<source srcset=“small-a-little-scary-zombie.jpg” media=“(min-width: 300px)”>
<img src=“tiny-non-scary-zombie.jpg”>
</picture>

If the width-based media query applies, then that source element will be used (if two of them apply, the highest listing will apply—e.g. when both “medium” and “large” apply in the example above, “large” is the one used). If no media attribute applies, the default or img will be used.

Browsers ignore tags and such that they don’t understand. So, if you’re showing Mom your web exploits on her computing dinosaur, the picture and source elements will get ignored and it’ll just display the one it knows: the img tag

So, we’ve double barreled this responsive design thing, and you are ready to go out and rain some pain down on those undead walkers. But before you do, let’s take a look at some best practices to make sure no zombie escapes your grasp.

 

Recommended book

Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Niederst Robbins

 

Share with friends