
Unless you’ve been living under a rock, you know your website has to be mobile-friendly to avoid search penalties. Google laid down the law about this in 2015. Even if you confuse “responsive design” with the current trend for single-column websites with long scrolling home pages and full-width hero images, you’re aware that your website has to work on phones and tablets.
What you may not know is how mobile-friendliness constrains your design choices. One of the reasons that single-column layouts are so popular is that you don’t have to worry about how to stack the columns on smaller screens and how there’s a good chance no one on a phone will see your ads or calls to action if you put them in the sidebar. There are other solutions to the problem of organizing content for multiple screen sizes, but a single-column layout is a good option if you want the visitor to focus on one thing at a time.
Right now that one thing is usually a hero image (or video), usually with a call to action on top of it. For those not familiar with the term, a “hero image” is a full-width (and often full-screen) image designed to catch the visitor’s attention. The term allegedly derives from “hero prop,” which is a filmmaking term that designates a prop that’s meant to have a close-up zoom, and/or plays a major role in the film. Even if you’ve never heard the expression, you’ve seen hero images everywhere.
The Problem with Hero Images
If you choose this type of site layout, you, too, will need hero images. This is where those design constraints come in. To get the full effect of a huge image, you need a huge screen—or at least a screen that’s wider than 800 pixels. So you’re probably going to select your hero images with the desktop version of your website in mind. And that can be a problem, because not every image that looks great in a 16:9 HD ratio is going to look equally good on a device with a pixel width of 320.
If you think about it, it should be obvious that a horizontal image isn’t going to work all that well on a vertical screen, and vice versa. For background images (which most hero images are), there are two basic choices: scaling without cropping and scaling with cropping, achieved by using background-size: contain
and background-size: cover
in CSS.
If you use background-size: contain
to scale that 1920 x 1080 hero image down for your portrait-oriented phone, it’s going to end up at 320 x 180. It will be hard to see detail and your text overlay might not fit on top of it anymore.
If you use background-size: cover
to make sure that the image fills the whole height of the container, the image will be cropped so that you only see the center 320 pixels. You may lose some of the top and the bottom, too, though you can position the image so it crops from the top or the bottom instead of the middle.
If your hero image is something like a skyline or a mountain range, this shouldn’t really be a problem. People on mobile devices will see a smaller slice of the skyline or mountain range, but it will still be clear what they’re looking at.
But what if your hero image contains a more specific subject, like a human figure? And what if that figure is not positioned in the center of the image? You could lose the focal point of the image entirely on a phone.
Real-Life Example of a Problematic Hero Image
I received a design for a site with a landscape hero image that actually had two focal points on opposite sides of the image. This one is pretty much impossible, because while you can use media queries and other forms of art direction to ensure that the subject of an asymmetric image stays in the middle of smaller screens, there just isn’t room for two focal points on a 320-pixel screen. Or even a 600-pixel screen. In fact, with this image you’d be pushing it on an 800-pixel screen.
One of those focal points was the client’s logo. The other was a statue of Paul Revere on a galloping horse. The logo was on the far left and the head of Paul Revere’s horse on the far right. From a responsive design perspective, this was a disaster. A center crop at 320 pixels wide cut off the horse’s head and almost the entire logo.
This, obviously, is not going to cut it. Even after persuading the client that the logo really belonged in the header, we were left with the asymmetric image problem. The poor client wrestled with it for entirely too long a time instead of choosing a different image. I actually think it would look okay if we took this crop for desktop screens:
That would leave us with Paul’s head and lantern still visible on smaller mobile screens:
There were two problems with this possibility, however. The first was that the original version I had of the image wasn’t actually large enough for me to make a 1920-pixel wide crop from any but the original perspective. (I’ve cheated above by only showing you a 960px image.) The second was that the client didn’t like having Paul looking offscreen. (Seems to me he’s looking at his lantern, which he frankly shouldn’t have been if he was riding at that speed, but what the heck, it’s the client’s website.)
For Best Results, Choose an Image with the Subject at the Center
There are actually two approaches to handling an asymmetric image like this, assuming that your original is large enough to crop an appropriate largest size from. (Most stock photos and most photos taken directly from cameras and even late-model phones are going to be plenty big.)
The first is to choose a different image. I didn’t have another image of the specific statue of Paul Revere used in that photo, but the famous Paul Revere monument in Boston has been photographed many times, and it wasn’t difficult to find a promising version on Adobe Stock. Here is that image at its original ratio.
Next, crop the image to your largest size using rule-of-thirds guides to center the most important part of the image. This ensures that Paul’s face is going to appear at the center on all screens.
Our end result is a desktop version that looks like this, where we see both Paul and his horse…
And a mobile version that looks like this, where we no longer see the horse, but still see Paul himself.
This is the simplest and least expensive way to ensure that your hero image works across multiple screen sizes–least expensive, because your designer only has to produce one crop of the image and your developer only has to code one set of media queries.
Art Direction: an Alternative Approach to Asymmetric Hero Images
When it comes to responsive web design and responsive images, “art direction” means selecting different crops of an image for different screen sizes and/or orientations. (See the W3C Working Group note on art direction and responsive images.) Smashing Magazine has published several articles about responsive images and art direction, notably on February 8th, September 1st, and September 29th of 2016.
The up side of art direction for your hero images is much greater control. The down side is that someone has to generate those different versions of your hero image and then code them. There are some tools for automatically cropping images based on point of focus, such as imgix, but are you going to pay $10/month forever so you can have art-directed hero images? You’re probably better off paying your designer and developer for the extra time involved for them to do it, unless you’re planning to change hero images frequently.
Eventually, this kind of cropping might be integrated into WordPress and other tools, so that if you have a theme that lets you select backgrounds for hero sections on your home page, they’ll be cropped appropriately, and the CSS generated, when you upload the images through the media uploader. But we aren’t there yet, and it’s likely to be a few years before we get there.
Prevent Problems with Mobile-First Design
Designers and clients alike seem to resist the idea of mobile-first design, but if the initial designs for this particular site had been made for a narrow screen, the problem with the original hero image above would have been entirely avoided. If you are a designer, you need to start insist on providing at least three views (mobile, tablet, desktop) of each proposed layout for a site—and you need to charge accordingly. If you’re a client, you need to ask for those three views of each proposed layout for your site, and be willing to pay accordingly. Anything else sets you up for trouble once the site gets to the build stage. If you can’t afford to do it right, you certainly can’t afford to do it over.
Great article! Designing headers that work across different devices is the thing that challenges me the most and the thing I try and resolve first on any project.
You’re the first I’ve seen address this in a blog article, I was beginning to wonder if I was the only one who saw it as an issue.
I’m a WordPress fan personally and I’m amazed at how many premium themes seem to ignore this. There are so many that look great on desktop but awkward on mobile. The rest of the page looks great but it’s like they can’t be bothered to fix the hero image.
I often cut subjects from backgrounds in photos and place them on transparent background. I then have two column header with text overlay one side and image the other. It looks a little like a hero on desktop but the columns become one on top of the other on mobile.
Would like some other solutions though, maybe swapping out images so one ideally suited to mobile is used instead. To me it’s like technology is running ahead and not giving adequate solutions to designers. It was the same with retina screens and blurry logo images.
The solution for logos is usually to use SVGs. But for header and hero images, it’s a little tougher. Some themes and page builders give you a place to add a different image for mobile headers, but mostly, it’s something I do through CSS, at least for headers or things that won’t need changing often.
One thing I’ve had to do often is translate the images a designer gives me into CSS, if there’s an effect (overlay, filter, etc.) that needs to be in a certain position (under the text, most often) but will be in the wrong place on small screens. It can be quite a bit of work.
Hola,
Thanks a bunch for this article. This was exactly what I was looking for. Struggling with this as well for my clients.
My solution – if really necessary – so far has been, to make one header design for websites/tablet and disable it for mobile. Then I create another header for mobile, which I disable for website/tablet. So far it has been working quite good. I’m curious to hear about your opinion about this, though.
Is this a smart workaround (doesn’t require any unnecessary/complicated coding)? Or do you consider it an unprofessional workaround? Maybe it has some consequences that I haven’t thought about? Curious to know what you think.
Thanks a bunch in advance!
Inge
You can certainly set up different headers for different screen sizes using media queries; the article is mainly about how to avoid having to do that, in cases where that isn’t in the budget, the theme settings, or the site owner’s skillset.
I found that applying the css class Background-Position: X%; example: “background-position: 80% !important;” allows you to shift the image location on mobile.
I hate using
!important
tags, because they tend to mess a lot of other things up by essentially breaking the way CSS is supposed to work. Also, even that won’t always work if the background position is determined by JavaScript, which it is in cases where something like Backstretch is being applied. However, if it’s working for you and you haven’t noticed any problems, go ahead on.The cover block that comes with Gutenberg editor allows you to pick a focal point. That way, you don’t have to use an image where the focal point is at the center..
Those focal point settings are a way to set the values of the
background-position
property. They are helpful, but don’t solve everything. You still have to consider where the text overlay will appear on the image at different screen sizes. (Across the middle of the subject’s face is always an awkward one.)I’d love to hear more about cropping the hero image when showing on mobile when the image is not centered. Right now it just crops to the center and the image is horrible looking.
You can choose different images for different size screens by 1) creating the images and 2) using Media Queries in CSS to set the background image. Some themes give you the option to choose backgrounds/hero images for desktop, tablet, and phone. You can also use CSS to modify the background position, so that instead of cropping from the center, it crops from the top left or right (or wherever your subject is). Check the docs for the CSS `background` property.
Great read, thanks. Using css to change the image on mobile / desktop seems the best option to me, as it should also reduce filesize on mobile. Have you a snippet of code I could try for that? I’ve tried using 2 headers and hiding depending on which device the user is on which does work but overall I’m just increasing page load time I guess? Would the desktop header still get loaded on mobile even if its hidden do you know?
Hi, Gary. There are so many possibilities these days. (Pity I’ve not had time to blog about them.) For instance, you might choose an inline image instead of a background image, and in that case WordPress will automatically serve smaller images (taken from its auto-generated thumbnails) to mobile and you can adjust with CSS `object-fit`. Otherwise, you’ll want to use either media queries or container queries to select the specific images you want to use on smaller screens.