To denounce bad business practices email design and also to annoy my colleague Olivier, who I know is an avid climber and other outdoor enthusiasts. SAIS that you probably would have liked to have taken care of it, friend, no hard feelings!
I'll start with the email design...
I like it. I like it a lot. It's sober, uncluttered, aesthetic at the same time. It breathes. There aren't too many typefaces, and they're all very simple. websafe fonts or system fonts (Arial and Georgia). In any case, it gives that impression. The graphic codes of the medium are fully respected, with the relevant color codes. The visuals are beautiful, immersion is guaranteed, all that and more... In short, it's all very nice, but are there any points that could be optimized? WELL, YES, SIR!
- The header, including the "Subscribe" button, the "Outside" logo and the menu, is in fact a large image. Arrrrrrgggghhh! If I were listening to myself, I'd design the "Subscribe" button in HTML and CSS with a background color and rounded corners in
border-radius(and too bad if rounded corners appear square on some opening environments)The menu tabs would of course be HTML text: not only so that they could be easily modified, but also so that they would be displayed as soon as the e-mail was opened, without having to download the images. And I'd even go so far as to try and reproduce the "Outside" logo in text with CSS formatting: nothing too complex, a little drop shadow that won't be displayed everywhere either, nothing too dramatic. All this to say that if I open the email without having displayed the images, the top of the email is quite empty! And that's not even mentioning the rendering on cell phones. (it's the same image, but resized... The menu tabs are very, very, very small...) - Article titles are images, too. What a shame! Outside, if you're looking for exactly the same rendering as on your site, you should know that emailing is a very specific field, where it's better to think in terms of user experience than pixel-perfect rendering. So for titles, you can either call the police force you want if it is hosted on your side (accepting that it may not be supported everywhere)or call up a Google Font that's close in terms of rendering (accepting that it may not be supported everywhere)or call a websafe do like Georgia (which is in fact the substitute typeface on your site). IN ALL CASES, TITLES MUST BE IN HTML! 🙂
- As you can imagine, if the titles are in images, so are the yellow separators underneath. And you're not wrong. But there's nothing complex about coding them in HTML and CSS.
- Apart from that, I'm reassured to see that the article texts and buttons are in HTML. Phew!
I'll continue with the code...
- A lot of code. Too much code. And I'm seeing signs that the whole thing has been produced using the mjml framework. The problem is that this type of framework develops a lot of code, even for the simplest elements. Let's take our large header image: for the image alone, we have thirty lines of code, comprising 4 nested HTML tables. This is far too much for a simple image. And of course, with CSS reset galore (
font-size,padding,padding-bottom,padding-top,padding-right,padding-left,word-break...). I don't think I'm taking too much of a risk in saying that it would probably be possible to reduce the final weight of the HTML file by at least 1/3 with a hand-made template.and rolled under the armpits. - The Fluid technique used to code this email is interesting (with
max-width). However, the mobile version doesn't adapt at all as it should. Could this be due to the fixed widths indicated on the visuals? But that's as far as I'm going to go: given that no mirror page exists, I've recovered the code from my opening environment. There's no indication that any elements have been deleted or modified...
And I'll finish with the content.
- Where is the mirror page link from?
- The texts of the articles are a little too long in my opinion, which makes the newsletter particularly long, too. I'd opt for slightly shorter texts, concentrating on the main information, to encourage people to click on the associated button. This is the case on the article "Will Alex Honnold ever tackle Everest... even though he hates mountaineering?"
- The article buttons are slightly redundant... " Read more "can do better, I'd say! We alternate on the writing of these calls to action, to make people want to go and read the whole article on the site, or discover other content.
- People sensitive to ecological or environmental causes have, in my mind, a strong sense of community and, at the same time, a spirit of sharing and altruism: in one way or another, it would be relevant to offer more sharing opportunities, on articles or on the newsletter. Via newsletter transfer to mailto for example? Or by inserting sharing links on personalized social networks?
- Finally, why not take advantage of the newsletter to remind everyone of Outside's commitments? Like, for example, their participation in the "1% for the Planet" movement? A little insert at the bottom of the newsletter, it doesn't eat bread (I love that expression, it makes me hungry) and it does the job!