Pret A Manger hits the spot with mobile email

Standard

Checking my emails religiously, as I always do, I noticed this nice little email from Pret A Manger. Here we’ll dissect it down and see how it fares.

The info

From: Pret A Manger
Subject: Give our monkey a moniker
Original email: Here
Litmus test: Here

First impressions
Pret inbox preview

Upon receiving this email the first thing I noticed was the subject line and the fact that I could read it all on my iPhone without it being cut off.  It also gets points for having a preheader that follows on to the subject line, ticking all the boxes so far. The subject line itself is a clever little teaser to entice people to open. There are hundreds upon hundreds of studies on subject lines out there that say different things about this, the one that stuck with me that had featured some nice examples was DJ Waldow’s latest book which, paraphrased, basically said that although this type of Subject line may increase opens it will likely have a negative impact on click throughs. This will always be up for debate so lets dive deeper into the email.

Next up, I opened it on my laptop so see how it rendered without images. Expecting the worst I was pleasantly surprised. As you can see below (click the image to view full email without images) it rendered well, still displaying the key parts of the email and allowing a reader to get the general gist of the email.
images_off
But wait – where’s the pre-header?! Upon further inspection I noticed that the trust-winning pre-header was actually hidden on both Desktop and Mobile. This was probably done so that in inbox’s you can read it and it helps to win a viewers trust, whereas inside the email it takes up valuable screen real-estate above the fold – interesting!

The design

You can see the full Desktop design here
the-design
While winning no awards for game-changing design this Pret email is simple and pleasing on the eye. It is consistent with their branding and other channels, most importantly consistent with their website. It uses colour well to guide your eyes to the calls to action and has a layout that generally guides the reader’s eyes down the page. The only major flaw I see in the design aspect of this email is that the Navigation Bar has been done as images rather than plain text. They have, however, countered this with excellent images off optimisation so we’ll let it slide this time!

You can see the full mobile version here
mobile
The first thing I noticed with this email is that most of the fold is dominated by the top navigation. If I were doing this email I would have hidden the top navigation bar and kept the bottom one (yep – they have two), allowing more content to be inside the first mobile screen.

As you scroll further down the email it renders well, the content falls nicely into place, aligned to the center and the font-size makes for nice reading.
mobile-design2
I would say that the text links on the mobile are slightly harder to tap than a button style call to action. But, again, this is only a very minor gripe.

The verdict

In a world where mobile email views are rising at a huge rate this email does a good job at managing to rendering well across the major email clients, with the exception of some spacing issues on Outlook 2013. It follows their brand/email in terms of design. Nicely done, Pret.

First Freebie Template

Standard

Hey guys!

As promised on Twitter earlier this week I have got a free email marketing template to give out today! It is not the most spectacular looking email as I’m not a designer, only a developer. However, I plan to give one of these out every week or fortnight depending on how busy I am so expect them to get stronger and stronger as I do more and more. I’ve also not built many templates for the general public so apologies if you get a bit muddled up with my some-what unconventional coding style.

This template is completely free to use, redistribute or do whatever you like with. All I ask is that if you do decide to redistribute don’t claim credit.

You can download the template here. It should render correctly across all major email platforms and is also responsive for mobile, if you have any issues with certain email clients write a comment at the bottom and I’ll assist you in any way I can.

It’s meant to be a basic welcome email template but can be adapted in any way.

Here’s how it looks (larger copies below)

Preview

Click here to see the mobile version
Click here to see the desktop version

So, you love email marketing?

Standard

Guest post by Brendan Jackson.

I recently started a brand new website to give a larger audience to the best HTML emails the web has to offer. When I was designing my first email, I struggled to find any really good sources of inspiration, especially ones where I could get my hands dirty and dig around in the code to see how other designers had achieved particular effects.

Newsletter-Examples.com is a resource for designers of HTML emails. Both novices and seasoned experts are welcomed and encouraged to join the conversation about the featured emails.

I add a new email to the site every day and try to vary the content as much as possible. Each email is categorised so designers can search for emails by industry, colour and number of columns.

I’m always looking for new submissions to feature on the site so if you’ve designed an email you think deserves a wider audience, I’d love to hear from you.

The trick to working background images.

Standard

Backgrounds and the issues with them

When I first started making emails I was told categorically that we can’t use background images. It just wasn’t possible. Until one day I stumbled upon this blog by Elliot Ross which shows you how to get full screen wallpaper style background images working in all clients.

Perfect right?! Wrong!

The issue then comes with Outlook 2007 and 2012 which both choose to add a 15 pixel piece of padding at the top of their emails. This means that when you create your beautiful background image that looks all lovely and jazzy your actual content will sit 15 pixels below the background image, potentially ruining the design like so:

Broken Background

A fix, you say?

There is, however, an easy way to work around this which only requires a little extra effort on your part!

When saving your background image, move it down 15 pixels and save a second copy. You then add this snippet of code into your head tag:


<!--[if gte mso 9]>
<style type="text/css">

body {

background-image: url('YOURLINK');
background-repeat: repeat-y no-repeat;
background-position: top left;
background-color: #HEXCODE;
background-attachment: scroll !important;
margin-top:0;
padding:0;

}
</style>
<![endif]-->

This will tell your email to open up the background with the 15 pixel “buffer” at the top if viewed in Outlook 2007 or 2010. You’ll also notice that we have to set it to repeat on the y axis. If you do not set this, your background image will not load. Now, here’s the picture with the email working as it should!

Working background image

Things to remember when picking a background image for your email

Test, test and test again! – Test it on email-testing software such as Litmus or Email on Acid. Test it with test emails. Get a colleague to test it. I can’t stress this point enough!

Play it simple – Simplicity can be beautiful, background images in emails work best with a small texture or basic graphic. If you start to design a fancy 3D background with all the works on it remember to think about issues such as. Will the user see this in all it’s glory on a smaller screen? How will this look in the preview pane? etc.

Loading times – Wow, that’s an amazing background! However, does it take 20 seconds to load? If so, you’re not onto a winner there.

In conclusion

I’d love to hear about your experiences with background images and your thoughts on any points I’ve raised. I will read and respond to all comments.

Welcome, welcome!

Standard

Welcome to the grand (sort of) opening of the Team Email blog! I hope you’ll follow it and benefit from it. Here you’ll find all kinds of tips, tricks, resources and sarcasm as we fight to tame the beast that is email marketing. We’ll do our best to keep this updated. Be sure to follow me on twitter too!