homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
HTML email forms
So you're forced to look into this, where to start looking?
swa66




msg:4000246
 11:08 pm on Oct 2, 2009 (gmt 0)

Imagine your efforts to talk your customer out of sending html email newsletters have failed and they now insist on having an html email template.

Where do you start ?

Avoiding it is out of the question, you have to do it .. still:
- what do you need to know from the customer ?
- how do you develop it
- how do you test it (this is a big challenge, even just to having all clients in working order is a nightmare in itself)

P.S.: this isn't imaginary for me, I've just gotten the "that thing you talked us out of earlier, we want to do it anyway" form a customer and it feels like they've pulled the rug out from under my feet.

All I can remember right now is that CSS is borked unless you can do it with inline stuff. But even how to get them to send it out etc. all seems far away at this point.

 

incrediBILL




msg:4000271
 12:09 am on Oct 3, 2009 (gmt 0)

Why try to talk the customer out of it?

Email newsletters are a huge sales tool and HTML email is pretty straight forward, not that complicated, not to be feared ;)

"- how do you develop it"

It's just a standard HTML page with the difference being some source should be carried with the file IMO, like the CSS, and images should have absolute paths to the server.

"- how do you test it (this is a big challenge, even just to having all clients in working order is a nightmare in itself) "

If it works in Yahoo Mail, gMail and my personal webmail, Outlook and Thunderbird, it's as good as it gets.

When I send out HTML newsletters I usually leave the images (if any) on my server so the footprint is small and delivery is very quick and embed the actual CSS in the HTML head like in the following example:

To: "IncrediBILL" <me@example.com>
Subject: Thanks For This Fabulous Sample HTML email template
MIME-Version: 1.0
From: "swa66" <you@example.com>
Message-ID: <61.85>
Content-Type: multipart/alternative;
boundary="_OuterBoundary_00061.85"

This is a multi-part message in MIME format.

--_OuterBoundary_00061.85
Content-Type: text/plain;
charset="us-ascii"
Content-Transfer-Encoding: 7bit

.
.
.
This is where the text only version goes
.
.
.

--_OuterBoundary_00061.85
Content-Type: text/html;
charset="us-ascii"
Content-Transfer-Encoding: 7bit

<!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" />

<title>THE HTML VERSION</title>

