Responsive Banners for Website Design: Difficulties and Best Practices
December 6, 2019
Whether you are a marketer, developer, or a designer, at some point you have run into responsive issues with banner images. As a developer who mostly develops on the HubSpot platform, this is the single most common issue that I have to frequently explain to clients.
A common question asked by clients wanting to update their website is: “What is the proper aspect ratio for banner images on my website?” This is a complicated question that depends on many attributes of the banner, such as whether the banner has text overlayed on it, whether there are lifestyle images in the background, and the size of the text on the page.
Banner Images with Text Overlay
For many website or landing pages, having a text overlay on the banner is the most appropriate choice for a handful of reasons.
First, using actual text that Google can search and index is a prime way to have an H1 above the fold. Text that is part of the banner image won’t have any SEO value and may run into responsive design issues, with the text being cut off at various widths.
Banner images commonly use a CSS declaration called “cover” that constantly adjusts the background image to fit the banner container as best as possible. However, this leaves room for variation and inconsistencies in how the image renders at different heights.
When choosing images for banners with text overlays, there are three important components to consider:
- A generic pattern is often the best course you can take when it comes to background banner images. Images that are more generic can have their edges cut off on smaller screens without negatively affecting the design aesthetic.
- The developer should put a banner overlay between the text and the background image. This is often a translucent black or colored layer that allows the text to be readable regardless of what color image is in the background.
- Do not use lifestyle images (images of people) as a general rule of thumb. It’s awkward to have text covering somebody’s face. In reference to rule one, it will be even more awkward when that person’s face gets cut off on a smaller screen.
Below is an example of a lifestyle image with text overlay getting cut off at specific widths because faces are too close to the edge.
Banner Images with Text in the Background
One item to keep in mind when it comes to text on a banner image is that, as the image proportionally shrinks down to fit small screens such as a phone, the text will also shrink and may become illegible due to its small size. When using text in a banner image, it’s best practice to only use large headlines that won’t shrink to an unreadable size—and it’s even better to use overlaid text so a developer can set custom sizes for various devices and browser widths.
Below is an example of a banner that uses text in the background that doesn’t scale aspect ratio well:
Whether you are a marketer, developer, or designer, understanding the dynamics of how background banner images work will ensure that, when you’re making changes to a site or picking out images for banners, you are able to pick them in a way that will ensure they render correctly on all devices. Although the above list of options is not exhaustive, it provides a good roadmap for the vast majority of use cases to make sure that you don’t need a developer to update your website with each image change.
Any combination of images and text can be possible for your website if you have an active developer able to make a completely custom solution. However, as many marketers can attest, they love harnessing the ability to easily create future-proofed website and landing pages without ever needing somebody to dig into code.
About the author
Evan Futterman was formerly the Director of Development at SmartBug. With a Business degree in Computer Information Systems, Evan has both the technical and business knowledge to deliver the quality SmartBug Media clients expect. When not doing web development he can usually be found outside exploring the outdoors. Read more articles by Evan Futterman.