![]() It won’t render inline CSS or the deprecated HTML background attribute, and applying VML will cause rendering issues with an ‘image can’t be displayed’ error message.īut fear not! If you are concerned about the experience your Windows 10 and Windows 11 Mail subscribers are getting, you have a few options. The bad news: Unfortunately, background images don’t work well for Windows 10 and Windows 11 Mail. The good news: over the years, support for inline background CSS has improved, so background HTML attribute is no longer required aswebmail clients now fully support this method. How to code background images in emailīefore I walk through the code, let’s see which clients will render background CSS styling and which ones need the help of a VML fallback. Be sure to choose a fallback color that matches your design and contrasts well with its foreground elements. Subscribers using email clients that won’t support your imagery can still have a great experience with a solid color. Solid color fallbackĪs not all email clients will honor background imagery, design a solid color fallback. So it’s often helpful to consider your background image as an enhancement rather than a feature. Busy backgrounds can make it hard to get the value of any live text you place on your image. SimplicityĪnother way to ensure readability is to keep things simple. There are also a number of web apps, like WebAim’s Contrast Checker, where you can test the colors in your designs. If you design using Figma, you can add plugins like Color Blind and Contrast to see whether you are meeting Web Content Accessibility Guidelines (WCAG). Treat the image in much the same way as you would a flat color, and test the colors in your image against the colors of your content. To ensure all readers get the value of content overlaid on background imagery, it’s important to be mindful of contrasts. When thinking about implementing background imagery, there are some design considerations worth taking into account. Source: Really Good Emails Design considerations Miro placed a background image containing shapes behind their hero section, drawing attention to the email’s main headline and messaging, which is overlaid using live text. 5 creative examples of brands using background images ![]() Īside from helping to create campaigns that provide a better reading experience, background images also offer a wealth of design possibilities, setting your campaign apart from the competition. Plus, by using live HTML text on top of a background image, (versus a flattened image with text already on it), your message is readable when images are turned off, making this a great technique for creating better, more accessible HTML emails. Unlike other images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or calls-to-action (CTAs) existing within that same space. The major benefit of using background images is they allow you to place additional HTML content on top of them. What are background images? (And what’s the point?)īackground images are images that are applied to the background of, or behind, an element. 5 creative examples of brands using background images. ![]() One way to liven up the subscriber experience? Background images! They add another dimension to your design, making your emails “pop.” When done well, they make your email feel like a million bucks. Emails can feel a bit predictable with an image here, a block of text there. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |