24 hours of code

Standard

Hi guys! Yep – you read that title right, I’m going to be coding emails for 24 hours without stopping to raise money for charity. I’ll be live streaming the whole event.

What emails will you be making?

The emails I code will be pre-designed by the company I work for, Mosaic, and coded during the event. This is where I need your help.

The emails that are created will be created for anyone who wants one. All I ask for in return is a donation: it can be any amount. I am aiming to code 10 emails in the 24 hours and I need 9 more people/companies who need emails.

What you get for your donation?

  • A bespoke email designed by Mosaic and coded by me during the live stream.
  • The email set up in your existing email service provider or, if you don’t have one, will set your up in Mailchimp or a similar system.
  • I’ll teach you how to use your email template for future sends via Skype or Google Hangouts.
  • Ongoing support on your email.

If you are interested or know anyone who would be please get in touch at alex.ilhan@outlook.com

24 hours, you say – what are the rules?

Yep – 24 hours straight!  The rules:

  • I can stop only for bathroom breaks (the clock will be paused)
  • The whole event will be live streamed
  • I can stand up/walk around (still on live stream) occasionally.
  • I will stop coding occasionally to post small updates on Twitter.

Who are you raising money for?

I’m still looking for a suitable charity. Any suggestions will be greatly appreciated. I’ve emailed a few tech-based charities and I’m waiting for replies.

Will I be able to sponsor you?

Yep! Once I have the website for it set up you’ll be able to donate/sponsor me.

If you have any ideas for this event please get in touch at alex.ilhan@outlook.com – I’d appreciate anyone sharing this post on Social Media.

Image swapping on mobile done easily

Standard

Just a quick post, a way of changing images without much hassle.

This uses a CSS pseudo elements. We hide the desktop image and simply use the a:after pseudo element within the media queries.

Stick this into your media queries (Also have a method of hiding images on mobile)

#swap a:after {
content: url('mobile image link');
}

Add this to your HTML.

<span id="swap"><a href="##" style="text-decoration:none !important;"><img alt="alt tag" border="0" src="desktop image link" style="display: block" class="hide"></a></span>

I’ve only briefly tested this on iPhone, let me know how you all get on!

Hidden preheaders – save screen real estate

Standard

There’s been a lot of talk recently about mobile emails. Specifically subject line length, preheaders and how to leverage them both for maximum results. Subject line length varies across mobile devices, as highlighted in this excellent infographic from Mass Transmit, but the one thing that’s for sure is the amount of characters you can use is a lot less than a traditional desktop-orientated email.

This is where the power of the preheader comes in, it allows you to continue your subject line and provides you with an extra chance to entice readers into opening your email. Here’s a random snapshot of my mobile inbox and how five random emails have setup their preheaders:

Preheaders

The negative side to preheaders is the valuable real estate they take up on the screen. For this post I’m going to be using the free mobile optimised template I created as an example. Below is a side-by-side comparison to how both the desktop and mobile version of the email look with and without the preheader.

mobile-preheader

desktop-preheader

Although the difference isn’t huge, it still takes up screen real estate.

A workaround

So, if you would like to use preheaders as a continuation from your subject line but don’t want them taking up space, the solution is simple.

Add this to your area:

<style type="text/css">
span.preheader { display: none !important; }
</style>

And set your preheader up as this:

<span class="preheader" style="display:none !important;">Preheader text goes here</span>

This will hide your preheader inside the email on both desktop and mobile clients while still displaying in the inbox.

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.