<style type="text/css">
<!--
.somestyle { margin-top: 10px; margin-right: 20px; margin-bottom:
10px; margin-left: 20px; padding-top: 0px; padding-right: 10px;
padding-bottom: 10px; padding-left: 10px; border: 2px solid #EAAC31;
background-image:
url(http://images.example.com/email_back.jpg);
} -->
</style>
</head>
<body>

<h1>THIS IS THE HTML CONTENT</h1>
</body>
</html>

--_OuterBoundary_00061.85--

The reason I embed the CSS into the HTML head is so that the email will at least perform a basic formatted display even if they are offline or my server is unavailable for whatever reason.

Also note that I included the PLAIN TEXT version for you since not everyone can handle HTML email properly so the message isn't lost on those users.

Simply drop the entire file formatted as I provided to a file called "htmlemailsample" and then shell the following command to send it:

/usr/sbin/sendmail -t < htmlemailsample

Done!

Multiple mime type email delivered.

swa66




msg:4000624
 9:28 pm on Oct 3, 2009 (gmt 0)

Thanks incrediBILL,

Maybe I needed to clarify it better. As I was looking for other things (I know how to send MIME mail from a unix box).

The mail would most definitely not be sent from one of my servers (I doubt they did a proper double opt-in on it - they said as much). So it would be sent from their macs (hat's also what they seek).

The problem is how do I do layout in html so that the plethora of email clients out there has a chance of rendering it properly.

E.g. for a business audience, I have *none* of their typical email clients running myself. That's like making HTML & CSS blind and crossing your fingers that things like word (outlook 2007), legacy IE (outlook 2003), and whatever things like lotus domino, OWA, etc. use to render html email.
Some of those I might be able to install (although it's far from easy), but all of them is going to be very cost prohibitive.

Note that I hope I'm a bit fluent in CSS, and already have seen evidence to NOT use that in email, but my tables abused for layout skills are very low due to years of not using it.

E.g. In your example you use a <head> with a <style> in it, does that render in most email clients (including outlook 2007) ? I read multiple times that outlook 2007 stumbles over that, and requires inline CSS only.

I feel very uncomfortable basically making something without have the means to test it ...

incrediBILL




msg:4000634
 9:47 pm on Oct 3, 2009 (gmt 0)

The problem is how do I do layout in html so that the plethora of email clients out there has a chance of rendering it properly.

You're still doing the layout for browsers as email software typically doesn't contain their own proprietary browsers, they use the system defaults.

The email clients all use browsers to display the HTML content so testing in Outlook means IE is rendering the HTML, and Firefox most likely renders HTML for Thunderbird, Safari for Mac, so on and so forth. On the Windows platform the MSIE control is used by most 3rd party apps rendering HTML so if it works in MSIE, Firefox and Safari you're pretty safe.

Using the web-based email clients like Yahoo email, gMail, Horde etc. are obviously using the browser you're currently using, and they may strip out some code, you can never be sure so try them to see if they basically function.

So it would be sent from their macs

Desktop macs?

Good luck with that part as most ISPs networks either:

a) block raw access to SMTP servers or

b) the IPs for the ISP is on a PBL (policy block list) meaning the mail servers will reject their connection.

This is how spam is blocked from being sent from residential and some business IPs.

Regarding Outlook, the easiest way to find out is use my sample HTML email above, paste in the type of code you normally use and send it to Outlook and see what happens.

If I get a chance I may stage a quick test and see what happens, but considering Outlook uses MSIE to render the content there shouldn't be any problem unless Outlook injects some <head> or <style> content of their own, which I doubt, because that would invalidate the entire concept of encapsulated mime types being delivered as-is.

swa66




msg:4000637
 10:02 pm on Oct 3, 2009 (gmt 0)

I'm pretty confident Outlook 2007 does NOT use IE to render html, it uses word.

While digging a bit deeper I stumbled on this one:
[msdn.microsoft.com...]

As far as sending from their mac: isn't a problem, they can send email, just not through any server of mine. And if they are going to be considered to be spammers it's somebody else who'll stop them (they use an authenticated smtp server), and probably have a few other servers they could use too.
Not my problem, I've warned them enough.

incrediBILL




msg:4000639
 10:14 pm on Oct 3, 2009 (gmt 0)

Yikes, why on earth would Outlook 2007 not use IE and opt for Word?

they use an authenticated smtp server

That means nothing when you get on a few no-so-public black lists and suddenly all your email to Yahoo, AOL, etc. starts bouncing.

incrediBILL




msg:4000641
 10:21 pm on Oct 3, 2009 (gmt 0)

I spent 4 years building email client software and I'm mortified they don't use MSIE as the rendering engine, that's just crazy!

However, I suspect it's because Outlook 2007 probably uses some of Word as the edit engine, which means they're making Outlook/Word compatibility as strong as possible since Word's HTML doesn't render properly in MSIE so you keep it all in Word so it looks the same in EDIT vs DISPLAY.

Seriously LAME Microsoft.

The reason I recommended the approach I did was because I know a few major vendors I deal with use HTML just the way I showed it to you, which is why I didn't see any problem with it.

I'm guessing there might be a different way to encode the mime type that forces it to be displayed in a real browser and bypass the native junk in Outlook.

[edited by: incrediBILL at 10:30 pm (utc) on Oct. 3, 2009]

incrediBILL




msg:4000645
 10:28 pm on Oct 3, 2009 (gmt 0)

I found a tool you can download which validates HTML and CSS for Outlook 2007:
[microsoft.com...]

How vile and disturbing this is the case this late in the internet game.

BTW, I was right but just currently wrong, prior to Outlook 2007 the editor was Word and the viewer was MSIE, so this is just a recent change in my perspective.

I don't use Outlook (2 hour rant) so I never bothered to pay attention to it's evolution.

choster




msg:4000670
 12:02 am on Oct 4, 2009 (gmt 0)

You guys are a little behind the times. Outlook has used Word for rendering since the betas of Office 2007 (http://blogs.zdnet.com/microsoft/?p=200 and many other rants).

That said, I usually recommend against clients sending their own e-mail newsletters; it is too easy to get blacklisted. There are lots of free and low-cost services like MailChimp and ConstantContact that can take care of things for you, and you can dummy up a template using their interfaces that will reproduce well enough across a variety of mail clients, at the expense of some code purity of course.

[edited by: incrediBILL at 12:30 am (utc) on Oct. 4, 2009]
[edit reason] removed non-authoratitive links [/edit]

swa66




msg:4000682
 12:23 am on Oct 4, 2009 (gmt 0)

I had found mailchimp in the mean time, I'm trying to suggest them to use that, or at least use it to get a view of how it all renders in various clients.

Outlook '07 using word to render html email: yes it's one of the most lame things MSFT did recently. Methinks protectionist reaction is at the basis.

at the expense of some code purity of course.

"Some" is an understatement. Normally anything new I make is 100% validated html and css and of a somewhat pure variety (e.g. no table abuse). But what you see in some of these templates almost made me loose my dinner.
Turn back the clock a decade if you code html email is the rule it seems.

incrediBILL




msg:4000692
 12:42 am on Oct 4, 2009 (gmt 0)

AH HA!

Now I understand why people send those HTML attachments which has just a single link to one big 800x600 JPG file located on the server.

You can design it however you like, make a screen shot, attach the screen shot.

Done.

Most often at the top of my html emails is says something like:
"Click Here to see this HTML email if it doesn't display properly"

Which takes you to an HTML page on the server.

phranque




msg:4000759
 7:00 am on Oct 4, 2009 (gmt 0)

these threads are a few years old but i think they have quite a bit of information that is still relevant.

The Challenges of HTML Email:
[webmasterworld.com...]

Email Optimization Consultant - The New Marketer:
[webmasterworld.com...]

Mr Bo Jangles




msg:4000803
 10:24 am on Oct 4, 2009 (gmt 0)

In addition to what's already been said, you can also learn a lot from the sites of those whose business it is to send HTML e-mails - like Campaign Monitor.
I have used them a few times to send and get their own newsletter e-mail, and their site is packed with helpful templates and examples. They want you to succeed in sending HTML, and so they have a lot of tips and hints.
Another one is Constant Contact, but I haven't visited their site in a while.

rocknbil




msg:4001576
 4:49 pm on Oct 5, 2009 (gmt 0)

Yeah I figured swa66 would be doing tailspins over what you have to do to get html emails to render. :-) It's like going back to 1995, when tabled layout was the only reliable tool to hold things together.

I've had success with inline css, and in some clients even CSS in the head. But for most, tabled layout and inline CSS is relatively reliable.

One comment, not sure if it's relevant,

HTML email forms

You probably meant a different context of the word "form," but J.I.C., forms won't submit from a mail client that I know of, it will "link" to the action used in the form, but it won't post data.

swa66




msg:4001696
 7:48 pm on Oct 5, 2009 (gmt 0)

Substitute template where it said form to avoid confusion. Customer wants to enter the text themselves.

I think I've sold them on the idea of using a service like mailchimp, and made them a template there that's reasonable consistent with their look in print and web.

Moreover it protects their assets should they get accused of spamming etc. Although I've no doubt the folks like mailchimp will be strict in order to maintain their business, which I fully support and warned them enough about.

willybfriendly




msg:4001709
 8:24 pm on Oct 5, 2009 (gmt 0)

I have had this conversation with several clients over the past few years. The average consumer is incapable of making the distinction between print and web, and this is even more true when it comes to email.

I submit my thoughts to the client in writing and then do my best. Every email client will render it a bit different - up to and including stripping images (I am thinking of the last time I checked Operamail, which put all the images at the top of the email).

Then there are people like me that only receive text emails. Many of my clients market to a rural US market where poor, slow dial-up connections are still common, so I suspect that a fair number of them also opt for text only to conserve bandwidth. My clients generally choose to ignore this tidbit.

The advice to include a "Click here if you are unable to read this email" is sound.

Keep the template simple and clean, and minimize the graphical elements as much as possible.

incrediBILL




msg:4001716
 8:36 pm on Oct 5, 2009 (gmt 0)

Many of my clients market to a rural US market where poor, slow dial-up connections are still common

Many rural US have satellite download, dial-up upload, so the connection is only really slow in one direction.

Don't forget, broadband wireless is also being deployed faster than any other service in the US and is becoming available much faster than any cable or DSL service in those areas.

willybfriendly




msg:4001768
 10:44 pm on Oct 5, 2009 (gmt 0)

No exact figures Bill, but I know the market and demographics in this niche. I am, after all, the one that fields complaints about how long certain "massive" emails take to download.

Sadly, there are still a lot of places where folks are saddled with 14k dial-up and are to ignorant, lazy, cheap or poor to move to satellite. Shucks, as little as 10 years ago I lived in a place that left me as one of them. Landlines were unreliable even for speech, and geography would have forced me to run a 300-400 ft cable from any dish. From home I lived with a connection that might reach 24k on good day.

simonuk




msg:4004296
 2:33 pm on Oct 9, 2009 (gmt 0)

Having been forced to create numerous html emails in my last job (left 6 months ago) I can safely say that the only way I could get the html email to render correctly in most email clients (software and webware) was using...wait for it...tables!

With some online email sites stripping out ALL classes and ID's it was simply pointless to use css for anything other than font styling (but even this didn't always work).

You are correct about outlook 2007 - it took one giant leap backwards and made my life a nightmare!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved