October 1, 2015

Everybody Loves Super Heros

Over the past several years, we have seen a huge increase in the number of websites designed with large, full-screen banner images. Whether you call them “hero” images or the more traditional “banner” images, the design principles remain the same.

Responsive Website Banner Image

The basic idea is to fill the screen or a large portion of the screen with an image. Typically, it’s a background image with type and/or other design elements in the foreground. Hero images have become popular for many reasons. A hero image serves as a powerful dominant element to work in conjunction with the main headline and communicate the primary message quickly. There are numerous studies documenting the effectiveness of hero images in comparison to outdated rotating carousel banner images:

In addition, it has been well-documented that average users are willing to scroll down the page to find additional content and often prefer scrolling to clicking:

Full-screen hero images, combined with long-scroll pages make for great storytelling opportunities and allow your brand message and unique selling proposition to be communicated in an engaging and interactive way. The days of cramming all the content “above the fold” are over. Whew!

So what could go wrong?
While we are huge fans of this design movement as there are numerous advantages, we’ve noticed that our clients are often confused by the way images scale and crop, as well as what information can be “sticky” to remain on the screen at all times. There’s more than one way to skin a cat and there is no single answer that works for every client. The following is a list of potential pitfalls as well as our recommended solutions for each:

Image Cropping
The most common issue we face is the inevitable cropping that occurs with full-screen hero images. As images scale horizontally to fill the screen, they must also scale vertically or else the images would appear stretched or pinched, depending on the aspect ratio of the screen. Some users browse the Web with their browsers maximized. Personally, I tend to browse with my window in a vertical-ish shape along the left-hand side of my screen. Once you take all variables into consideration, you’ll see there are an infinite number of aspect ratios – and a full-screen hero image must scale to fill them all. Inevitably, some image cropping is going to occur.

Responsive Website Banner Image on iPad Tablet, aspire, aspire website, web design, hero images, responsive web design, push10

This is often a hard concept for some to understand, so we’ve found the following analogy quite useful. Imagine you had a 4×6 photo print that you wanted to scale up to fit a 5×7 photo frame. Unfortunately, the proportions don’t quite work out, so you’d need to scale the shortest edge up to fit, then crop off any leftover from the longer edge. While this could be a great way to crop out photo bombers, it’s not always ideal to cut Grandma out of the family portrait. So what’s the solution? There are several, and there’s no right or wrong answer.

1. Make sure to avoid tightly cropped original source photos.
This will allow the necessary scaling to take place without cropping out any key elements. For instance, if you’re planning on using scaling images for bios, make sure your photographer shoots fairly loose, to allow ample negative space around the subjects’ heads and shoulders. Click here to see an example of this solution.

2. Change the point from which the scaling occurs.
Typically, we’ll scale from the center of the photo so both the top and bottom of the photo may be subject to a bit of cropping. However, working with bio photos, for example, we are careful not to crop off the heads of the subjects. In that case, we’d fix the top of the photo with only the bottom of the photo subject to cropping.

3. Used fixed-width images.
If all else fails and any form of cropping is a definite “no-no”, then we can simply create fixed-width images that don’t scale.

File Size
By default, we size our full-screen background images to be 1,200 pixels wide. If users are browsing on larger screens, these images need to scale up to fill the screen. This can often introduce some blur into the image. If the image is just a background image, this blur is often acceptable – even desirable. However, if the image is a foreground image, or contains vital elements that must be sharp, we’ll often create larger source images in the range of 1,800 pixels or so. The upside? Sharper images. The downside? Larger files which lead to longer load times.

It’s best practice to review your Google Analytics to determine the screen resolution of your typical visitors and appropriately select the optimal image size with your target market in mind. For one of our web projects, the key stakeholder was using a huge 27” display with the browser maximized, resulting in over 2,500 pixels of resolution. The full-screen images were for a portfolio, thus needed to be tack sharp. Ultimately, we uploaded source images that measured a whopping 2,500 pixels across. Even though we heavily optimized the JPGs, the resulting file sizes were quite large. Adding further complication, the hero image was actually a series of images set to automatically rotate with the banner area. The combined file sizes of all the images in the series ended up causing significant delays in page load performance.

Upon further research, we learned that the website’s target market often browsed the web at a more typical resolution in the 1,200-pixel range, yet all users were subject to the performance penalty caused by the oversized images. Moral of the story? Design with your target audience in mind.

Sticky Elements
By now, most users are familiar with “sticky” header navigation. As long-scroll pages have grown in popularity, sticky navigation has become a must-have feature. It allows users to interact with the website’s primary navigation, regardless of how far they have scrolled down the page. But when it comes to full-screen hero images, we found it’s often useful to “stick” other elements along the base of the hero image to ensure certain key points are kept above the fold. Proceed with caution, however. Depending on the size of the sticky element, it can limit the amount of screen real estate available and exacerbate any potential cropping issues. Here’s a good example of these types of sticky elements.

The use of video as a full-screen background element has become increasingly popular in the past year or two. In fact, we recently added a video background image to our own homepage. When used as a background element, videos should set a tone or mood, but lack overly-specific content, audio and/or voiceovers. A full-screen background video is typically 30 seconds long and is set to automatically loop.

Likewise, it’s often intentionally a bit dark and slightly blurry (or textured) to allow for other text or content to pop in the foreground. A full-screen background video is not an appropriate place for your corporate video, complete with soundtrack and talking heads. It’s also important to replace video with static images when on mobile devices. Not only is load time an issue, but users grow upset if your site uses up a large chunk of their mobile data plans.

The Mobile Experience
Responsive design to the rescue! Most of this post focuses on how to scale images up to fit a variety of desktop browsers and screen resolutions. Given the rise of mobile browsing, it’s just as important to consider how large hero images can affect the mobile experience. Sometimes, the hero image remains as a full-screen background image but now must fit a vertical orientation (phone) in addition to a horizontal orientation (tablet). Other times, the hero image retains it’s 16×9 ratio and becomes a more traditional “banner” image, while the headline moves beneath the image rather than on top. Again, there’s no right or wrong answer. However, it’s key to consider all possible solutions during the planning phase of your project.

As you can see, something as seemingly simple as a scaling background image can actually be quite complex. We’ve found it important to have discussions regarding the pros and cons of scaling images early on in our process. This helps set expectations, clarify any potential pitfalls and point out the best solution well before we move into development.