Let's Talk
Tall, full-width page headers, commonly referred to as 'hero' sections, are ubiquitous on modern landing pages. The appeal is easy to understand; when executed well these layouts are roomy and visually rich, offering generous whitespace and an easily traversed visual hierarchy. They occupy prime real-estate, offering content creators the chance to make a compelling first impression and frame visitors’ experience on the site. These sections are flexible to boot! Since the header area is generally isolated from other elements on the page, it can be can treated as a sandboxed showcase for timely messaging. Content can swap out to meet the changing needs of new campaigns and communications efforts.
Despite these strengths, hero section layouts are often a challenge to implement well. The same low visual density that makes hero sections rapidly scannable pushes content with higher information density further down the page. Rich media files dramatically impact load times and rendering speeds, and increased page length forces users to swipe or scroll to get to subsequent content. A full width, full-height (in design jargon, 'full-bleed') header area can easily become a barrier to task completion, frustrating goal oriented and returning visitors. While there are no hard and fast rules for these sections, here are some considerations that will help point you toward successful, user-centric designs.
Performance matters
There's no way around the fact that large photo and video files demand significant resources to download and render. While following best practices for compression can offer significant performance gains, a single well-optimized full-bleed image can still easily exceed the combined size of all other elements on a landing page. Video is even more of a resource hog, with these files often weighing an order of magnitude more than the rest of the page. Since these files are loaded above the fold, any delays in delivery and rendering are painfully visible.
Keep things moving
Placing overly dense compositions or interactive content in hero areas is something of an anti-pattern. One recent survey of scrolling behavior suggests that highest engagement occurs almost 1200 pixels from the top of the page. Since many users are primed to move quickly through these sections, your best bet is often to work within their expectations. Aim to communicate your message quickly and succinctly, then smoothly flow into the content below. Avoid interactive elements such as carousels that require users to remain above the fold. Keep copy concise and direct, and ensure that any calls to action are unambiguous and benefits-focused.
Don't embed text
While flattening your text into the background image itself gives designers granular control over typesetting, this comes at the expense of universal accessibility and SEO. Doing this will render text invisible to search engines and screen readers, and eliminate it from view entirely if the image fails to load.
Think strategically about composition
Art directing for these flexible spaces requires careful consideration of composition and framing. Newer responsive image technologies such as srcset and <picture> provide powerful tools for controlling presentation across different screen sizes, but these still require extensive hand-tuning to fully realize their potential. When crafting these assets aim to establish a generous safe area for your text. Test against both portrait and landscape orientation, and be prepared to work up fallback treatments to account for responsive device edge cases.
Plan for high contrast
Make sure your message doesn't (literally) get lost due to insufficient separation between text and background. Plan for adequate contrast when picking images, and make sure that your text will be able to stand out from its background. When working with a CMS, this usually means knowing in advance that you will consistently be using high-key (bright) or low-key (dark) visuals in a given space. A commonly used technique is to place a semi-opaque overlay on top of the background image. While this can aid legibility, it often comes at the expense of the vibrancy and clarity of the background image. Achieving this overlay effect in the browser also creates an added performance hit that impacts slower, older devices.
Don’t forget texture
Texture is another valuable tool for adding separation between text and background. Photos shot with a shallow depth of field and smooth, out of focus areas can make the sharp edges of headline text stand out. This effect can be faked using photoshop or similar postprocessing tools, but generally feels most natural when accomplished in-camera. Another option is to overlay a film grain texture. Doing this will create a visually neutral base layer that can help text punch through. It's generally best to avoid images with shapes that are highly similar in size and proportion to your letterforms (think skyscraper facades or highly geometric patterns).
Make video accessible
Video can be an extremely powerful tool for engaging users, but beyond the aforementioned performance costs, it introduces accessibility concerns that should be planned for. A small but significant portion of your audience is motion sensitive, and for these users, text layered over moving images can invoke nausea, dizziness and discomfort. Some estimates place the number of affected adults as high as 35%! This same concern applies to parallax scrolling designs. That isn't to say that motion in these sections is entirely out of the question. By avoiding rapid changes in what's being presented such as fast pans or jump cuts you can help mitigate against these risks.
Think about less common treatments for this section
Depending on your brand's identity and the visual language of your site, it’s often worth considering alternatives to photo and video backgrounds. Illustrated elements delivered as SVG graphics are highly performant and enjoy broad cross-browser support. These vector based image files are tiny when compared to similarly sized photos, and are extremely easy to scale and restyle across devices and screen sizes. Purely typographic treatments are another underutilized option for these sections. They can act as a unifying showcase for your brand's typography and colors, definitively establishing visual patterns that can be carried throughout the page.
Consider static content
Depending on your budget and marketing needs, treating these sections as static content not directly editable through your CMS can open up an array of design tools and techniques that would otherwise be off limits. This trade-off in flexibility allows for complex, bespoke layouts that can be polished to perfection.
Don't overdo it
The impact of large, lush hero sections drops off quickly when they are employed too frequently. Content-dense pages are generally poor candidates for this layout pattern. Carefully consider the needs and goals of your audience, and make sure that this is a net win for them. It can be helpful to think about performance not just in terms of delivery and rendering times, but in the larger context of time to task completion.