Web Design Forums

smallbeer · 01-09-2004, 04:55

I need to create a template. anyone got any tips, links, tuts etc?

Jay-NL · 01-09-2004, 05:12

Took me a while to find it again, so enjoy:
http://www.alistapart.com/articles/cssemail/

sleepingfish · 01-09-2004, 05:24

Interesting article that, Hotmail is actually even shiter than I thought before.

Quote:

Originally Posted by The Article

It not only eradicated my styles, but also all of the following tags from my email: <head>, <title>, <meta>, and <body>

Brown · 01-09-2004, 05:34

that's b'cos its web mail. think about it...

when you send out an html email its got a head, titel and body tags in there. when you're viewing using webmail, the hotmail page that has produced the email already has a head, title and body tag - hotmail's own, so any further body tags etc will be ignored.

sleepingfish · 01-09-2004, 05:46

I guess so - it just seems a right pain that some clients will strip out tags, some will add an "x" to the body tag, and some will leave all tags in there.

If only there were some sort of "standards"...

Brown · 01-09-2004, 05:52

there's so many mail clients out there that this is always going to involve a bit of trial and error.

you don't need to put anything in the body tag anyway - there's ways round all of that.

as for link styles, chuck a basic in the <a> to cover your ass. more importantly, think about the medium you are using before trying to create an html email on a dark blue background.

sleepingfish · 01-09-2004, 06:00

Quote:

Originally Posted by Brown

as for link styles, chuck a basic in the <a> to cover your ass

Isn't it better to use quite specific styling i.e. div.nameOfClass a instead of a so that you don't confilct with the styling of a webmail client?

Brown · 01-09-2004, 06:12

i meant:

<a href="http://www.yourmum.com" style="color: #0099cc;">

sleepingfish · 01-09-2004, 06:17

Right you are, old skool.

smallbeer · 01-09-2004, 08:09

old skool indeed. I've forgotten how to lay a page out using tables!

cheers all.

Brown · 01-09-2004, 08:12

dl fireworks from macromedia. cuts it all up in seconds. far quickers than making it all yourself.

