HMTL Email Best Practices Follow

How to get the most out of Topspin's Rich HTML Email Application

The HTML emails you send out are going to be viewed on a number of different environments (PC, OSX), web browsers (Safari, Firefox, Chrome) and web clients (Gmail, Yahoo, Mail, Outlook, etc). Some of these contexts limit what can be sent in your email. Even by previewing your email, you cannot make 100% sure your email will be stable for your fans. The following are best practices for creating consistent and attractive emails for your fans, that help to make sure your fans can effectively read the message you send and click the links to get to your offers and content.

Keep it simple. 
Beyond anything else, keep the message super simple. Don't make people read alot to figure out what to do or where to go. Simple images with large headings work really well. People will read more once they are interested.

Clear subject line 
If you have a new download, say so. An offer in the subject line makes email response soar, especially if there's a time limit. 
- Don't use ALL CAPS or a bunch of distracting punctuation. Spam filters don't like ALL CAPS, nor do they like most generic sales terms, such as: 'Free', '$$$', 'Save', 'Discount',

Keep all links blue. 
Studies show these are far more clickable than other colors. We see almost 15% more clicks on blue links.

TS Widgets 
Simple rule: don't put Topspin Widgets in your Email. It may work for some browsers and situations, but it won't work all the time and it may block your email from getting to your fan. Here's a trick: say you have a new video. Take a screenshot capture of your video player and place that image in your email. People will want to click it to play it, but instead it will send them to a page where they can play it. Works very well.

Images 
Make sure all your images are being referenced with absolute, not relative links. Relative links will cause all your images to not show up. Here's the difference: 
Absolute link: "http://band.com/images/concert.jpg
Relative link: "/images/concert.jpg"

_Redirect_ 
Over 30% of my fans click the Don't See This Email, Click Here. I often add a second link that sends people directly to the content I am wanting them to go to, instead of to the email. Saves a click, and definitely increases my conversions.

Styles 
All HTML styles must be in the body. This means they cannot reference <style> tags or other stylesheets. Again, this MAY work sometimes, but not all the time. Losing your styles can often make your email unreadable, e.g. black text on black background, etc.

Style Specifics

- Use white backgrounds only. Some web clients strip out all background color and default to white. Making your emails look nice on a white background ensures consistency in most applications.

- Div layouts work very well for emails. If you want to have a more complex layout, say a newsletter, etc, use divs to separate content. Make sure to style your content per div, and not use stylesheets. See above.

- Table layouts may work well. These can be easier for novice code peeps, but sometimes tables fail.

- Do not add <head> and <body> tags; this seems to upset poor email.

- Most remote email clients do not automatically show images until the user allows them. Make sure you have a prominent, text-based call to action in your email design. No one has patience for loading images it seems, and if your email is all images, it'll look blank and lots of people will dump it.

Absolute positioning of divs is not consistent in email clients. Use relative positions for best results.

Examples

Here's some emails that follow best practices. Feel free to borrow the HTML code (View/View Source) and make your own dope emails.

http://basecampmusic.com/email/email_folk4parks.html
http://basecampmusic.com/email/email_092409.html
http://basecampmusic.com/email/email_032709.html

How to use Topspin's Email Templates within the Email Application

Here are the 2 Topspin Templates ( one has a white background (light) , one a black background (dark) : 
Click on this link to get the Topspin Template ( dark) 

Click on this link to get the Topspin Template ( light) 

It is recommended that you are familiar with basic HTML but if you aren't no worries. You can most likely get enough info via Google to learn at least enough to help you edit these templates the way you like.

Getting the Template into the app

In the Promote section, click New Offer > Email.

Hit the "Source" button to be view in "HTML mode". 
Topspin_Media__-__Spin_email-6.jpg

Choose one of the Topspin Templates from the above links. Click on the link so that the template is displyed in your browser. View Source. 

Select all to highlight the source code of the template. 

Copy and Paste into your editor in Source mode. 
HTML.jpg

Now it's time to do some editing to give it that warm, fuzzy feeling that only your newsletter is capable of.... and so your fans know it's from you and not some "pre-made" template. If you are familiar with HTML you'll be able to edit this in a breeze, the instructions below are meant for those who may be new or for the more experienced consider it a Quick Start Guide. You can edit it in your HTML editor or within the Topspin app.

Start with the header: 
Header.jpg

 

To change the image of the newsletter , you'll need to replace our URL / image and insert the URL where your image is hosted in this section: 


IMG.jpg

 

Then, you'll want to move on to the various sections of the newsletter and edit as you see fit. After you have customized the header; let's move on to the next section "Use This Template To Create Your Email Campaign": 


Use.jpg

 

It's always a good idea to look at the Pre-made template as you are editing so you know where you are ... that's if you are a bit new to HTML.

Next, you can edit the author of the article/section: 


jdavis.jpg

 

Here is the body where you can tell your fans about what's going on in your band's "groovy" world: 


blurb.jpg

 

Add a custom link. 

LINK.jpg

 

For more information on basic HTML, you may visit w3schools.com

To avoid triggering Spam alerts when sending an email to your fans, try following these basic guidelines published by our email services provider SendGrid: How To Avoid the Spam Folder

Remember: It's always good practice to check your email using the Preview in the app or send to an address where you can review prior to sending to your list. 

Have more questions? Submit a request and our team will be able to help get you sorted.
Powered by Zendesk