We’ve all been to the site designed with the unexpected music that plays automatically while clipart icons dance across the bottom of the screen, the site with the crazy background that reminds you of a magic eye drawing and, of course, the site with a dark background and reverse color text. What all of these sites haven’t taken in to account is the user experience. Answer these five questions before you decide to add a background image to your website.
A background image should never hinder a reader’s experience, so be wary of colorful or darker contrasts as that affects the readability of your site. The last thing you want is for a potential lead to leave your site because of a distracting background (music or image)—always aim for the content of your site to be the primary aspect.
Some backgrounds can emphasize the nature of your business without distracting the reader; for example, a gardening website might use a dark-dirt background on the footer portion of the site, or an interior decorating company might use a textured background that resembles paint. So take a quick polling of your current customers, if they remember the background of your site more than your latest blog post—then your background could be distracting, not effective.
Almost as important as keeping the reader focused on content is also not ostracizing them with a background that may not apply. If you find a clothing site with a background image full of people outside your age demographic, you’ll likely feel like you don’t fit in and shouldn’t be purchasing clothing from that store (otherwise you’re the woman I see in the grocery store every Sunday in leopard print). Don’t make the marketing mistake of not understanding your target audience, but balance that with knowing that the more neutral the large background on your site, the less likely a user will click off without going further.
Absolutely.
The larger the background image, the more space it will take up on your site and, more importantly, the longer it could take for the user to see it as it downloads (depending on their connection speed). The quickest way to lose your potential lead is by having your website look broken. A half-way downloaded background image will accomplish this, so choose your image, quality and file sizes carefully. Test on multiple devices and browsers to ensure consistent load times.
You've probably seen this done different ways for different reasons. Just remember that all of your text should be readable over the background, so any transparencies might sit better if the background is anchored to the top. If you're background is an interior room setting, or an exterior landscape setting—try to keep it anchored according to normal conventions—i.e. the sky should stay on the top, and the floor on the bottom.
You should know from your analytics whether users are viewing your site on a mobile device versus a desktop computer. But that doesn't tell you the size of everyone's monitor. If you're using a repeating background—this usually won't apply because it will expand/contract depending on monitor size anyway. Going from a large, unique image to plain white or light grey is generally user-accepted on smaller devices, like smart phones. But on tablets or laptop screens, users still like to see the entire site. Consider using different variations of your background by using different break points for max-width. You can read more about responsive design resources here.
Ultimately, no matter what kind of background image you use, make sure that it stays just that: a background. Keep your reader focused on your content; don't distract them with flashy pieces that aren't going to help guide them through the sales funnel. As is often said: Keep it simple.
What are some websites that you think are using background images well?
| Follow @maddieweber |
| Follow @Kuno |
photo credit: Vatsek
