Email Development

Ensure that Your Entire Email Is Rendered on iPhone & iPad

Image for Ensure that Your Entire Email Is Rendered on iPhone & iPad

Share to

December 23, 2011

February 10, 2014 Update: We’ve heard reports that this fix doesn’t work for iOS 7. We’re still investigating this issue to try and find a solution. If you find a way to fix this problem for iOS 7, please let us know!

May 1, 2012 Update: Through additional testing, we have confirmed that the issue is related to the user’s decision to either use the IMAP or the POP protocol. For users who chose IMAP, an email will be fully rendered when the user opens the message. For those who chose POP, the content will be truncated and the user will be asked to download the full message. By applying the following fix, you can ensure your email will render properly regardless of the user’s configuration.

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.

Let’s start with some examples:

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:

Ensure that Your Entire Email Is Rendered on iPhone & iPad

This might cause people to avoid opening the email in the first place. Yikes!

So what’s the fix?

  1. Make sure that you have a minimum of 1,019 characters before your closing head tag (</head>) including spaces and carriage returns.If you don’t have any need for more styles nor a style block, try inserting several lines of empty spaces.Strange right? This fixed the problem in each of the emails we tested. Oddly enough, I think 1,024 characters totals a single KB – so this might actually be caused by some type of iOS buffering issue.
  2. Another option is to remove your <head></head> tags entirely. Be careful with this solution, some email service providers might place head tags within your email dynamically.
  3. If your email is below 10k, you can try removing all carriage returns and double spaces. We’ve seen instances where the download button no longer showed up if the email was at or below 7k. This option would be my last resort.

Here are some of the notes we took while testing just in case the above suggestions do not work for you:

  1. The issue occurs with the exact same emails on the iPhone and iPad which leads us to the conclusion that it’s an iOS thing, we tested in iOS4 and iOS5.
  2. It’s not sender specific – this eliminates issues with sender reputation.
  3. It’s not column specific.
  4. It doesn’t seem to have anything to do with nested tables.
  5. Some tests that are over 25K render just fine yet others that are less than 10K cause the issue.
  6. The amount that is left to download is not consistent in each of the emails that triggered the issue.
  7. There’s no clear reason why it gets cut off and from where within the email.
  8. Doesn’t seem to be due to meta tags, DOCTYPE, nor media queries. Note: When tinkering with these variables, you might create/resolve the issue because you are switching up the total number of characters before the closing head tag.
  9. It has nothing to do with the internet service (ie: being temporarily interrupted).
  10. There doesn’t appear to be any caching – if an email is opened, then downloaded, the same issue will happen if the exact same email is sent again.
  11. The date/time settings on each of my devices are correct.
  12. I have seen people say that it happens when receiving mail on an Exchange account, I am using a POP3 account and I’m still seeing the issue.
  13. It doesn’t seem to be effected by images, I was able to recreate the issue with all images removed.
  14. It is not caused by html entities (&nbsp).
  15. I tried replacing all the content with Latin and that still didn’t fix it – that rules out content.
  16. It’s not caused by empty table cells.
  17. It’s not a special character – I tried cutting/pasting into Notepad and then I resent the email.

In Conclusion

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!

Kyle Lapaglia

Related blogs

Image for Let it Snow: How to Use CSS Animations in Holiday Emails
Email Development

Let it Snow: How to Use CSS Animations in Holiday Emails

Explore
Image for Email Accessibility in 2024: A Complete Guide for More Inclusive and Effective Campaigns
Email Development

Email Accessibility in 2024: A Complete Guide for More Inclusive and Effective Campaigns

Explore
Image for Responsive Email Design Challenges? Try Mobile-First Email Coding
Email Development

Responsive Email Design Challenges? Try Mobile-First Email Coding

Explore
See more blogs