Top five email tools

,

As email marketers, we are always trying to find the best ways to make sure our emails are the very best they can be.  Gone are the days where you could send a test email to your inbox, sign it off and send it out.  Now more than ever, we have to be extra vigilant with our emails, making sure get into our customer’s inboxes, and that they look good when they arrive there. But with so many tools available and more cropping up all the time, how do we separate out the good from the… not so good. Luckily, the Enabler team are here to provide you with our expert opinions on the tools on the market now.

Our Top Five Email Tools to help you get the most out of your campaigns:

 

1). Adobe Photoshop

Photoshop is design software that falls under the Adobe Creative Cloud – which means if you already have a creative cloud log in, you can access all of your assets and imagery from inside Photoshop. The programme itself is very intuitive and provides a host of different ways to achieve your goals. It enables email designers to produce beautiful creatives and maximise their potential.

Adobe are always updating the product (you can check out their update timeline here). Photoshop allows you to work across desktop and mobile devices to create the best looking emails you can, making it probably the best software out there for creating great email design.

Price-wise, you can get the full 20+ creative desktop and mobile apps in Adobe Creative Cloud for £45 per month or you can just go for Photoshop which is £17.15 a month.

View the full breakdown of pricing here.

Photoshop is a creative tool we highly recommend investing in if you want to create visually stunning, engaging emails that drive clicks.

 

2). Adobe Dreamweaver

Dreamweaver is a fast, flexible coding engine designed to give developers the freedom to code emails that look brilliant on any size screen.  Dreamweaver is extremely intuitive, and is a suitable choice for any email marketer, whether you are new to coding or have years of experience.  The coding engine offers code ‘hints’ for new users and works with the developer to keep code clean, reduce errors and improve readability.  It has three main view screens, code, design and side-by-side.  This is incredibly useful as it allows you o see how your code is affecting the design.

A new feature we love is ‘snippets‘.  Snippets are sections of code (e.e. headers, footers or images with text) which you code once, then save for use later.  When you next have a template that needs that snippet in it, you can easily drop it in, making development faster and more accurate.

Dreamweaver has the same pricing structure as the rest fo the Adobe Creative Cloud, so you can own it for just £17.15 a month.

 

 

 

​​3). Litmus ​​

Litmus is an email testing tool which allows you to check how your emails will look across a wide variety of email clients and apps.  The main thing we love about Litmus is that it saves you from having to create test email accounts across all email clients, allowing you to test everything in one central place.

You can test everything from link tracking to email load time.  They even have a section of the tool called ‘checklist’, which is essentially your pre-flight check before sending your email.  It will help you catch broken links, optimise loading speed and check how your email works with images on and off.  This section is fantastic – especially as it allows you to choose which browsers and clients you want to see.  It covers desktop, mobile and tablet – we couldn’t recommend it more.

Litmus also has its Community Area, where you can ask questions to hundreds of other developers and share in each other’s  experiences to make your emails even better.  They also produce emails themselves which keep you up-to-date with the latest email trends.

Litmus does offer a free 7 day trial, but after that prices range from $79 a month to $399 a month (for the Brits out there, that’s approx £63 – £320 a month).  They do have a pricing option where can tailor your package, so it only contains what you actually need; like an email pick’n’mix.

 

 

 

 4). Send Forensics

Send Forensics is an email deliverability tool that focuses specifically on making sure your emails hit your customer’s inboxes. It’s very advanced, and works to safeguard your email reputation and boost engagement.

You can run a free email deliverability test that will score your email and tell you the percentage will end up in spam, however to get the full features it costs $49 a month.

Once you sign up to the full features version, the software not only gives you a deliverability score, but what elements of your emails are trigger spam – whether its due to your content or the technical makeup of your email, for example if there is no SFP set up.

(Here’s some tips on avoiding spam filters)

It will mark your vocabulary and copywriting, judging words you’ve used and highlighting any negative one that are hindering your deliverability, and offers you alternative phrases to use instead.  It also highlights any positive keywords to demonstrate the phrases helping your email deliverability.  Send Forensics will even rate your copywriting tone of voice in determining whether you are being overly promotional or conversational in your tone.

 

One of the really standout aspects of Send Forensics are all the technical checks it undertakes when examining your email.  Not only will it check the image:text ratio, and inspect the quality of the links you provide, it will also dive under the skin of your email set-up, domain authority and IP address to check your sending reputation, noting any sites that have blacklisted your IP or technical problems that might be hindering you reaching the inbox.

