What is Art Direction and How to Use it

Help! My banner images are cut off on mobile.

I see messages like this a lot in help forums. It usually means we have a "hero" image with an important subject placed on the left or right side of the picture.

On a desktop, it looks fab. On a laptop, it looks so-so. When we get to a tablet—we're not so happy as the main subject starts to fall off the edge. On a mobile. Forget about it. The subject is gone.

One solution is to pick an image where the subject in the centre.

This isn't always possible nor desired. What's the answer if you need to use a left or right justified image?

The answer is to use art direction images with CSS media queries. Let's do it.

Art Direction Images with CSS Media Queries

Step 1 Create the Images

We need to create a set of images from the original. Each image will have a different width and height and different compositions to keep the subject in view.

Using the image of the woman and child as an example, here are the art direction versions we'll use.

1. Desktop 2000 x 768 px.
2. Mobile landscape 600 x 768 px.
3. Laptop 1240 x 768 px.
4. Mobile portrait 480 x 768 px.
5. Tablet 768 x 768 px.

Question—do five different images seem extreme? We need at least five because of how close the two subjects are to the right edge. How many versions depends on the original photo composition. Sometimes two is enough.

Step 2 Create the CSS Media Queries

We'll need four media queries. We want our code to default to the mobile portrait image. The default doesn’t need a media query.

So we’ll write four media queries to kick-in the four larger versions as the display becomes wider. See the breakpoints in the snippet below.

The CSS Media Queries for the Art Direction Images

/* 
 * || Responsive Web Design Demo (formerly using Fusion Slider)
 *
 * mark l chaves 24 July 2019 (updated 9 September 2019)
 */

/* Mobile first responsive web design. */
.hero {
    background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-mob-768.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Mobile landscape breakpoint. */
@media only screen and (min-width: 480px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-land-768.jpg);
    }
}

/* Tablet breakpoint. */
@media only screen and (min-width: 768px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-tab-768.jpg);
    }
}

/* Laptop breakpoint. */
@media only screen and (min-width: 1024px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-lt-768.jpg);
    }
}

/* Desktop breakpoint. */
@media only screen and (min-width: 1600px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-dt-768.jpg);
    }
}

Step 3 Test the Result

Here's what you should see.

Live Demo on Codepen

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

Wrapping Up

I hope you learned something new! At the very least, you'll know how to help someone when their heroes are cut off on mobile devices ;-)

Learn more about art direction and responsive design at the W3C.

Shout if you have any questions.

35mm Film Photograph of a Balinese Man on Unsplash by mark l chaves.