I just read this article that talks about how email clients clip emails that are over a certain size and sometimes even marks them as spam.
Since images are included in most emails using a <img src="https://www.files/my-image.png">, would these images be included in the size calculation? They're loaded asynchronously so I'm confused if they would be or not.
It all depends on the mail service provider. The type of message that you are sending and the recipient - and of course you don't always know the answer! You can embed, you can encode and you can include links to images. It's impossible to expect everyone to get the emails you want to send!
For instance HTML emails. Who would know if the email you send will survive the process? There is so much that could go wrong.
When using images in an email I try to go for one picture and a logo as a max, with the text set up to appear early on and to get to the point. If I have a long message, I will want to tease it on the email, get the click and have my recipient come to a landing page where I have much more space and much tighter control.
This I find increases my open rates etc, most importantly, it tends to be the way that gets the most people to take action. I do like to use styled HTML. This means that the emails look good yet the focus is on the text so if the style does not survive the transmission, the message still gets through.
You have some choices!
Related
Part of my job involves turning psd designs into html to be emailed out for email campaigns. In the past I've always gone through and converted everything to a suitable html element where possible but I'm now questioning whether there's any point to it?
Is okay just to use one giant image? I only ask because it seems using html elements is only really important if a) I want the information in the email to get to the client if images are blocked and b) for SEO.. yet search engines won't be indexing my code since it's all going through email.
If I'm pretty confident that the clients I'll be mailing won't have the images blocked, is it okay just to treat the entire email body as an <img />?
Thanks
I guess it would be okay, but I wouldn't recommend it. Here are a few reasons why:
The readers won't be able to select and copy any of the content in the email, which in my opinion is really annoying.
You will not be able to have links in your email, the only thing you can link is the entire image.
If they do have images disabled, which i believe is fairly common, the wouldn't see a thing without downloading the image.
Increased email size due to the large image, which for mobile devices is a pain.
An image will not adapt to the window/display size. Text/HTML-based mails can at least break row if the content doesn't fit, to make it more readable.
And the list goes on. The other answers point out a number of additional reasons as well.
I don’t know that there is any definitive answer to this question, but here is my take on it:
I think it’s a good idea to convert certain elements to text so that they can be copied or manipulated. If you have a phone number, you may want that to be readable so that anyone with an automated dialer can click and complete the call. Certain email programs might automatically convert an address to a link to the map. Those features won’t work if any of these elements are flattened into the jpg.
For those mobile email clients that will not render the image on the screen (either because it’s just showing the preview or hasn’t yet downloaded the content) it’s useful to see some of the alternate text (and body content) before viewing the full image.
I know you said that you are sure your clients won’t have images blocked, but you can’t really rely on that. A well-meaning administrator who makes a change to the firewall could accidentally block all incoming images to the entire domain and your email will be worthless.
Lastly, an HTML email with one line of code to load an image has a high possibility of being flagged as spam.
I hope this helps!
What about bandwidth concerns, for users viewing your email on a mobile device? If it's a large image, do you want to blow out their data caps?
Or users using assistive technology, for visually-impaired people. Such as a screenreader(text to speech).The real text is helpful for scenarios like that.
It is theoretically possible to have a converter, that scans the color areas of a bitmap image and creates the same looking image, but using the CSS/HTML. CSS could be controlling colours of pixel-small html blocks. The further optimisation could be done by introducing the larger html blocks with similar color maps.
The resulting markup would be very large, but is it theoretically possible to achieve?
The main goal is to be able to e-mail clients a good looking promotional and informational e-mails, bypassing the problem of 99% of the recipients won't click to enable images in an e-mail. With such HTML-encoded images, a sender is sure that the e-mail looks as expected on the client side.
CSS does not reliably render in email. Bypassing any problems with your theoretical scanner, this is why images are the go-to standard in designed emails.
To see what I mean, look at Campaign Monitor's Guide to CSS support in email.
This would generate so much markup and put such a strain on the rendering engine of the recipient's email client that I don't think it would be viable in practice.
Also I wouldn't trust most email clients to render CSS accurately / reliably.
It is probably theoretically viable (in terms of actually generating the HTMl/CSS), although screen size may be an issue with this (for example divs could get pushed onto the next line whereas in the image they were inline).
I'm trying to figure out where to put some code in an email. You know how you can get newsletters with styling and images, etc? I wanted to send some out but I cant figure out where to put the code. Do you add the images as attachments? Do you put the code in the body?
or should you upload the .html file as well?
Build the page as a normal HTML page. Use TABLES (yes, TABLES) for your layout. You can use inline CSS, but you cannot use a stylesheet. All images must be fully-qualified (http://yoursite.com/images/). Don't make it wider than about 650 pixels. No JavaScript.
View your newsletter HTML in a browser
Do a select-all, and copy
Paste it into a new message and send it to yourself
See what you end up with
Try other mail clients
Various mail clients will mess with your markup and your styles. What works on Gmail will look like poop on Outlook etc. It will be an exercise in frustration. Test, test, test.
Assume all images will NOT BE SHOWN when the user originally views the email.
Here's a good guide to what works and what doesn't:
http://www.campaignmonitor.com/css/
My advice: keep it simple - a logo and some text and a link to the real newsletter. Making email newsletters is a fine art, and frankly, people prefer to read them in a browser where they behave like a web page.
Sending out HTML emails eigh?
There can be a lot of problems you will quickly encounter, mostly revolving around each email client having their own different way of handling things. The aim here is to keep your email as small, simple, and unbroken as possible.
The message:
Each language has it's own requirements, you need to check with the language you are using to see what is easier, to do it inline as part of the mailing script, or to have it inserted through a HTML file, etc. So for more details here, post the language you're using.
Layout:
This is where message simplicity comes in. The best layouts are usually the most simple ones, especially considering not all email clients are 100% HTML standards compliant. You won't know how big your client's viewing window for the email will be nor can you force it to any size or pop it out. Remember that it's goal is to be a message, not a webpage. Usually simple flexible/elastic tables will do the trick just fine if you have anything more advanced than simple paragraphs.
Images:
Link everything statically (statically means http:\\www. ....mypicture.png as opposed to dynamic linking which looks like this \images\mypicture.png) hosted from your server. The reason for this is so that you will have no broken links, your email will be smaller in size (as opposed to attatching). The downside is that some clients may ask about showing pictures. The cold hard truth is that this cannot be avoided no matter which method you use (See for more details).
Links:
Again, link everything statically. Local/dynamic link's won't work and your recipients will be mighty unhappy.
CSS
Either have your CSS classes at the top, or everything in-line (< ... style="..." />). You don't want to attach a CSS file, it's messy and unconventional.
Scripts
Inline or at the top of your file, for the same reason as above.
Additional Documents
If you want to include PDF's or DOCX's, etc, the best and most common methodology is just like images, to host on your server and simply include a static link in your email to them. It keeps file size down and you don't have to worry about what each and every email browser/reader is going to do.
First, why (historically) was conversion tracking implemented by html pixel tracking versus using other small and able-to-be-made-nearly-invisible html elements which could provide the same information? Curious why html images were used as opposed to other methods.
Second, many email clients, e.g. Outlook and Gmail don't display images in html emails by default as a means to "protect your identity". Why do images provide greater exposure of information than the other markup elements in the page? They all show up in some server's web log as a GET from some IP address with some possible query string parms, so I'm not sure why images represent additional risk.
versus using other small and able-to-be-made-nearly-invisible html elements which could provide the same information?
Name one! I can't think of one except images, at least not in good old HTML 4, which still is the standard for rich E-Mail until this day. External style sheets would be a possibility nowadays, but don't get loaded in E-Mails. Background images could be disabled. iframes came later.
They all show up in some server's web log as a GET from some IP address with some possible query string parms, so I'm not sure why images represent additional risk.
When an image resource is embedded into an E-Mail, the time when that image is loaded is the time when the user reads the E-Mail. Plus, the IP the image is pulled from is the IP the recipient is logged on to the Internet with at that moment. A badly patched Windows installation might be enough to facilitate an attack with this.
From the request, it is also maybe possible to determine the recipient's operating system, whether they're behind a Firewall / router, which Internet provider they're with, where roughly they are located.... All already very, very sensitive information.
When you load an image from a site, you make a request to that sites http server. The request contains header information which is pretty extensive.
Images were there from the first HTML spec, which explains their common usage. <iframe>, <object>, <script> and all the other embeddable elements came in later editions and were not always supported or enabled in the browser.
Displaying images in HTML Emails can be seen as a "security risk" as confirmation for spammers that somebody actually reads their spam mails.
I have seen some mails which has HTML content embedded in them. The content of the mail changes as the corresponding webpage in their site change(for example price of stocks which keeps updating in the mail itself). How to link such webpage content into emails?
In other words how to link a web page into an email so that whenever I change the html page, the mail content also changes.
Thanks...
A thought: maybe they are using an image that is downloaded from the server?
As you can't have JavaScript in an email or even most CSS, I'm guessing this might be one of the only ways. I'm pretty sure that one email client or service removes every piece of "special" HTML: iframes, JavaScript, CSS, Flash, etc.
You could place an image in your HTML - which was updated by you on your server.
This may be impossible due to security limitations, but you may be able to use an iframe element.
Not a solution, but a quick answer from my site on this topic as a user: Beside the point that Javascript/Image/IFrame/Flash solutions doesn't reliable work in all email clients, but are a general security risk, I dislike the basic idea of changing the looks of an email after you have send it without the receivers approval. Additionally you make it very easy for the user to be tracked (working hours, locations, view) and that is definitely NOT in the interest of the users. If you have something important or interesting to tell just provide a link to your site plus a short description...