All this might sound very technical, but Send Forensics is anything but.  The software is exceptionally user friendly, and offers advice on how to undertake any actions it suggests, making it an ideal solution for email newbies.

5). Email on Acid

Email on Acid is another email testing tool that will help you make sure your emails look great across devices and clients.  It provides coding tips and marketing guides via their blog, and also has a forum where you can post techniques and questions to other email developers – however if this is one of your main uses, we would probably recommend going with Litmus as they tend to provide answers faster.

It comes in cheaper than Litmus at $45 – $295 per month, however unlike Litmus they don’t provide a custom tailored option, meaning you have to take everything in each package.  Both LItmus and Email on Acid’s basic package come with one user, but Litmus’ most popular package comes with five users, whereas Email on Acid only has the one user account.  E

Email on Acid is a cheaper alternative if you are a small business with only one users, but if you’re a bigger business, definitely opt for Litmus.

/by

Top ten email coding tips

, ,

Say the words “Build me an email” to a developer and watch the expression on their face drop. Yes, HTML emails are old school, but there’s no need to don a loin cloth and start chipping out code from a stone tablet.

Email has come on leaps and bounds within the last few years, and with open rates frequently increasing on mobile devices, there are a few tips and tricks you can use for responsive emails.

 

Here are a few favourites to keep you building successful, responsive emails:

 1). Keep inline

If you have tried building an email before, you have probably heard of this one. This is basically adding any style changes you make to the containing table of your content.

For example:

<td style=”font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000;”>Hello World</td>

The main benefit behind using this styling is that some email clients will strip out embedded CSS in the <head>, leaving your email with as much style as socks and sandals.

Email developers have already started trialing emails with no inline CSS, which are not 100% foolproof yet, but with a large percentage of global email clients supporting embedded CSS, there is hope for cleaner emails in the future.

 

2). Query your media

Let’s say you want that image smaller, or a different font for that block of text, or you need that column to stack on mobile… not a problem! Media query to the rescue.  Media queries are the CSS3 commands that allow you to change your viewpoint depending on your screen resolution,  meaning that your imagery and content will display differently on different devices… thus making your content fully responsive.

Within the <head> of any email there will be a minimum width set, for instance 480px which will control and sometimes constrain how your media is displayed.  But, if you add a media query to your style command, any styles that you set within that media query will take over when the screen resolution drops below the minimum width.

For example:

<style type=”text/css”>

    body {width: 680px;  background-color:#000000;}

    @media only screen and (max-width:480px) {
        body {width:100% !important;  background-color:#ffffff !important;}
    }

</style>

This means your image can be any size, the font family can styled differently for each resolution, and you can stack your columns all day long. Happy days!

 

3). Stacking

 We briefly mentioned stacking columns in the last tip.  As you’d expect, this coding command allows you to stack columns on top of one another by setting them as .stackonmobile {display:block;} for mobile. This coding tip helps with mobile optimisation by making sections of your email more visible and legible on smaller screen resolutions, instead of trying to squash them into one column.

The default for stacking was left to right for a long time, however more recently we can now reverse stack, by setting the containing tables text direction as right to left.

For example:

<table width=“600” dir=“rtl”>
    <tr>
        <th width=“300” dir=“ltr” class=“stackonmobile”>World</th>
        <th width=“300” dir=“ltr” class=“stackonmobile”>Hello</th>
    </tr>
</table>

Note that we need to redirect the sub-tables back to left to right for text alignment. Also the html layout will be reversed, right column first, which is why ‘World’ is before ‘Hello’ in the example above.
Also note that we have used <th> instead of <td> for Android compatibility, as they dropped the use of display:block on td’s.

 

4). Min vs Max

With screen resolutions getting bigger and bigger, is it a good idea to make our emails wider?
When I started in email builds (back in the dark ages of blackboards and chalk written HTML), the width was 585px. This slowly grew to a standard 600px, which seems to still be the acceptable size. Most of the emails we produce today are anywhere between 600px & 720px. Occasionally a 1000px email rears it’s oversized head, but these are usually for big occasions with large hero images for impact.

What we need to remember is that emails will still be framed by the email clients furniture i.e. the inbox list, the search and edit tools, sender details etc. So an oversized email might end up stretching beyond the width of the screen, which results in an ugly horizontal scroll bar at the bottom… and nobody wants that.

