Email Creatives (Standard)

B2C, Retail / Ecommerce
Content, Covid-19, Design

Target

Instagram Style Grid Design Layout – COVID-19 Content Pivot

Desktop

Mobile

What we like about this email

In this example of a more Instagram grid styled design, Target use an unusual layout to stand out from the crowd – with a three-column layout consisting of one ½ email size image and 2 ¼ size email images in a block row. The theme of the email is COVID-19 stay at home related and on message for the timing; offering business and pleasure electronic purchase options. They have cleverly matched the colours on images in each section to clearly define each offer, with a headline banner in between each to break them up and offer a subheading introduction and various offers.

Although there aren’t any obvious CTA buttons, each product name is linked and identified with a > symbol.

There is a short header navigation menu used at the start of the email and a longer footer menu to offer additional options.

Within the footer, there is also a ‘Subscribe’ option, to allow anyone who has been forwarded the message, an easy way to subsequently join the list themselves.

Accessibility Results

Some of the tables in this email do not feature ‘presentation’ roles set for screenreaders: Adding a ‘presentation’ role to tables tells a screen reader to skip reading the code that creates a table and only read the customer-facing text.

General Tips:

Ensure a good colour contrast ratio with text on background colours so that they are readable for those with visual impairments or colour blindness. Web Content Accessibility Guidelines (WCAG) 2.0 recommend a contrast ratio of 4.5:1 between colours for body content and 3:1 ratio for bolded text larger than 18px or 23px without a bold.
Include a mix of bulletproof buttons and text links that are clearly defined using colour and underline features
Ensure all images have descriptive Alt text: Alt text allows you to describe images to users with visual impairments; screen readers can read the alt text to give details about the campaign. For images that don’t need text, simply add a blank alt attribute to ensure screen readers do not read the image’s URL path.
Be sure to remove ‘title’ attributes from images: A title attribute gives additional information about elements in your email, such as a tooltip that appears when a user hovers over part of an email. To improve accessibility, you should avoid using title attributes. They will disrupt the order in which screen readers read content. Instead, consider using alt text to describe an element.

Results supplied by Email on Acid

Rendering Testing