We have moved.

Don’t worry, we’ll still be posting. But at the new and improved site. Here: http://team-email.co.uk/

Advertisements

24 hours of code

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.

13 must read email blogs

Staying 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.

After 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

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

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:

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

Here 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