So remember, size does matter.  Always aim for the optimal image size depending on the platform or device being used to ensure your emails remain mobile responsive.

 

5). Bring it to the Table

With email development, it’s all about the tables. Below you’ll find an example of an email HTML table.

Example:
<table width=“100%”>
    <tr>
    <td align=”center”>
        <table width=“700”>
            <tr>
            <td align=”center”>
                <table width=“100%”>
                    <tr>
                    <td align=“center”>Hello</td>
                    </tr>
                </table>
            </td>
            </tr>
        </table>
    </td>
    </tr>
</table>            

The first outer table is set at 100% width to ensure the table is centred within the main body of the email itself.  Then the body table is set at your desired email width (i.e. 700px as above) with a 100% media query class.  By setting the tables within the body to 100%, this helps to ensure the content flows responsively when scaled down to a smaller screen resolution.

 

Handy tip: When building emails using tables, make sure you repeat your inline styles.  A table within a table will lose styling in some email clients, especially background colour and font attributes.
And another handy tip: Try and make sure you nest your tables, and avoid using colspans in your email code. Outlook has a nasty habit of ignoring colspans and rowspans, so nesting your tables will give you more control over your code, making you a happier developer.

 

6). A font by any other name

Be on the lookout in Outlook, your font might not be the font you wanted! 
Having a backup or fallback font within your email code is exceptionally useful to ensure your emails always look the way you want them to, even if the email provider doesn’t have your first choice font.

However… Outlook 2007/10/13 has other ideas, and will automatically apply their own fallback font or Times New Roman. Even if you set fallback fonts in your code, Outlook ignores them. Cheers Outlook.

But wait, there is a fix.. phew!
<!–[if mso]>
<style type=”text/css”>
    body, table, td {font-family: Arial, sans-serif, Helvetica !important;}
</style>
<![endif]–>

Drop this code into the <head> of an email and Outlook will pick up the web safe fonts first, so you can safely steer clear of Times New Roman.
Font-astic!

 

7). Does my article look big in this?

A bit of extra padding never did anyone any harm, but adding Padding and Margins to your table styles could harm the way your email looks, as some email clients might ignore them.

Spacer images used to be the way to use padding in emails. Developers would use transparent 12px x 12px gifs and fit them into every nook and cranny of their emails… sounds tedious doesn’t it?

Luckily there is an alternative which is much more efficient to implement, and works across all email clients successfully… A non-breaking space (&nbsp;) – just add font size, line height and a width/height depending on the space you require:

 

<td style=”font-size:20px; line-height:20px;” height=”20″>&nbsp;</td>

So now your emails and tables will always be lean and evenly spaced…no padding required.

 

8). The (Alt)ernative

 When your emails load quickly, you get to display every image and aspect of you email in all its glory. But what happens when you’re a slow connection speed or your email client is blocking images by default?

You could end up with empty spaces where your images used to be, but hopefully you will see the Alt text – the alternative text that’s displayed when an image can’t display.

Some email clients won’t load images automatically, so without any Alt text you could get a blank looking email. 🙁

Example Alt text:
<img src=“images/hello-world-title.jpg” width=”200″ height=”40″ alt=“Hello World”/>

Another alternative is to actually style your Alt text so that it’s less bland if it gets displayed. Add a font-family, font-size, font-colour or text-decoration, so you try and match the image style, and get your email looking good if the images don’t load.

Example stylised Alt text:
<img src=“images/hello-world-title.jpg” width=”200″ height=”40″ alt=“Hello World” style=“font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#ffffff;”/>

 

9). Hamburger to go please

Now that emails have further CSS3 support, it’s allowed many developers to start introducing some great responsive features to their email code.

The Hamburger Menu (so called because it looks like a little burger between a bun) is one example of this.

Those long menus on an email don’t need to be stacked half way down your mobile screen anymore, they can be tucked away neatly in a clickable, drop down menu, making your email more mobile-friendly and more visually appealing.  Just need the fries to go with it now!

 

 

 

10). Give yourself a fighting chance

Make sure you are putting yourself in the best possible position for email building. One of the ways you can do this is to get the right software. Lucky for you, we’ve put together a list of our favourite email development tools, from design right through to deployment.

Check them our Email Tools blog and start getting the best results out of your emails.

Whatever you do, keep experimenting with your HTML/CSS emails, even if you end up with Frankenstein’s monster there might be a small part that works really well, or another that will give you a further understanding of where to go next.

Happy coding!

/by