In an increasingly mobile-centric web, it’s important for you to consider how your visual content will display across multiple devices. A responsive design ensures that your layout scales effectively, but it may not be enough to control crucial visual assets.
Look at your website through a desktop, a tablet, and then a smartphone. If your site was built for responsive design, congratulations, you’re most of the way there.
Now take a look at the key images that tell your brand story. In most cases, those images look fine on a desktop. Web browsers are good at managing text on websites. Images are a separate challenge for web browsers across the three primary view sizes (i.e., desktop, tablet, smartphone). Without instructions, browsers will simply scale down images to whatever size is necessary to render a webpage on a device.
There is, however, a way to control how your visual content displays across multiple devices. It simply requires some planning.
Planning Visual Content
Identify the visual content that matters most to your brand story. Do not do this with every photo or infographic on your website.
The examples below show how you may create three custom images for the most common screen sizes.
On the desktop, your image has room to breathe. All three subjects fit comfortably in this photo, which is 800px wide.
On the tablet, things get tighter. We photographed the same three subjects in a more compact configuration that is 400px wide.
On the smartphone, space is tight. We photographed the three subjects to display well on mobile screens that are only 200px wide.
Using Responsive Art Direction, you can tell the browser which image to display at a “viewport” of 200, 400, and 800. That is better than letting the web browser squeeze the 800 image down to 200.
Responsive Art Direction is not a common technique, since it requires your design team to create three images when they’d typically only create one. Plus, your technical team needs to insert additional code to make this all work. Reserve this effort for important and/or special art that you need to communicate a visual brand message effectively across all devices.
Start with a visual content strategy that includes your designers and your technical team to ensure this technique will work on your website. Your users will appreciate the experience you plan, design, and deliver to them.