Formatting of HTML mail for WP8 mail client

[Sudarshan Purohit]

Hi,
I'm working on creating mails to be sent to customers using various types of mail clients - Windows 8 phones among them. The mails look great on almost every other client, but the WP8 client renders them really badly (Please see attachments).
The mail is composed entirely within a table, with rows merged where needed. All the text uses the same kind of font styling, however, the text sizes seem to be going all over the place. Note the subsections of the Your Items and Your Service Plan - these lines are all supposed to be the same size and are all formatted using the styling like "font-size:12px;" (only inline styling, no css headers).
I tried using the -ms-text-size-adjust:100% directive, which works fine for Windows 7 phones, but not for Windows 8.
Is there any information on the renderer that the mail client uses for HTML mails? Or else, does anyone have any CSS directives that apply for Windows 8 ?

Any help would be appreciated.

Thanks,
Sudarshan

 

[manicottiK]

This is a total guess...

Do the tables have widths defined? If so, WP may be scaling them down to fit just as IE scales wide web pages down to fit? Even if the tables don't specify width, WP may be rendering the tables as if the display were desktop-width, measuring the width of the resultant table, then scaling it down to fit.

I'm not sure how you'd address it when composing the email except by reformatting the table to that it doesn't "want" to be so wide. I'd also be disinclined to make sure a change for a device with such a low market share, if it would negatively impact the bulk of your users.

 

[Sudarshan Purohit]

Thanks for the reply. I've made the whole mail on just two tables, one with 3 columns and one with 2. Both these tables are set to be 800px. This includes the header, footer, and all of the columns. I'm okay with WP either scaling down all the text to fit, or wrapping the text into multiple lines. All I'm looking for is a consistent behaviour across the mail - here the text that spans across the whole width (using a colspan) is rendered in larger font, the 'Order Summary' section has scaled down the text, and the 'Your Service Plan' has rendered the text larger and then wrapped it. All these are set to the same font size in the source.

Any ideas how to force WP8 to render text uniformly?

Thanks again.

 

[manicottiK]

Again, I'm just guessing here.

Wrap the whole body in one table. That is: <table><tr><td>YOUR MESSAGE</td></tr></table>

It's possible that the scaling decision will be moved to the outermost table rather than the inner parts, letting the same scaling factor be applied to all of the text. I'm not keen on this from a web semantics point of view, but HTML mail hardly counts as "web" so any objections are purely on the grounds of not liking the need to accommodate different rendering devices.

Good luck.