Sample email: Patagonia

Because this Patagonia email is the very example of a successful one-column email design. This special formatting makes it much easier to resize on the move. (mobiles and smartphones) The blocks remain in the same order, with an identical path, whether viewed on a desktop or mobile screen.

At the same time, this means a little less work for the designer, who can then concentrate on a single mock-up of the email, even if, of course, other modifications can be made to the mobile version.

But that's not all!

• The visuals are very aesthetic. Granted, it's not a job specific to emailing. But it contributes to the quality of the campaign's overall design. Patagonia's iconography is a real work of art, in every email, creating a mood and drawing the reader in.
• The buttons are in HTML, with technical work in CSS for a sober, but very clean rendering.
• The information hierarchy is perfectwith pronounced differences in the size and formatting of the different levels of titles and text.
• I really like the graphic transition at the bottom: it's light and finishes off the email nicely, with a difference in formatting (no background color) but continuity in the width of the blocks above.
  
• I appreciate the insertion of a link to an article at the bottom of the email: and why not, after all? It's perfectly possible to position an article or the promotion of a particular subject in an email promoting a new collection - it's not incompatible!
• The alternative texts are entered correctly and by that I mean as alternative texts should be filled in an email to fulfill their accessibility vocation. For example, the text in the cover image : "Patagonia. Two people jump off icebergs into an alpine lake."

On the other hand, there are a few areas for improvement...

• I find it hard to understand why titles are not provided in HTML and CSS. Why do I insist on this? Not only because it's always better, when you open an email, for the content to be displayed instantly without having to download the images to display them. But also because in Dark Mode, the rendering is not necessarily the cleanest. (although, frankly, I'm nitpicking and it's a detail).
  
• This problem of text in images can also be found on product titles. The unfortunate thing is that plain background colors, which would enable HTML text design and automatic color conversion... Maybe that's what you don't want: to have a different gray between the product text background and the product background. But then, why not insert products with transparent png backgrounds? I ask!
• Texts are too small on the mobile version: in my opinion, it's better to enlarge paragraph texts on the mobile version of an email. (and potentially reduce the size of titles).
• The contrast between the background color and the color of the paragraph and button in the "News" block is not sufficient: perhaps a lighter text should be chosen to accentuate the contrast? What's more, legibility is clearly not optimal either when text as long as this paragraph is entirely centered. So to speak: "Above three or four lines, you won't center your text..."
• I'm surprised to see fixed widths with class and media queries, and don't find instead spongy code email developmentmade of max-width and ghost tables for Outlook, because this type of design would undoubtedly allow this method of HTML integration.
• The "Read Yvon's letter" link at the very bottom of the email is an image, whereas it could have been designed in HTML with much the same formatting without any problem!
• In the HTML code, I've spotted several tags with the attribute lang whose value is in. Yes, but the content of the email (and the recipient) are French!
• He lacks the use of semantic tags (, <p>...) to optimize accessibility and text reading by a screen reader.