SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Email Newsletter and images being blocked

    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 Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #3
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #5
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh right! So I may have slipped up then..

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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:

    http://www.campaignmonitor.com/css/

  7. #7
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by johnuk View Post
    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?
    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. #9
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by johnuk View Post
    what is the safest way to overlay text on top the image? say a hyperlink for example.
    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.

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

  11. #11
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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

    Thats if I dont get the sack !!

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    I got really excited about this approach a while back, but then found this:

    http://www.campaignmonitor.com/blog/...ages-in-email/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •