Chrome plugins to improve your email testing
You wouldn’t display a blurry image on a 48-sheet billboard, so why settle for anything less in email? Different email client’s rendering capabilities make consistency across all clients difficult. In addition to this, the use of all images is against everything we believe in from an accessibility point of view. For us testing is a fundamental part of building emails, and it is everyone’s responsibility to make sure our emails are as good as they can be.
You don’t have to be a developer to test emails. Here’s a selection of Chrome browser plugins to improve your email testing that we find useful:
Using these plugins, we can test:
Consistent Padding
Because of the way emails are built it’s very easy for extra padding to appear in build. While we try to avoid this, it’s worth checking spacing throughout an email is consistent. Use ‘BetterRuler’ to check that the space between imagery and copy is consistent throughout.
Correct Colours
There are loads of reasons why images or colours used in emails might not be correct. Double-check the colours match the client’s brand guidelines or website using the ‘Color Picker Eyedropper Tool’.
Colour Contrast
If there’s copy over the top of another colour and it looks difficult to read, use this online tool to check the contrast of the foreground colour (the copy) and the background colour: https://webaim.org/resources/contrastchecker/
Use the ‘Color Picker Eyedropper Tool’ to extract the hex code value (the one that starts with #) and paste those values into the ‘Webaim tool’ in the link above. This isn’t an exact science but is a good guide; Ideally ‘Normal text’ and ‘Live text’ should be displayed as ‘pass’, as a minimum.
Image Sizes
We always aim to keep the file size of images as small as possible while maintaining their quality – this is especially important for retina devices. Use the ‘View Image Info properties’ plugin to check image sizes. As a rough guide, header images should be less than 200KB and images within the body of the email are around 120KB. This isn’t an exact science, and we’ll often save out images to be larger where required, however we always try to keep individual images under 1MB.
Alt Text
Alt text provides an important accessibility feature for some users. It’s something we take really seriously.
Use the ‘Web developer’ plugin to check alt text.
Check the copy is correct by selecting ‘images > display alt attributes’. Alt text will be displayed next to the images.
Check the styled alt text is correct by turning images off using: ‘images > replace images’ with alt attributes. Make sure any copy on a black background is styled white and that the hierarchy of sizes is correct. It’s also good to highlight the whole email to make sure that there’s no alt text that’s the same colour as the background.
Validation
Use ‘Tools > Validate HTML’ in the ‘Web developer’ plugin. Validation checks that the code is written semantically. Any errors for tracking tags and aria labels can be ignored but keep an eye out for anything related to omitted tags.
Fonts
We embed brand fonts (where possible) into emails. If it’s intended to use the client’s brand font, use the ‘Whatfont’ extension to check that the correct fonts are being used by hovering over copy.
An aid to testing
These plugins are meant to aid testing and are not meant to be a replacement for any other types of checks. For example, a copywriter uses Word to perform a quick spelling and punctuation check whilst reviewing all emails. They ‘copy and paste’ all the copy into Word (making sure the language is set correctly), and Word will underline anything it thinks is wrong. Whilst useful, this isn’t a replacement for reading through the email and checking it properly.
Here’s to us all creating better emails.
If you’re in need of some help to optimise CRM & email marketing for your brand, get in touch.
