
Emailology: Two Ways to Ensure that Your Entire Email Is Rendered by Default in the iPhone & iPadPosted December 23, 2011 by Michelle Klann
|
While using the native email clients for the iPhone and iPad, we noticed that in approximately 10-15% of our test emails, the reader only displayed a small segment of the original email. When this happens, it renders the loaded portion of the email with a button at the bottom which reads: "Download remaining XX bytes." Often times the button appears below the fold, especially in landscape view, making it easy to miss.
Most of the time, when the button is touched the remainder of the email is rendered. In other instances, we've seen it load a second portion of the email with no option for downloading the remainder. When the device is flipped from portrait to landscape the entire message shows, when it is flipped back the entire message remains - which leads us to believe that this is an iOS glitch.
Before (scroll to see button):

After tapping the button:

In this particular example, the only thing that is loaded from the beginning is the header image and the button appears well below the fold. Also, the email doesn't fully download after tapping the button. If you flip the phone to landscape view, it looks ok. If you flip it back, everything still looks ok.
Here it is when flipped:

Another thing to point out is that most of the original email was not loaded from the beginning. Therefore there's no content being displayed just under the subject line in the inbox:

This might cause people to avoid opening the email in the first place. Yikes!
If you'd like to see this in action on the iPad as well, here's the original HTML version.
These days, it's hard enough to get your email to render correctly in each email client, yet alone having to worry about your message getting chopped off in two of the most popular mobile devices. If this happens to you and you find a different work-around, please don't hesitate to share your comments below! Or, if you are an iPhone/iPad user and you figure out a way to disable the download button, please share and we can update this blog post for others who are having the same issue.
Cheers and happy testing everyone!
| Tweet |
|
|
Greetings Jeffery, you would add the spaces in-between the </title> and the </head>. So for example your header would look like: <meta content="text/html;charset=UTF-8" http-equiv="content-type" /> <title></title> </head> Please let us know if you have any other questions. |
|
erattt |
u would add the spaces in-between the title |
|
Colleen |
Hi There! I tried adding spaces, and/or span tags between the </title> and </head> tag, but the system automatically deletes them, I'm assuming to clean up the code. Do you know how I might get around this? |
|
yatrik |
Regadint the message "This message has no content", your tip to add 1091 characters within <head></head> works. But I think the reason is the email client is not able to find any non-html text within certain characters or something as I am not seeing that message if I place some text like "View in Browser" before my header image! I can see the same text "View in Browser" instead no content. |
|
|
Colleen, I am not sure what system you are using but you could certainly make up some embedded CSS to use as characters, just don't reference it anywhere within your email. For example: <style> .fake_css {border-top:1px solid #000000} </style> (I would then add lots of CSS declarations to that class in order to get your total number of characters up to 1091) Maybe your system won't delete it if it seems valuable. |
|
Alessandra |
Worked for me! I found the emails were loading fully if I was on WiFi, but if I turned WiFi off, I encountered the issue. However, this fixed it. To save the rest of you some time, here's a section of dummy CSS we added to our existing <style> tag. .fake_css { width:100%; display: block; -webkit-text-size-adjust:none; margin: 1em 0; color: black; text-decoration: none; border-bottom: none; background: none; padding-bottom:0px; padding-left:0px; padding-right:0px; background:none; border-bottom:thin; border-bottom-style:double; background-repeat:repeat; border-left-color:#C06; background-attachment:scroll; border:thin; page-break-before:auto; page-break-before:avoid; page-break-inside:inherit; azimuth:center-left; vertical-align:inherit; font-stretch:extra-condensed; font-size-adjust:none; list-style-image: none; counter-reset:none; letter-spacing:normal; empty-cells:inherit; elevation:higher; } |
|
WebsiteChecker |
In recent days, I am trying to understand it, and searched a lot from the internet.but I still can not find a reasonable one. This article gives a good description about it,and help me understand the issue which confused me a lot.Thanks for your sharing! |
|
sfaf |
Thanks for this article. Unfortunately, my ESP doesn't allow me to edit what's inside the head. your second tip has a typo - it says "Another option is to remove your tags entirely. " I assume you meant that to say remove your HEAD tags? Unfortunately, also not an option for me. Will you be enhancing the EoA tool to render what the email looks like after the user hits 'download' ? Cause otherwise, I'm kind of dead in the water with testing for iphone, which is certainly pretty important. thanks! |
|
pkonotop |
There are two issues facing email downloads on iOS, one being it uses dual-threading for the head and body which is why increasing size of head downloads more of the email. The other issue facing is if your email is quite large more than 50/60kb (inc images) the download is going to depend on your connection type and speed. Link below explains in more detail. http://stackoverflow.com/questions/9323148/html-email-doesnt-display-in-iphone-mail-until-download-full-message-selected |
|
Laurie Chu |
When I add fake <style> after </title></head> code analysis summary shows a critical error as follows: Gmail 1 Critical 2 Moderate 2 Minor STYLE - STYLE declaration not supported in HEAD tag. Is this okay or will it cause gmail to end up in the spam folders of recipients? |
|
Louise |
Yay, yay and yay! Thanks so much for solving this problem!! |
|
etouchservices |
Would luv to see a preview in the test when recipient clicks on 'download'...but thanks for all the info just the same! |
|
GoodWeave |
Alessandra, your code worked perfectly! Thank you! Laurie Chu, you need to put the code in before you close the head tag. |
|
DebstJ |
randomly reading this and so saying hi Laurie Chu! |
|
Denver |
Is this workaround still required in iOS 6? |
|
Geoff Phillips |
Yes, this fix is still required when working with iOS6. |
|
fmadruga |
I assume that a comment tag with some blah blah inside would work too, no? |
|
Scott |
Well, this workaround WAS working for us. It looks like ever since the 6.0.3 update, it's not working any more. Anyone else having this problem? |
|
Keiron |
I tried your suggestion and this does not work. If I add additional "fake" CSS the opposite occurs where the download button remains but with an increased number of KB to download. Is the solution presented here in this article no longer relevant to iPhone 5/iOS6.1.4? |
|
|
@Scott and Keiron, I checked into this and the fix is still working. I used the responsive template we offer for free to check this. We use spaces instead of "dummy css" and that's the approach I'd recommend. If you'd like to send me some code that isn't working properly, I'd be happy to take a look at it. Just send it attached as a text file to geoff [at] emailonacid.com. |
|
Keiron |
YES. Spaces do work! Thank you so much Geoff. Fake CSS does not. |
|
ListsUK |
@Geoff Thanks for this, big help. If we add spaces before the closing header tag, they seem to be removed again once we save it - is that just us? Cheers |
|
|
@ListsUK, What program are you saving your email in? The spaces shouldn't be removed. |
|
ListsUK |
@Geoff Seems the blanks spaces stay in, unless we paste them into a TinyMCE editor, when it either takes them out or jumps them into the body text rather than between the header tags - weird! I'll give it a go with the sample code @Alessandra mentions above. Thanks. |
Jeffrey Merrell
For me there was no content between the head tags except for: <head>
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
<title></title>
</head>
So that leads me to the question, where do we put the 1091 characters?