08. The Image Issue
HTML typography superimposed over a background image.
Images play an important part in email marketing, particularly in sectors dependant on photography to sell their proposition, such as online and retail fashion. It’s very tempting when you’re designing and developing emails for those sectors, that typically feature a large proportion of images, to embed typography within them, and a challenge to implement HTML typography.
In this issue, I’ll look at where and how you can integrate HTML typography in and among your images – specifically in your navigation, in your hero image, in your product descriptions and prices, in your call to action and in your banners – and the benefits of doing so.
Navigation.
Build your navigation as a ‘bulletproof’ navigation, creating each tab from a text link, applying padding to each one to ensure its total area is selectable. Indicate to the subscriber that they’ve hovered over a tab by changing its appearance – its font color, text-decoration, background-color for example – or, as in this instance, by displaying a dotted border either side of it.
A ‘bulletproof’ navigation, with tabs styled to display a left-hand and right-hand dotted border when they’re hovered over.
HTML
<a class="tab" href="" target="_blank" style="font-family:Arial, sans-serif; font-size:15px; color:#ee0000; text-decoration:none; text-align:center; padding:10px 16px;">About</a>A tab created from a text link.
CSS
a.tab:hover {border-left:1px dotted #ee0000 !important; border-right:1px dotted #ee0000 !important;}HTML
<a class="tab" href="" target="_blank" style="font-family:Arial, sans-serif; font-size:15px; color:#ee0000; text-decoration:none; text-align:center; padding:10px 16px; border-left:1px solid #ffffff; border-right:1px solid #ffffff;">About</a>Styling a tab to display a left-hand and right-hand dotted border when it’s hovered over.
On mobile, stack your tabs above one another, in single or multiple columns, or within a hamburger menu. Alternatively, display only your most important tabs, hiding your least important ones by adding a class of hide inside their opening <a> tags, referencing it, and applying display:none !important; to it, inside the @media query you’ve created to trigger responsive styling.
CSS
@media screen and (max-device-width:375px), screen and (max-width:375px) {.hide {display:none !important;}
}
HTML
<a class="tab hide">Styling a tab to be hidden on mobile, utilising a @media query.
Benefits
- Navigation is displayed at all times
- As you’re not restricted to the fixed widths, heights and content of a set of images, you have the flexibility to resize and revise tabs
- Text can be resized easily
- Text is clear and legible
- Text can be read by a screen reader
Hero image.
Build your hero image as a responsive ‘bulletproof’ background image, superimposing your HTML typography over it. Apply a contrasting background colour, so that the text remains visible if the background image doesn’t display. A ‘bulletproof’ call to action can be inserted within the hero image area, and the background itself repositioned on tablet and mobile.
Entitees™ |
HTML typography superimposed over a ‘bulletproof’ background image.
CSS
@media screen and (max-device-width:575px), screen and (max-width:575px) {.hero {background-position:top !important;}
}
Styling a background image to be repositioned on tablet and mobile, utilising a @media query.
Benefits
- Hero image message is displayed at all times
- Hero image is not restricted to a fixed width and height, and can resize on tablet and mobile
- Text can be resized easily
- Text is clear and legible
- Hero image message can be read by a screen reader
Product descriptions and prices.
Style your product descriptions and prices so that they’re distinct from one another, using font-size, color, font-weight, or a combination, for example, and position them close enough to one another to create a touch area of at least 44px square. Indicate to the subscriber that they’ve hovered over a product description or price, by changing its appearance.
Entitees™
Benefits
- Product descriptions and prices are displayed at all times
- Product descriptions and prices can be revised quickly in response to market conditions
- Products can be searched for within an email client
- Text can be resized easily
- Text is clear and legible
- Product descriptions and prices can be read by a screen reader
Call to action.
Build your call to action as a ‘bulletproof’ button, which can be selected across its total area – not just where the text sits.
Benefits
- The call to action is displayed at all times, so the subscriber clearly understands how to interact with the email, and what to expect when they do
- The call to action can be revised quickly
- Text can be resized easily
- Text is clear and legible
- The call to action can be read by a screen reader
Banners.
Superimpose your HTML typography over a ‘bulletproof’ background image. Ensure that the call to action is ‘bulletproof’. As with your hero image, build your banners so that they’re responsive.
Entitees™ |
Banner featuring a ‘bulletproof’ background image and a ‘bulletproof’ call to action.
Benefits
- Banners are not restricted to a fixed width and height, and can resize on tablet and mobile
- Text is clear and legible
- The text and call to action can be read by a screen reader
Finally…
Finally, here’s a few guidelines to keep in mind throughout your email design and development process.
1. Where there’s text, use HTML typography
Wherever there’s text in your email, use HTML typography. In some instances, this can be straightforward, while in others (when you want to superimpose text over an image for example), it’s not so easy. Nevertheless, your aim should be to ensure that the email’s message and its call to action are displayed without relying on images.
2. ‘Images off’ test
Test your email during and following the development process, to see how effectively it communicate its message without the use of images, and so that you understand how your subscribers will experience it if their data connection is poor, or they’ve chosen to turn images off within their email client.
If your images are stored locally, copy your HTML email document onto your desktop, and open it within your browser. If your images are hosted on a server, turn off your data and WiFi, and open your email within your browser. Both Litmus and Email on Acid also allow you to view your email with and without images, by toggling between the two.
As you’ve seen in this issue, developing emails that integrate HTML typography in and among your images does require an investment of time and effort in the short-term. The benefits, however, as you’ve also seen, are worthwhile in the long-term. ■
Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions. Thank you for subscribing!