Email Newsletter and images being blocked

HTML & CSS
1

Hi all,

I put together a very basic newsletter for a client, and tested it in the various browsers before handing over the work. My client sent the email out to his customers, but alot of them complained they could not see the images.

It turns out the images are being blocked by the email clients, e.g. I need to click “show content” on hotmail, and “show images” on gmail to be able to see the newsletter - which is obviously less than ideal.

Is this something I have done wrong code wise for the clients to be blocking the images?

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Some Newsletter</title>
		<!-- Inline Styles-->
		<style type="text/css">
			body{
				padding:0; 
				margin:0;  
				font:normal 18px Arial, Helvetica, sans-serif; 
				color:#000000;
			}
			img {
				border:0;
				display:inline;
			}
			a {
				color:#0093d3 !important; text-decoration:underline; 
			}
			a:hover { 
				text-decoration:none !important 
			}
			a img { 
				border:0 !important; 
				text-decoration:none !important;
			}
			#middleRow{
				vertical-align:top;
			}
			.mailTo{
				margin-left:60px;
			}
		</style>
	</head>
	<!-- HTML Body -->
	<body>
		<table width="753" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td id="topRow" width="753" height="596" background="someurl"></td>
			</tr>
			<tr>
				<td  id="middleRow" width="753" height="87" background="someurl">
					<p class="mailTo">Email this to: <a href="mailto:some@email.com">some@email.com</a></p>
				</td>
			</tr>
			<tr>
				<td width="753" height="369" background="someurl"></td>
			</tr>
		</table>
	</body>
	<!-- END HTML Body -->
</html>

I really appreciate your help!

2

No, there’s nothing you can do about that. It’s up to users to decide if they want to display images or not. They can choose to show images from now on for these emails, but the first time they will have to make the choice. That’s how those email clients work.

3

thanks ralph.m. I thought as much! I just wanted to run it by an expert as I dont deal with newsletters to often.

4

No worries. Mind you, looking at your code, I was assuming you have images in your HTML, with <img> tags. Don’t rely on background images. They are much less reliable.

5

Ahh right! So I may have slipped up then…

6

Right ok, duley noted. Since the newsletter is pretty much all image (I just get handed a psd from the designer), am I right in assuming on this instance that even if I change the code to use image tags, its unlikely the newsletter will show up to clients if its re-sent?

7

Well, you’ll have a better chance with images in the HTML, but that won’t stop email clients asking people if they want images displayed. I don’t think Gmail and others show bg images at all. Check out this compatability table:

8

Yes, it’s unlikely. This is why it’s not a good idea to rely on images in HTML email. There really should be a text fallback for any important info. I often don’t accept images in HTML email—even in the SitePoint newsletters I get. I figure that if an email doesn’t work with images off, the senders don’t know what they are about and not worth my time (no offense intended). For important images, you can have alt text that will appear if the images are blocked. That’s crucial, especially if the top of your email is a header image with the company name etc.

If people using clients like Gmail see nothing when the page loads (no fallback text or anything) they may just delete the email. Only about 20-30% of emails get read anyway, so you need to catch the reader’s attention with important content to give them a reason to accept images.

9

That is very usefull information thankyou, looks like ive showed myself up in this instance. I did ask the client if any of if needed to be textual, since the psd version was 85% stylistic, but I should have had the foresight on this one.

One question since im not an old school coder, if I use image tags inside a <td></td>, what is the safest way to overlay text on top the image? say a hyperlink for example.

10

There is no safe way, I’m afraid. You just have to embed the text in the image and use alt text for when images don’t load. HTML email sucks hugely, and you just don’t want to go down that road you described. It’s a world of pain. :smiley:

Otherwise, have a nice decorative image in one table cell and proper text next to it. That’s what I do.

11

Oh dear lord, HTML email really does suck ass! From what you described, I cannot implement the supplied design in a safe manner at all. I will have to let me client know! Looks like im down a few bucks before the day starts lol.

12

There may be some creative solution, but sadly, thanks to really bad standards support in HTML email, it’s nothing like designing for the web. If you want, PM me a screen shot of what you’ve been asked to do and I’ll suggest how I’d go about it.

13

There are actually two ways of using images in emails.

  1. linking to them from somewhere else - which all emails block because it allows spammers to log your email address when you load the image from their server.

  2. embedded images - which make the email much bigger since the image has to be encoded inside the email itself. Browsers don’t block these images.

So all you have to do to fix your problem is to embed the images themselves in the email instead of simply linking to them.

14

Thankyou Kind Sir, I may just take you up on that offer - I havent heard back yet from my client so I may be back later :blush:

Thats if I dont get the sack !! :x

15

I got really excited about this approach a while back, but then found this:

http://www.campaignmonitor.com/blog/post/1761/embedding-images-in-email/