7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Art Direction

Let's take the following page. We have some simple images and some text, and everything is scaled to fit the view port. Now, on a large screen this looks pretty good. We can see details on the man and the woman, but watch what happens when we resize this. We start getting less and less detail. On the small screen like a smartphone, both subjects look very, very small and all the detail is lost. Now, on small screens, instead of showing a scaled down image that loses a lot of detail, why don't we show a image that's a crop? So, we zoom in and we crop, we focus on a particular section of that image that's important, in our case, the man and the woman. So, instead of this. [BLANK_AUDIO] We get this. That's much better, right? We're focusing on the important parts of the image and by doing that, we're creating a really good experience on small screens. That's what art direction is all about. Of course, we need to make sure our images fit and have a low file size, but also, we need to make sure they convey the right message, otherwise they're pointless. We'll just have a blob of pixels that doesn't mean anything. So now that we start to understand what we're looking for in terms of responsive images, the next question might pop up. Why don't we use CSS to display certain images in certain screen sizes with media queries? Well, coming up, let's answer that question.

Back to the top