Web Develop Forum: HTML Emails - Web Develop Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

HTML Emails Rate Topic: -----

#1 User is offline   Sam Granger Icon

  • Administrator
  • PipPipPip
  • Group: Root Admin
  • Posts: 431
  • Joined: 22-October 08
  • Gender:Male

Posted 20 January 2010 - 10:41 AM

It has been a while since I've built a decent HTML email, but today at work I had to make one for a client.

A bit of Googling helped me find the following "cheatsheets".

Style elements support in email clients: http://www.campaignmonitor.com/css/
Unnecessary Elements in HTML Email (Source: www.pageresource.com - currently down, but could still view through Google Cache)

Quote

Unnecessary HTML in Your Email
In this chapter of our continuing discussion on HTML email, we are going to talk about the different elements which are not really all that necessary in your mailings.

The following are not necessary for HTML email and should be stripped out before you mail. This will reduce the overall size of your mailing and increase the speed in which it is delivered, rendered, and received by your customers. While this may not seem like a big deal for a hundred piece mailing, imagine send 5 million or so emails in a single day.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
All Meta Tags, including Refresh Cache & Pragma
Many systems will disable some of these by default, however when Outlook receives a refresh command it will merely display blank content in both the preview and open message. Web-based systems will usually only display context taken from between your <BODY></BODY> tags.
<TITLE></TITLE>
The subject section of your email message takes care of this element.
Long comments or commented -out sections.
<!--Nuff Said-->
Programs that export to HTML
Dreamweaver, FrontPage, or Adobe - Any references to extensions, styles, or Fireworks/Image Ready tables. This is most common with Front Page extensions, which reference IE only styles quite often. If you have a document which uses a library item, such as Dreamweaver, you will have to break the library item apart and insert your code as raw HTML in order for your mailing to work correctly.
Redirects
Since many Web-Based email clients place their own redirects on your links (for whatever neffarious reasons..we cannot say) if you place your own redirects on urls, turls, or query strings, they may break, or show up as plain text in the middle of your email.
Extraneous Style Sheets
Make sure if you use style sheets, only the elements you will be using for a particular mailing are included. This helps cut out bulk & unnecessary code from your mailings. This is most often found when a mock-up contains the entire style sheet for a website, rather than the styles used in the mailing. While this may not seem like a big deal for a couple hundred emails, it adds up if your doing, let's say, a Million emails in a day.

So a simple example for extraneuos style sheets would be if you had 100 lines of code to define 25 styles from your website, but you were only using one style for your HTML email. You could either mark up the style in HTML code, or you could just define one style and apply it to the entire email.
Special Characters
You must be mindfull when you use special characters in you HTML email. Special characters include those which must be generated through an escape sequence (ex: © = &copy; in HTML) and many email browsers will have some trouble reading them.

One character sequence to be especially careful of is the non-breaking space character (&nbsp; ). Many WYSIWYG editors (like FrontPage & Dreamweaver) have fallen in love with this character.

Furthermore, many WYSIWYG editors use the Non-Breaking space to wedge open <TD>'s. These will usually close up when viewed by the majority of Netscape browsers. A spacer GIF should be used when you absolutely have to keep a <TD> cell open in order for your design to work.

0

#2 User is offline   Blambu Icon

  • Advanced Member
  • Icon
  • Group: Administrators
  • Posts: 126
  • Joined: 22-October 08
  • Gender:Male

Posted 20 January 2010 - 03:42 PM

Thanks Sam,

I had to send out an HTML email not so long ago for a newsletter promotional type thing (you can see here).

Was a pain, but got there in the end. I ended up using some newsletter software to send it.
[twitter]escensi[/twitter]
http://escensi.com
0

#3 User is offline   jamiemark Icon

  • Member
  • PipPip
  • Group: Members
  • Posts: 11
  • Joined: 20-February 10
  • Gender:Male
  • Location:London
  • Interests:Designing
  • Your specialities (detailed)::web designer

Posted 24 February 2010 - 06:37 AM

Thank you for sharing.
0

#4 User is offline   Talita Icon

  • Newbie
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 05-October 10

Posted 02 November 2010 - 12:34 PM

You should check out Campaign Monitors new templates they just realeased. They've tested them in 20 or 30 email clients, and they're free to use and modify.

I contacted them recently asking for a 'boiler plate' style template, and now they've released about 40 of them =). Great resource.
0

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users