Promotional email redesign and best design practices

There's so much to be done to optimize graphic and editorial design of email communicationsI assure you... In fact, a short while ago, I published analysis of a promotional email of the Nantes-based company Beemspecializing in the construction of solar panels. Analyzing and criticizing are all well and good, but while we're at it, we might as well make it constructive! And you're getting to know me, I don't like to stop there.

The decision was made to redesign this promotional email for its own sake! I won't inflict on you the litany of existing positive points and areas for improvement. I'll leave you to read the example in question. But let me remind you of the current rendering.

I'll tell you what's going to be applied:

Editorial work, better structuring of elements and highlighting of data

• From now on, zero spelling mistakes. It's non-negotiable. 🙂
• Inserting a banner "-27% reduction " under the logo, more quickly emphasizing the urgency and deadline of the offer, without going through countdowns and the risks they generate with the caching of email images.
• Raise the new price and the crossed-out price. Ditto for the promo code, now identified as such.
• Addition of a caption below the product visual, both to specify the product and avoid confusion, and for the purposes of email accessibility issues.
• Addition of "Savings and profitability" data below the product visual, as conversion arguments.
• Removal of product visual on blue background (with textual information included in the image) which simply repeats the content of the text above.
• More enriched communication, with additional product information installation, connection, ballasting...
• Creation of a module dedicated to the app: knowing that an application exists to control this type of production remotely, personally, reassures me and makes my day.
• Last but not least, three light texts at the end of the email to emphasize the sustainable and ecological aspects of the product AND the brand.

A major graphic redesign in this promotional email

• Original logo color retained, for consistency between website and email.
• A logo now split into two parts: the sun, which could be designed as an svg (as long as a backup version is available). And I take the initiative of designing the logo text in Arial typography, for immediate display of all or part of the logo, without the need to download images. The rendering degradation is not major, but the user experience is improved.
• ALL texts now designed in HTML and formatted in CSS. Without exception. Via typography Playfair Display for titles, and Arial for the rest.
• A hierarchy of elements much more pronounced: main title, subtitles, prices, crossed-out prices, promo codes, calls to action, tags, captions... Each element has its own layout!
• Product visual in PNG format with transparent background for natural adaptation of the background in Dark Mode.

Optimized accessibility and eco-design thinking

• Addition of unsubscribe and mirror links in the header.
• A logo half designed in text, as explained above.
• Marked contrasts between foreground and background colors.
• No text size below 16px: for a better readability.
• From more explicit texts for calls to action, now designed entirely in HTML and formatted using CSS.
• Mention of social networks via text rather than pictograms The aim is to reduce the number of resources called up as much as possible.
• Formatting graphic elements (separators, color gradients, rounded corners, "+" bullets, tags on orange background, promo code...). in HTML and CSS. Always with the aim of reduce the need for external images.
• All the visuals will be optimized for weight by choosing not only the format (jpeg, png, gif, svg) and size, but also by compressing them as much as possible, while of course maintaining sufficient quality.
• What's more, the new blocks now created could be part of a larger project to start Design System Emailfor regular use, and therefore a saves production time AND energy.
• Semantic tags (<h1>, <h2>, <p>...) will be used to optimize HTML code accessibility.
• The draft of this new layout leads me to believe that it would then be possible to do away with the need to send a reminder and reduce commercial pressure.
• Note: The Playfair Display typeface, now used for titles, is a Google Font: I'm inclined to recommend limiting the use of external resources, but this is the only little "kiff" I allow myself. Guilty as charged.

Want to see what it could be like? Too much suspense? Check out the final result.

To view the mobile version of the email, use the "right arrow" on your keyboard.

What about the code?

I'm not going to lie to you, I haven't taken the time to develop the HTML code redesign for this promotional email (yet). Shame on me! I'll give myself 50 lashes tonight. But here's what I have in mind:

• Developing email using the Spongy methodto guarantee a mobile version of the email, even when media queries are not supported. Add some media queries (and therefore switch to a Hybrid method) to further optimize the rendering of the mobile version on opening environments that support them.
• Creating the hero background gradient in CSSto avoid calling up background images or, worse still, designing the hero as an image. So yes! support won't be guaranteed on all opening environments, but would the rendering and comprehension of information be degraded if a plain background color were to take over? I don't think so.
• In my wildest dreams, I'd like to offer a panorama" version of the product visual with a 3D view on mouse-over. But if I'm going to be true to my eco-design philosophy, I think I'd better do something about it...

What do you think? Let's hear it!