What is Art Direction and How to Use it
Tags: webdev, css, tutorial
Published: 2020-02-07 09:23:48

>Help! My banner images are cut off on mobile.

I see messages like this a lot in [help forums](https://wordpress.org/search/header+image+cut+off/?forums=1). It usually means we have a "hero" image with an **important** subject placed on the left or right side of the picture. 

![Right Justified Hero Image](https://marklchaves.files.wordpress.com/2020/02/test2slider-lt-768.jpg "Right Justified Hero Image")

On a desktop, it looks fab. On a laptop, it looks so-so. When we get to a tablet&mdash;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.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/101l7sv3kns2fsjlxiwk.gif" width="800" alt="Opposite of Responsive Design" title="Opposite of Responsive Design">
  <figcaption>
    Above is the opposite of [responsive web design](https://developer.mozilla.org/en-US/docs/Glossary/Responsive_web_design) or RWD. The image has only one-size that is suited for a large display. It's a one-size **doesn't** fit all.
  </figcaption>
</figure>

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

![35mm Film Photograph with Subject in the Centre](https://d1qmdf3vop2l07.cloudfront.net/honeydew-aurora.cloudvent.net/compressed/_min_/5b9567e5a14dcc2fb4deee234ba0dde4.jpg "35mm Film Photograph with 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](https://cloudfour.com/thinks/responsive-images-101-definitions/#artdirection) images with [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_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.

![Example Art Direction Images](https://dev-to-uploads.s3.amazonaws.com/i/0rgoqr3varoah3gk7zjq.jpg)

Question&mdash;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

```css

/* 
 * || 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.

<figure>
  <img src="https://media.giphy.com/media/TfFGc2amScfP8TOTYb/giphy.gif" width="800" alt="Using Art Direction for Responsive Design" title="Using Art Direction for Responsive Design">
  <figcaption>
    Putting it all together. Our responsive web design using art direction.
  </figcaption>
</figure>

#### Live Demo on Codepen

{% codepen https://codepen.io/marklchaves/pen/ZEGELdP default-tab=css,result %} 

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](https://usecases.responsiveimages.org/#art-direction) at the W3C.

Shout if you have any questions.

---

35mm Film Photograph of a [Balinese Man on Unsplash](https://unsplash.com/photos/XtpUeE12Iq4) by mark l chaves.