Don’t worry, we’ll still be posting. But at the new and improved site. Here: http://team-email.co.uk/
24 hours of code
StandardHi 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.
13 must read email blogs
StandardStaying up to date with the cool new technology, getting inspired by what other people are doing, and venting about our latest bug grievances is part of what makes us Email Marketers. There are a lot of blogs I read but here are a few I’ve picked that are worth reading and subscribing too.
It’s worth noting that these are in no particular order!
Campaign Monitor
Maintained by the Campaign Monitor team this blog features design inspiration, new technology and constant testing of devices.
Litmus
Litmus are what I consider the “face of email” and my god, do I love their blog. Constantly updated with awesome posts.
Email on Acid
I don’t see the Email on Acid blog getting enough love, some great topics are discussed there on a wide variety of email bits.
Email Under the Microscope
Another slightly lesser known blog. This is Mike Ragan‘s blog and it’s well worth a read. After meeting him at The Email Design Conference, I can tell you this guy really knows his stuff.
Email Wizardry
Owned and maintained by Nicole Merlin, another person I had the pleasure of meeting at The Email Design Conference. This blog features some really great content, definitely check out The future of Media Queries for email.
RodriguezCommaJ
This blog by Jason Rodriguez, author of Modern HTML email, is one of my favourite blogs to read. He touches a lot on what’s pushing email forward. I fully recommend reading On The Cusp Of Craftsmanship.
MailChimp
Although I’m not the biggest fan of the way it’s set out, you can’t deny the quality content inside the MailChimp blog. They often divulge email stats from the millions of emails they send out too, which is really good for the industry in general.
Becs Rivett
Formally the Email Fail blog, Becs Rivett‘s blog focuses heavily on what people are doing wrong in email. It features a lot of hilarious fails as well as good tips to make sure they don’t creep into your campaigns.
Email Design Review
Run by email expert Elliot Ross, Email Design Review features a lot of hot email topics. It also features some really great email inspiration and cutting edge email case studies.
GetResponse
Ignoring the horrible light box when you first open it, GetResponse have been making a huge push into mobile emails. They’ve backed this up with some really great articles that are well researched.
ExactTarget
An awesome, regularly updated blog. They have a huge variety of authors including one of my favourite email minds, Chad White. Check out this great post: 5 Mobile-Aware Email Redesigns.
dotMailer
Another company blog that has the advantage of having a large variety of authors. I’m a big fan of this company in general but their blog is near the top of my daily reading list.
Matt Byrd
Only launched this week, I love this blog already. Matt is a natural writer (and rapper!) and you have to check out 14 GIFs explaining an email marketer’s life. You’ll find yourself nodding along the whole way through.
I’d love to hear your thoughts and favourite blogs, let me know what you think in the comments.
3 easy steps to speed up your email coding with Dreamweaver snippets.
StandardAfter attending and speaking at Litmus’s Email Design Conference 2013 (which was amazing, by the way!) I was shocked to find out that many people don’t know about utilising the snippet tool within Dreamweaver to speed up their coding.
Because of this, I’m going to write a quick step-by-step guide on how to set up and use snippets.
F.A.Q’s
What is a snippet?
A snippet is simply a piece of predefined code stored in your Dreamweaver
Why do they help?
You can assign a keyboard shortcut to a snippet. For example I press CMD+1 and I get a table inserted for me with 600% width and my media queries class already on it.
How much do they help?
They shave minutes off your builds. Minutes add up to hours, hours add up to beer!
What version of Dreamweaver are you using?
I’m using Dreamweaver CS5 on a Mac, hopefully this works on other versions and operating systems.
Step 1. Write your code
To set up a snippet you’ll need to write out the code you want the snippet to be. For the purpose of this example I’ll be setting up a new snippet for you to refer back to. This is the code I’ll be setting up a snippet for:
Step 2. Create the snippet
Now you have your code created, you’ll need to highlight all of it, right click and click “Create New Snippet”
This will open the Snippet interface, fill in details similar to these:
Once you click “Ok” it’s all set up! Yay!
Step 3. Assigning a keyboard shortcut
In your right Dreamweaver toolbar you should be able to see Snippets. If you can’t go to Window -> Snippets to show them.
Right click the snippet you just set up and click “Edit Keyboard Shortcuts” which will bring up the following box (see below).
Select the snippet you want to assign the keyboard shortcut to and then click inside the “Press Key” field. In there press the keyboard shortcut you want to use. I’ll be using CMD+4.
Note: As you see below, you may have a message below the press key field saying a snippet is set up. Dreamweaver has some by default.
Finished!
Now, press your keyboard shortcut and your code will pop up! If you have any questions, concerns or run into any issues let me know in the comment section.
Image swapping on mobile done easily
StandardJust 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
StandardThere’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:
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.
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.
Free email template: Flow
StandardHere we are! It’s been a bit of a wait but I’m releasing the second installment of the free email template series.
I’d like to reiterate that I’m not a designer; usually I only develop emails. That said, I do feel these templates are getting better.
I’ve pretentiously named this one “Flow” for absolutely no reason. The download comes with 3 colour variations and a Read Me text file. It’d mean a lot to me if people would be so kind as to share this page to gain exposure.
Download: Here
Preview: Here
Mobile preview: Here
Pret A Manger hits the spot with mobile email
StandardChecking 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

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.
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
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
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.
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
StandardHey 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)
Click here to see the mobile version
Click here to see the desktop version
So, you love email marketing?
StandardGuest 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.