note - the only time i advocate using fireworks - except maybe ad banners (which i'm sighing well having to spend all today doing) but then the output is nowhere near as nice as photoshop. you can spot a fireworks graphic. shame.

smallbeer · 01-09-2004, 08:17

I use fireworks

can't afford photoshop. double

slicing here I come! I might put on some old indie tooones as well to inspire the 90s kid in me.

seen.to · 01-09-2004, 08:42

Because I worked for company on a low budget for 3 years, with 90,000 members where our main business came from sending them HTML e-mail, I had to create quite a few techniques and use a few others that were obvious. It was nice having feedback from all those members to instantly let me know if anything was buggered.

Design for 600 - 640 px width.
Don't use CSS.
Do use tables.
Don't forget to link your images from the server.
Do track everything.

As with Web pages use text wherever you can rather than an image of text.

Avoid any scripting.
Personalise whenever you can - if your list has names merge them into your mail.

Include unsubscribe info top and bottom - a simple:
Unsubscribe details at bottom of mail...
will do for the top but have full details at the bottom.

Hotmail:
If you want a background color/image set it for the table as well as the page.
Within your <body></body> tags surround everything within a comment, fixes some Hotmail problems. e.g. <body>Loads of lovely content</body>

Text or HTML?
If you don't include the option in your sign-up process then there's no way of knowing if your end user is going to be using an e-mail reader that just displays HTML raw rather than formatting it. To overcome this I add a simple comment tag at the start of the e-mail that contains either the whole e-mail or a link to the mail if links are user specific e.g.

HTML Code:

<!-- You are receiving this e-mail due to your subsctiption to 
%company%. Unsubscribe details at bottom of e-mail

Hi %Name%,

If you are reading this then your e-mail software is either incapable of, 
or too old to, receive HTML e-mail. For your convenience a copy of this 
e-mail is available at 
[url]http://www.blah.blah/blah.blah?blah=blah[/url]

Everything below this line is HTML formatted and will most likely just look 
like a bunch of gobbledygook to you.
--------------------------------------------------------------------------->
<html>
<head></head>
<body>
<!--hotmail fixer-->
Lovely HTML E-mail
<!-- end hotmail fixer-->
</body>
</html>
<!--------------------------------------------------------------------------
 %name%, you received this e-mail at your e-mail address of %email% thanks to 
your subscription to %company%. If you no longer wish to receive e-mail from us 
please use the following link:
%unsub%
If you believe that you have received this e-mail in error please e-mail 
[email]abuse@blah.blah[/email] and our abuse team will investigate the matter immediately.
Please do not reply directly to this e-mail as replies will not be read. -->

There are also e-mail readers that will attempt to display your lovely HTML e-mail as plain text. Because of these you need to ensure that links are shown as full URLs rather than 'click here's.

This should be enough of a guide for now?

edit: Don't put anything important <head>in here</head> as it will probably be lost. Also don't include anything important in your <body> tag as again it will probably be lost. Define page elements in a table instead. /edit

smallbeer · 01-09-2004, 09:30

nice one.

can you have anchors in html emails? I'm thinking there'd be a problem with webmail clients that open the emails in an iframe or whatever the scrolling container might be.

seen.to · 01-09-2004, 09:55

Quote:

Originally Posted by smallbeer

can you have anchors in html emails?

I never used them with any campaigns so have no feedback to go on but I have seen them used on some porn spam ''click here to view the e-mail'' with the grot contained at the bottom of the mail. Much better than being confronted with some slapper blowing a donkey before you've digested your breakfast.

So I know they work in Outlook Express. In theory they should work in Web based e-mail too - isn't an iFrame the same as any other frame? (without the inherited gayness) - but I've not tried so don't quote me on that.

If you do use anchors I'd say to make sure that they are not critical in anyway to your mail.

Another important point:

The main goal of your e-mail should be to get the 'click' (unless it's a newsletter). It is then up to the site to convert that click to an action, be it a purchase or a registration.

smallbeer · 01-09-2004, 10:01

It's a newsletter, there will be a tect-only version but the client insists on a html version too.

anchors don't work in iframes, t'is why I asked.

seen.to · 01-09-2004, 10:10

Quote:

Originally Posted by smallbeer

anchors don't work in iframes, t'is why I asked.

Then I learned something new too

I'm using an iFrame in my latest project for the first (and probably last) time so it's good to know.

Brown · 01-09-2004, 10:24

can i say it again please:PHPList

seen.to · 01-09-2004, 10:50

Just tried an anchor in my iFrame btw and it worked

roto · 01-09-2004, 12:36

Text only e-mail...problem(s) solved. Boring, yes, but don't you think it's the content of your blast people are interested in? You could also link 'em off to a "pretty" html version of the e-mail blast in a browser window where you are free to use CSS.

OH yeah, I use this system to manage a database of subscribers. Real time tracking, etc. It's not bad. I've been signed up for quite some time and have charter subscriber pricing, so I don't know what they're charging now.

01-09-2004, 04:55	#1 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,238	html emails I need to create a template. anyone got any tips, links, tuts etc?

01-09-2004, 05:12	#2 (permalink)
Jay-NL Not A Designer Join Date: Jul 2004 Location: tHe NeTHerLaNDs Posts: 122	Took me a while to find it again, so enjoy: http://www.alistapart.com/articles/cssemail/ __________________ -= In theory, theory should work in practice. =-

01-09-2004, 08:42	#13 (permalink)
seen.to unusual suspect ™ Join Date: Jul 2004 Location: DE, USA Posts: 2,763	Because I worked for company on a low budget for 3 years, with 90,000 members where our main business came from sending them HTML e-mail, I had to create quite a few techniques and use a few others that were obvious. It was nice having feedback from all those members to instantly let me know if anything was buggered. Design for 600 - 640 px width. Don't use CSS. Do use tables. Don't forget to link your images from the server. Do track everything. As with Web pages use text wherever you can rather than an image of text. Avoid any scripting. Personalise whenever you can - if your list has names merge them into your mail. Include unsubscribe info top and bottom - a simple: Unsubscribe details at bottom of mail... will do for the top but have full details at the bottom. Hotmail: If you want a background color/image set it for the table as well as the page. Within your <body></body> tags surround everything within a comment, fixes some Hotmail problems. e.g. <body><!--this comment actually fixes stuff-->Loads of lovely content<!--nice fixing work there mr. comment--></body> Text or HTML? If you don't include the option in your sign-up process then there's no way of knowing if your end user is going to be using an e-mail reader that just displays HTML raw rather than formatting it. To overcome this I add a simple comment tag at the start of the e-mail that contains either the whole e-mail or a link to the mail if links are user specific e.g. HTML Code: <!-- You are receiving this e-mail due to your subsctiption to %company%. Unsubscribe details at bottom of e-mail Hi %Name%, If you are reading this then your e-mail software is either incapable of, or too old to, receive HTML e-mail. For your convenience a copy of this e-mail is available at [url]http://www.blah.blah/blah.blah?blah=blah[/url] Everything below this line is HTML formatted and will most likely just look like a bunch of gobbledygook to you. ---------------------------------------------------------------------------> <html> <head></head> <body> <!--hotmail fixer--> Lovely HTML E-mail <!-- end hotmail fixer--> </body> </html> <!-------------------------------------------------------------------------- %name%, you received this e-mail at your e-mail address of %email% thanks to your subscription to %company%. If you no longer wish to receive e-mail from us please use the following link: %unsub% If you believe that you have received this e-mail in error please e-mail [email]abuse@blah.blah[/email] and our abuse team will investigate the matter immediately. Please do not reply directly to this e-mail as replies will not be read. --> There are also e-mail readers that will attempt to display your lovely HTML e-mail as plain text. Because of these you need to ensure that links are shown as full URLs rather than 'click here's. This should be enough of a guide for now? edit: Don't put anything important <head>in here</head> as it will probably be lost. Also don't include anything important in your <body> tag as again it will probably be lost. Define page elements in a table instead. /edit __________________ [[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]] Last edited by seen.to : 18-10-2004 at 12:44.

01-09-2004, 10:50	#19 (permalink)
seen.to unusual suspect ™ Join Date: Jul 2004 Location: DE, USA Posts: 2,763	Just tried an anchor in my iFrame btw and it worked __________________ [[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]]

01-09-2004, 12:36	#20 (permalink)
roto This is it - ground zero. Join Date: Apr 2003 Location: Paper St. Posts: 4,307	Text only e-mail...problem(s) solved. Boring, yes, but don't you think it's the content of your blast people are interested in? You could also link 'em off to a "pretty" html version of the e-mail blast in a browser window where you are free to use CSS. OH yeah, I use this system to manage a database of subscribers. Real time tracking, etc. It's not bad. I've been signed up for quite some time and have charter subscriber pricing, so I don't know what they're charging now. __________________ fun: HGC v.4 \| last.fm: DT \| me \| *oi! fck u roto: ...via meebo! New to interweb design?** Your friends at dt can help.

01-09-2004, 05:34	#4 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,215	that's b'cos its web mail. think about it... when you send out an html email its got a head, titel and body tags in there. when you're viewing using webmail, the hotmail page that has produced the email already has a head, title and body tag - hotmail's own, so any further body tags etc will be ignored.

01-09-2004, 05:46	#5 (permalink)
sleepingfish css is for divs Join Date: Feb 2003 Location: Norwich Posts: 4,527	I guess so - it just seems a right pain that some clients will strip out tags, some will add an "x" to the body tag, and some will leave all tags in there. If only there were some sort of "standards"...

01-09-2004, 05:52	#6 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,215	there's so many mail clients out there that this is always going to involve a bit of trial and error. you don't need to put anything in the body tag anyway - there's ways round all of that. as for link styles, chuck a basic in the <a> to cover your ass. more importantly, think about the medium you are using before trying to create an html email on a dark blue background.

01-09-2004, 06:12	#8 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,215	i meant: <a href="http://www.yourmum.com" style="color: #0099cc;">

01-09-2004, 06:17	#9 (permalink)
sleepingfish css is for divs Join Date: Feb 2003 Location: Norwich Posts: 4,527	Right you are, old skool.

01-09-2004, 08:09	#10 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,238	old skool indeed. I've forgotten how to lay a page out using tables! cheers all.

01-09-2004, 08:12	#11 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,215	dl fireworks from macromedia. cuts it all up in seconds. far quickers than making it all yourself. note - the only time i advocate using fireworks - except maybe ad banners (which i'm sighing well having to spend all today doing) but then the output is nowhere near as nice as photoshop. you can spot a fireworks graphic. shame.

01-09-2004, 08:17	#12 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,238	I use fireworks can't afford photoshop. double slicing here I come! I might put on some old indie tooones as well to inspire the 90s kid in me.

01-09-2004, 09:30	#14 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,238	nice one. can you have anchors in html emails? I'm thinking there'd be a problem with webmail clients that open the emails in an iframe or whatever the scrolling container might be.

01-09-2004, 10:01	#16 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,238	It's a newsletter, there will be a tect-only version but the client insists on a html version too. anchors don't work in iframes, t'is why I asked.

01-09-2004, 10:24	#18 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,215	can i say it again please:PHPList

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search