EDM (Electronic Direct
Marketing), most of the time refers as email marketing, html emails or
newsletters. They are used to announce new products release, promotion or
important announcement to consumers. Tools such as Salesforce can help you to set up these campaigns. Well, we will not
discuss about how electronic marketing campaigns work. In Queness, we always
focus on technical part to web designers and developers.
I have been building
EDM for a few years now, a lot of people labelled EDM as dirty job, because
it's harder than building a website! Believe me, if you're working for a
digital agency, there are no escape! I hated it, but I'm alright with it
nowadays because I know how to build it correctly and avoid all common issues
across different email clients. I guess the first step is to setup multiple
email clients (outlook 03, 07) on a computer or different computers. Setting up
software and hardware can be a nasty job, call your Tech Support if you need it. :)
Alright, cut thing
short, the following is a list of tips and tricks, something I learned from all
the EDMs I have built and of course from Internet as well. I pretty sure it
will help you to build a consistent HTML email layout across all famous
web-based email clients and email client software.
1. CSS Support
This is important, not
all CSS properties are supported. CSS support in email client is limited and
worse than IE6. For example, background image is not support by outlook
2007/10, Windows Live Hotmail and Gmail. So, you need to know what's supported.
Link below is extensive list of CSS support compiled by repeatable online email
management service - Campaign Monitor. This CSS list is updated frequently.
2. Communicate with
Your Designer
You need to understand
some designers are not aware of the limitation of email clients. Some of them
assumed it works exactly like web browser. So, it's good for a developer to be
involved in the design phase if the designer hasn't designed an EDM before. I
had this issue before when the designer decided to use a massive background
image as part of the design, and it just won't work in some email clients.
3. Use MailChimp HTML
Email CSS Fix
Use HTML Email CSS fix
from MailChimp. MailChimp is a reputable email marketing and email list
manager. They have come out client specific styles that fix some of the email
client issues.
1.
/*
Client-specific Styles */
2.
3.
/* Force
Outlook to provide a "view in browser" button. */
4.
#outlook a{padding:0;}
5.
6.
/* Force
Hotmail to display emails at full width */
7.
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
8.
9.
/*
Prevent Webkit and Windows Mobile platforms from changing default font sizes.
*/
10.
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
4. CSS Reset for HTML
Email
Yes, CSS reset for
EDM! It fixes consistency issues on different email clients. This reset was
introduced in HTML Email Boiler Plate website. I have been using it and they
work great.
1.
/** 3.
Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To
correct we set the top/bottom margin to 1em in the head of the document. Simple
fix with little effect on other styling. You do not need to move this inline.
NOTE: It is also common to use two breaks instead of the paragraph tag but I
think this way is cleaner and more semantic. NOTE: This example recommends 1em
or 1.12 em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/
2.
3.
INLINE:
Yes.
4.
**/
5.
6.
p {
7.
margin: 1em 0;
8.
}
9.
10.
/** 4.
Hotmail header color reset: Hotmail replaces your header color styles with a
green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset
to black for a non-linked header, blue for a linked header, red for an active
header (limited support), and purple for a visited header (limited
support). Replace with your choice of
color. The !important is really what is overriding Hotmail's styling. Hotmail
also sets the H1 and H2 tags to the same size.
11.
12.
INLINE:
Yes.
13.
**/
14.
15.
h1, h2, h3, h4, h5, h6 {
16.
color: black !important;
17.
line-height: 100% !important;
18.
}
19.
20.
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
21.
color: blue !important;
22.
}
23.
24.
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
25.
color: red !important; /* Preferably not the
same color as the normal header link color.
There is limited support for psuedo classes in email clients, this was
added just for good measure. */
26.
}
27.
28.
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
29.
color: purple !important; /* Preferably not the
same color as the normal header link color. There is limited support for psuedo
classes in email clients, this was added just for good measure. */
30.
}
31.
32.
/**
Outlook 07, 10 Padding issue: These "newer" versions of Outlook add
some padding around table cells potentially throwing off your perfectly pixeled
table. The issue can cause added space
and also throw off borders completely.
Use this fix in your header or inline to safely fix your table woes.
33.
34.
More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/
36.
37.
H/T @edmelly
38.
39.
INLINE: No
40.
**/
41.
42.
table td {
43.
border-collapse:collapse;
44.
}
45.
46.
/**
BONUS: Adaptation of Brian Thies (Campaign Monitor) link color fix to render
the Yahoo Short Cuts invisible. Yahoo short cuts are links that Yahoo places
over certain text in your email without your knowledge. In order to use this fix you need to make the
text color the same of the actual font color of your email and reset a few
elements. IMPORTANT: You then need to use the Responsys/Smith Harmon link color
fix (#7) if you want to style your links to the color you want them to be. If you don't, this fix will change all links
to black in Yahoo.
47.
48.
If you
are not worried about Yahoo's shorcuts, just remove this code. This is not applicable for Yahoo Classic.
49.
50.
INLINE:
No.
51.
**/
52.
53.
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;} /* Body text color for
the New Yahoo. This example sets the font
of Yahoo's Shortcuts to black. */
5. Use Inline CSS
Style
You need to use inline
style in EDM. Classes and ID won't work in email clients.
6. Use TABLE not DIV
Just imagine you are
living in year 1990, only HTML 1.0. DIV with float is not supported, as a
result, your layout has to be made with TABLE only. Good and bad, I used to
like TABLE a lot, so using it is not a big problem to me. The bad, your email
HTML code can get really confusing because of nested tables.
A few things to
remember while using TABLE in HTML email
·
Remember to set
cellpadding and cellspacing to 0.
·
Always set the width
or height of TD.
·
Set correct align and
valign.
·
Wrap the email inside
a 100% width table. One of the reason to do it is setting the background color.
In some email clients, background-color/bgcolor in BODY tag won't work,
therefore, you need to wrap your email with a 100% width table and set
background color to the table. Read more.
7. IMG Tag
Some important points
when dealing with IMG tag:
·
Do not set width or
height to images to make sure the content able to degrade gracefully when
images are not loaded.
·
Use style="display:block". This is a killer tips to fix the extra space
issue below images in Gmail and Hotmail.
·
Always put description
of the image in ALT tag. Most email clients tend to ask for user permission (or
worse, blocked by IT department) before it loads all images. With ALT tag
filled, user will able to read the description of images even though it's not
loaded.
8. Use spacer.gif
I think the origin of
spacer.gif come from Photoshop. It's a 1x1px transparent gif and we can use it
to fill in empty TD or to create blank spaces. This is particular useful to add
space between two blocks.
9. Use BR Instead of P
One should avoid using
P tag for line break, use 2 BR instead. P has margin, and on different email
clients, they have different value for it. As a result, it's good to use 2 BR
to emulate the same line break effect than using P tag.
10. Width of EDM
should be 550-600px
The width of EDM
should not exceed 600px. Most of the email clients have a sidebar, and some
even using 3 columns view, plus the width of
scrollbar and common screen resolution. 550-600px is the best width for EDM.
Another explanation
why it shouldn't exceed 600px.
11. Do not use
Javascript
You must not use JavaScript.
It won't work and your EDM would possibly get labelled as SPAM.
12. Test it!
You need to sign up
for all major email clients such as Gmail, Hotmail and Yahoo Mail. In some
company setting, they have test machines setup or virtual machines with Outlook
2003/07/10. Or, some are using online solution such as Campaign Monitor which
has a email test services (not free, $5) which will show you the screenshot of
your EDM of an extensive list of email clients screenshot.
Conclusion
That's about it.
Building EDM is hard from the start, but once you understand what you should
and shouldn't do, it can be a really easy task. I hope all these tips and
tricks will able to help you to become an expert in EDM. Please share it if you
like it :)
·
Article source: Dolce2Dolce
Wedding Pte Ltd
We are an E-Commerce company
for customizing wedding gown and evening gown. This blog is for communication on technology world, like the new
technology, social media and other technology about internet. We welcome you to
communicate with us through below channels:
1 Blog about wedding gown, evening gown, and wedding
related:
2 Blog about internet technology：
3 Company website:
4 Company Facebook:
5 Company email:
No comments:
Post a Comment