Let’s code email campaigns (1/6): Introduction
I’ve been involved in email marketing for years now; from designing, coding to cleaning customer lists, broadcasting campaigns and reporting, I’ve done it all.
With this 6 part tutorial I will show you how to develop a mobile responsive email template that will hopefully make you excited about your future campaigns.
You might wonder why would you need to develop email templates yourself when there are so many different email service providers with ready to go templates. You just drag and drop things, easy!
True…
For most of your campaigns WYSIWYG editor will be just fine. Some emails though, you will want to look in a way that using WYSIWYG might be quite challenging or impossible to do. Once you learn how to develop your own templates from scratch, you’ll see how easy and fast it is to build them. Personally I much prefer ‘hand coded’ templates because you have much more control over the email design.
What will you need to develop email templates?
- Html editor. There’s plenty of free ones like Brackets, Atom or Notepad++, any will do.
- Basic html/css knowledge or ability to understand more or less what is going on ;)
- Email service provider. In few parts of this tutorial I will be using Mailchimp but you can chose any other esp.
- GDPR compliant customer list (you NEED to make sure your customers gave you explicit consent to send them campaigns)
- Testing tool. Either have access to most popular email clients like Gmail, Yahoo Mail, Outlook + have ability to check emails on iphone and android phone OR you could use websites that test emails for you like Litmus or Inbox Inspector
- Image editor for creating banners. From free ones I can recommend Gimp or Canva
- Cup of tea and patience
Few things before we start:
- Compress your images. Every kb counts for email campaigns. There’s an awesome website tinyjpg.com that can help you with image compression.
- No javascript. You can’t use any scripts in your campaigns but html/css is fine.
- Code in tables, style inline. Everything has to be coded in tables. The only time we will use <div> is for mobile responsiveness. All styling has to be done inline because some email clients will strip styles in the head of the document.
- Not all styles work in each email client. Testing is super important! You also have to remember your emails will not look exactly the same in some email clients. Especially Outlook likes to disagree with a lot of things you will try to achieve.
- Know your subscribers. Check what email clients they use most and make sure your template works in those email clients first. If there’s 2 subscribers using blackberry and your email displays desktop instead of mobile version on blackberry… well you might want to be ok with it ;)
- You can’t have attachments added to your email campaigns.
- Make sure all links are absolute. Linking to images by only specifying in which folder they are is ok during early dev stages but make sure you change them all before broadcasting campaign.
- For animations you will most likely want to use gif. CSS animations still have poor support in most email clients, while gif displays everywhere except Outlook where only the first frame will load.
- Make sure you add alt/title tags for all your images. That way your subscribers will know what’s in the email before loading images.
- Make sure there’s a working unsubscribe link in your campaign, it’s required by law.
- It’s a good practice to keep 60% text to 40% images ratio in your email so make sure you don’t overdo it with images.
- Stay on top of the game. Things in the email world change quite often. Whatever works today might break tomorrow. Something that couldn’t be possible today could be a normal practice the next day.
