Feels like I've been out of the game for years

Well I never thought this would happen..

I've been working as an email marketer for at least 7 years now for big companies in the online gaming industry. I have a problem though, so much has changed in the last few years, since the introduction of mobile etc... I feel my templates are on the lower end of the quality scale.

I'm now constantly battling to design emails that display well across all email clients but struggling here.

My method of coding HTML emails is the utmost basic too...

HEADER
I do not have any styles in the header, only the document name.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

TABLES
I place everything in tables, each row is made of a new table, using different amounts of columns and the end product is wrapped in one basic table too. (never using rowspan or colspan)

TEXT FORMATTING
When formatting text it will either be in the TD or a DIV and usually looks like this:

style="font-size:11px;font-size:11px;line-height:12px;font-family:Verdana, Arial, Helvetica, sans-serif;" valign="top"

Now I am looking at other businesses emails and seeing hundreds of lines of css in the HEAD and they display great on mobile devices etc... whilst mine don't.

Can anyone point me in the direction on the best sources to use to catch up to the newer, correct way to html code these emails. I would be grateful for anything, even better if there are any youtube videos out there to follow as my searches have come up empty.

Thank you!

JohnP JohnP, 3 years ago

The html email boilerplate is a good start: http://htmlemailboilerplate.com/

It is well commented so you can figure out what each of those 'hundreds of lines' are. ;)

roshodgekiss roshodgekiss, 3 years ago

Hi there ElWaster, rest assured that the way you're coding is 100% fine - intrinsically, not much has changed, however now with mobile we're working within a slightly more complex framework and with a relatively different mindset. You may have heard of things like a "mobile-first approach" - this simply means thinking about how to make your design effective on mobile devices first and foremost (eg. limiting your content, considering mobile navigation and usability etc). The potential benefits from making these considerations have been shown to extend to desktop and webmail views of your newsletter, too.

You mention that a lot of email designs feature large stylesheets in the <head> - this is because a lot of email marketing services (Campaign Monitor included) automatically inline these stylesheets on campaign import. This means you no longer have to place all your CSS styles inline - we do this for you. The exception are @media queries - which are essential when using many responsive email techniques and should always remain in <head>.

If you'd like to get up to speed on both responsive email design and coding, I can highly recommend our Guide to Responsive Email Design. Naturally, if you have any questions about anything in the guide or what we've recommended here, please don't hesitate to ask. :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
ElWaster, 3 years ago

Thank you both for your replies. I'll be spending today catch up with the times :)

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098