Email designers have many techniques to enhance a campaign at their disposal. Visuals such as animated GIFs and gorgeous typography seem to be all the rage in emails today. But one simple design technique that has been around for years can go a long way when it comes to grabbing users’ attention: background images.
Background images are the foundational base of email design. Unlike hero images, which are often the focal point of an email, background images are complimentary to the design and layout. Don’t let their subtlety fool you. Background imagery is an integral part of email design and can pull your graphic elements together.
Perhaps the greatest benefit of using background images is that they give designers the freedom to place additional HTML content on top; think wallpaper with photos and artwork hung on top of it. The layering possibilities allow designers to pack more into a smaller space.
The technical upside of using background images rather than regular images is that HTML content on top of background images remains visible, even when images are disabled. But there’s more: background images aren’t always static. Animated GIFs can be used for the image, which can add a subtle or loud touch to otherwise still emails.
Ready to code?
Before jumping into specific campaigns, email designers should cultivate a library of background images. Start simple and work your way up to something more colorful and bold. Background imagery should enhance your content, not replace it. When designing these images, graphic elements such as patterns and textures can make for an eye-catching base without distracting from other information.
However, when using background imagery, you must consider how it will display on email clients and mobile devices. Background images don’t have equal support with every one of your email recipients depending on their individual technology.
Images that are too large can slow down email load times and compromise data plans, so all imagery should be sized for mobile use. Additionally, background images scale down on mobile devices, so it’s important to keep key information in an email as live HTML text so it remains visible even when images are disabled.
For clients that don’t support background images, you should include a background-color property with a color that contrasts the layered HTML content to ensure that your message is readable.
When designing your next email template, think about adding a little something extra to the background and see if it doesn’t give your campaign a lift. Let ResponseGenius help take your email marketing to the next level – hello@responsegenius.com
