DEV Community

Cover image for What is Art Direction and How to Use it
mark l chaves
mark l chaves

Posted on • Updated on

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.

Right Justified Hero Image

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.

Opposite of Responsive Design



Above is the opposite of 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.

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

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

Example Art Direction Images

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);
    }
}

Enter fullscreen mode Exit fullscreen mode

Step 3 Test the Result

Here's what you should see.

Using Art Direction for Responsive Design



Putting it all together. Our responsive web design using art direction.

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.

Top comments (2)

Collapse
 
stegriff profile image
Ste Griffiths

This is a nice technique with great results! It looks like a lot of work. Do you know any good tools to help you quickly generate each version of the image and perhaps generate the CSS media queries for each one? Thanks for the interesting post.

Collapse
 
marklchaves profile image
mark l chaves • Edited

Thanks Stephen!

Yes. There is one tool I know of -- Responsive Image Breakpoints Generator. I love this tool for generating sets of one-offs in a pinch.

Unfortunately, I haven't got it to work like in the demo above. Here's an example.

Another thing I still have to do is go back and optimise the images from the generator. It spits out lots of images ;-)

Let me know if you get it to work or if you find something better!

enjoy :-)

P.s. The generator uses the cool HTML5 picture element. However, I generally work with background hero images.