I have an html email I send out. It is formatted with tables because the original designer said, those were more reliable than divs for mail clients. All styles are inline:
<td style="font-size: 12px...">
When a single email is received, everything looks great. But as soon as a thread is formed by mac mail, "See more" is inserted.
This messes up the formatting completely, moving cells out of alignment. The See More message appears to be inserted properly - within a single cell, kind of
...
<td>
My Text
See More
My Text
</td>
But there are two of See More messages. One toward the top, one toward the bottom. Weird? The first one doesn't actually hide any text - but repeats it!
Hi Kate
See More
Hi Kate
is what it looks like. The second one does in fact hide text. Has anyone had experience with this problem? Are tables a mistake? Thanks for your help!
I am not sure if this is related, but in iOS on iPhone or iPad if someone chooses to use POP the full message will be truncated.
The work around is to have 1,019+ characters before your </head>.
See: http://www.emailonacid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad
Related
I am designing an email template. I have a running list of brand names hyperlinked to their websites. I would like it to be displayed inline for full-width, and stacked for narrow screens. I had separators in the past like a bullet or a vertical rule such as this: "|". But in mobile it's awkward considering only one name appears per line.
The next thing I tried was to enclose each list item in a border, but Outlook10/13 aren't handling the padding and margin as you know. I want a simple solution that I can show to novices when they populate the template. Any ideas? I'm adding screenshots of what I tried with the borders. But any other idea is welcome.
Thanks!!!
Full Width:
Mobile:
I have tried a lot of ways myself and one thing i found out was having logos in place of links often work better. I know images have to be downloaded but once they are downloaded it looks good. If you do go with images, you can style the alt tags to look like above when its not loaded.
I am facing a problem making a newsletter in Gmail and Outlook.
I've got a table with some TD's that contain a background-image:
<tr>
<td width="401" height="99" background="http://www.domain.com/bg_left.jpg"></td>
<td width="149" height="99" background="http://www.domain.com/bg_right.jpg"></td>
</tr>
I also tried adding the background images trough this method.
But with both ways I've got the following behaviour in Gmail and Outlook.
In both examples there is added some extra padding where the image is repeated.
Someone familiar with this problem? I couldn't find anything about this by myself.
Thanks instead.
For Gmail, you can remove the margin at the bottom of your images by changing the display property to block will prevent that.
Unfortunately, it seems that Outlook.com doesn't allow you to set the display property of images, but if you add a div (which is a block by default) with the same height as the img, as described here, you'll get the same result.
You'll need to use VML to display background images on a table in Outlook. Here is a tool in Campaign Monitor for doing exactly that.
Firstly, confirm your table cell height="" to the same as your image. Assuming it is, it looks like the cause might be your content expanding the table height past the specified height. Gmail has a habit of stretching the text line-heights, so if you have a underneath your subheader, this may be the cause. Remove that and it should fix it.
If that doesn't work, post the entire table and I'll take another look.
I'm having a massive issue with something seemingly simple. I have a HTML email that I am creating. There is a section containing a row of images, some of them with links. Outlook keeps putting a single pixel horizontal space between the first image and the second. I had them in table cells, but even with the images simply in a row in the same table I still have the same issue.
The HTML source can be viewed here, where it looks fine in a browser - but copy and paste into outlook 2010 or 2007 results in the problem.
http://cogentec.co.uk/redbar/bar2.html
Well it seems that although Outlook's compose view shows gaps between the images, once the email has been sent, it looks fine at the receiving end. Even if the recipient is the very same Outlook client that displayed the email incorrectly in compose view.
Solved.
Your images all need display:block;. ALWAYS use this in email unless you are floating images (which is rare)
Ok, so I'm using the suggested window-scrollTo method and it's working just swimmingly everywhere except for one little sticking point.
When Safari decides to show the "Reader" button figuring I might want to save my page for later reading, it keeps the address bar up for a full 5 seconds before finally hiding it like I asked. Kind of an eternity in UX time.
Is this an iOS 6 thing or did it also do this in iOS 5? (I don't have a 5 device to test it on at the moment.) Also, is there any way to get around it?
I've looked around quite a bit and there doesn't appear to be any way to disable the reader button. The only possible solution I found was to make your site less "readable" so Safari doesn't add the reader button. Exactly what makes a site "readable" is pretty murky.
Here's some research on what makes something "readable": http://mathiasbynens.be/notes/safari-reader
Here's a method to make it less readable by putting your content in CSS: http://askmike.org/2012/12/a-hacky-way-to-remove-the-reader-button-in-ios-safari/
The bottom line seems to be that there is no solution. Hopefully Apple will add a meta tag to disable it or at least let us hide the address bar faster.
Here is what worked for me:
I placed all content inside an ol tag.
<ol style = "padding:0;margin:0">
my content
</ol>
From what I read elsewhere, the reader is partly triggered by the number of words on a page, but does not count words inside an ol.
You can disable the reader button by hiding the content that triggers it.
And then displaying that content 1s after the page loads.
For instance, hide all your <p> elements if they are triggering the reader button.
I'm using MFMailComposeViewController inside my application and I've noticed that part of the message has been cut off. Right now it's only trimming the "Sent from my iPhone" text, but should users remove this, I don't want any of the message trimmed back.
Here's a screen cap of what I'm talking about:
To keep my app description as simple as possible, I'm launching the controller from a TabController and it covers the whole screen as a modalView.
I had the same problem and found that it was a header tag at the beginning of the html which seemed to be throwing the entire system spacing off. NO IDEA WHY
Limit yourself to <div><p> using inline styles to get the look you want and it should correct the issue
Or even more simply, put a non breaking spacer before the <h1> or <h2> etc