Html newsletter layout 24 tips for a better html

HTML Newsletter Layout
–
24 Tips

Leader in Email Marketing, Social media and Cross-Channel
Marketing Solutions and Services in India

@2012 Copy Right of Kenscio

HTML Email Dos
Ever wondered if you had a quick guide of Dos and Don'ts for an
HTML based email newsletter. Here we have compiled one that
serves as a ready reckoner.

HTML Coding Do’s

5.Code HTML emails as a single Web page with the basic <HTML>, <HEAD>,
<TITLE>, and <BODY> tags.
6.Code emails by hand where possible, as WYSIWYG (What You See Is What You
Get) editors typically add extra code that creates havoc with certain email clients.
If you must use an editor, use Dreamweaver or Homesite, which do not add extra
code to the design process.
7.Use HTML tables for the design layout.
8.Keep emails at a fixed width of between 500-620 pixels wide.
9.Instead of defining percentage widths use fixed widths. While this is not
optimal, because people can and do resize their email windows when reading,
sometimes using a fixed width is the only way for a layout to display properly in
multiple email software.


HTML Email Dos
1. Use only the ASCII character set. More advanced word-processing software
often inserts odd characters, such as the trailing dot characters or smart quotes
(curly instead of straight), which can hamper display or create delivery problems
in some email software.
2. If you use CSS, include inline styles. Do not link to an external style sheet nor
use embedded styles, as this code is often stripped out by email clients, creating
display problems.
3. Make sure all tags have supporting closing tags. The most common HTML errors
come from not having a closing </FONT> tag or having open <TD> or <TR> tags
in the HTML. While your HTML might render properly in a browser, these errors
can cause problems with many email clients.
4. Use the HTML table attributes within the TABLE and TD tags.
5. For example: to set the table border=0, valign=top, align=left (or center, if that is
the design), cellpadding=0, cellspacing=0, and so on. This primarily helps older
email readers to display the html email in a minimally-acceptable way.


HTML Email Dos
1. Put general font style information in the table TD or DIV or P tags closest to
the content. This can mean repetitive style declarations in multiple TD cells or
DIV’s or P tag. Put font style definitions into heading (e.g. H1, H2), P, or A
tags only when necessary.
2. Use DIVs sparingly to float small boxes of content and links to the right or left
inside a table TD cell. Google Mail appears to ignore the CSS Float property
but Yahoo! and Hotmail work fine. Outlook 2007 ignores floats.
3. Sometimes it is better to code a more complex table layout than rely on the
Float property. Since email is easy to clutter, ask that the design put the
floated content in the narrow side column. Floats are the one part of an
email design that might require the design be reworked.
4. Animated GIF files are acceptable, but use them sparingly.
5. Use of images maps is acceptable.
6. If there is a spacing issue with the columns in the email design, first tweak
the cellpadding and cellspacing attributes of the HTML tables. If that does
not work, use CSS margin and padding attributes. HTML spacing works
better with older email software than spacing with CSS.


HTML Email Dos
1. If an image is cut up and spread across several HTML table cells, test the
email with many test accounts. Sometimes it looks great in Outlook but shifts
by 1 pixel or more in Hotmail and other services. Also consider putting the
image as a background image on a new html table that encases all the table
rows and columns that would display parts of your background image.
sometimes this achieves the same effect as cutting an image up but with less
code and better results.


HTML Email Dos
Note that Microsoft Outlook does not display background images.
Be sure to test your email code with your target email client
software.

3.If you use background images, use the HTML table attribute background=
instead of CSS. It works more consistently across email software except Outlook.
Define appropriate bgcolor for the TD’s so that the color is displayed when the
images are blocked.
4.Be sure all your images use the alt tags, height, and width parameters. This
helps with Google Mail as well as when a reader has their images turned off.
However, Outlook 2007 does not recognize the alt= parameter.
5.Use the target=”_blank” attribute for the HTML A tags so that people reading
with a webmail service don’t have the requested page appear within their
webmail interface.
6.Avoid a big image above the fold in the email. This is another classic spammer
practice and can increase the likelihood an email will be tagged as spam.
7.Make sure your email content displays fine without images.


HTML Email Dos
For example: if you use a background image to provide a
background color with white font color over it, make sure the
default background color for that part of the HTML table is dark, not
white. Also be sure your alt=, height=, and width= parameters are
set for images so they can help readers understand your content
without images. Turning off your images will help you catch these
issues and ensure the HTML email will display effectively if people
see your email with images off.

3.Test your HTML code. Make sure your code conforms to World Wide Web
Consortium (W3C) HTML standards
4.When sending a multi-part message, remember to create the text version. Most
email clients send HTML as a multi-part alternative by default. Failing to include
the text part of the message can cause some filters to treat your email as spam.


Html newsletter layout 24 tips for a better html

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Viewers also liked

Viewers also liked (11)

Similar to Html newsletter layout 24 tips for a better html

Similar to Html newsletter layout 24 tips for a better html (20)

Recently uploaded

Recently uploaded (20)

Html newsletter layout 24 tips for a better html