PocketGPSWorld Newsletter - Formatting Issues

[Darren]

Our latest Newsletter went out this morning. We had spent the last week improving the layout and introducing a newspaper like style that we thought made it easier to read and more interesting.

However it seems that Microsoft email clients and Google GMail is unable to render the CSS code used to format the email correctly.

Whilst we have used CSS for over a year now, the addition of another column seems to have tipped the balance with those readers that are not fully CSS compliant. Whereas previously it was imperfectly formatted but readable, it is now displayed in a complete jumble!

This is a huge issue for all web developers. Having researched the issue, it appears that Microsoft Outlook and Windows Mail use a web render engine that is not standards compliant and is unable to fully render all CSS code.

This will be lost on many of you I know but CSS is the defacto code for layout of web pages and has been in force for years.

Microsoft's Internet Explorer is compliant but for reasons known only to themselves (and Gmail) they use a different render engine for HTML emails (emails that use web design layouts) and these are not compliant.

Frustrating for you who are left wondering why we sent out a Newsletter that looks like a grenade went off in the middle of it and even more frustrating for us!

For those of you so affected, there is a link at the top which takes you to the on-line version which will be rendered correctly using this link. This will ALWAYS show you the latest issue.

In the meantime, short of persuading you all to junk Outlook and switch to an email client that does comply with standards agreed years ago, we will have to see what we can do our end! It's a bit akin to being told you can build a house but have to use mud and straw!


_________________
Darren Griffin

[Darren]

So frustrating having toiled for days on a new style that we all universally liked.

It would be useful to know what email clients and services work and which don't?

We know Outlook 2007 doesn't and nor does Gmail.

Microsoft I can understand, we all know they do what they like but Gmail is a web based email service so has no excuse.

Mind you, Gmail is unable to format it's own emails correctly, I get alerts of news items from Google and when sent to Gmail the format is corrupt so what hope have we!

For web pages, testing is relatively easy, we can maintain a suite of web browsers and load a page in each to check formatting.

Although most browsers handle code in a similar manner there are small but subtle differences.

But for email there is a myriad of clients, literally dozens and dozens and so effective testing is almost impossible.

There are standards compliant clients that will all render properly albeit with minor differences and then there is Microsoft and Gmail!

Perhaps we can employ code which detects a non-compliant email client and displays the link to the on-line version and nothing else?

http://www.pocketgpsworld.com/newsletters/newsletter-latest.htm
_________________
Darren Griffin

[BigPerk]

As far as I can tell, the format is fine on Hotmail - mine certainly doesn't look as if any grenade went off anyway
_________________
David
(Navigon 70 Live, Nuvi 360)

[NickG]

Depending on which email sending engine you use, many engines have a testing feature built in. If they don't, you can easily see what your newsletter looks like in all email clients by using Litmus http://litmusapp.com/

[Darren]

Thanks Nick, that's a useful link, have signed up.
_________________
Darren Griffin

[Darren]

Hmm, that site shows Outlook 2003 rendering it properly and Gmail not. So it's only 'some' versions of Outlook.




_________________
Darren Griffin

[MaFt]

outlook 2003 is fine as it uses internet explorer as it's rendering engine. while there will be some things that won;t render exactly as planned, for the sake of the email newsletter it is fine.

outlook 2007, however, uses word 2007 as it's rendering engine... word? i mean, come on microsoft! word, and therefore outlook 2007, lacks support for a LOT of html stuff - particularly the code required for laying out nice emails.

thunderbird on mac/pc seems to cover every test i've read through. mac mail and outlook 2003 come a close 2nd.

MaFt

[Darren]

So they release a newer client and build in a poorer/older rendering solution? It wasn't broke so they broke it! Only Microsoft eh!
_________________
Darren Griffin

[NickG]

GMail is a browser based email reader than runs inside your web browser. It therefore uses the browser's own rendering engine and does not have one of it's own. The only reason it might not display inside GMail is if you've made your newsletter too wide to fit in the default content area on that platform or if GMail has decided to block some of the images perhaps. I've not seen GMail alter the HTML of any messages I've sent out so far.

Outlook and Outlook Express use the Trident rendering engine, which is the same rendering engine used by IE7 and IE8.

However, when you sent the newsletter out, you specifically put the rendering engine into "Quirks Mode" by deleting the DOCTYPE header (which is present in the online version) used to tell the browser they should render in standards compatibilty mode. You also added the X-UA-Compatible meta tag to force IE8 to behave like IE7. However because of the missing DOCTYPE declaration this would actually have told IE8 to render more like IE5 than IE7.

If I validate the newsletter HTML in my HTML validator application, or using validator.w3.org, there are dozens of errors the your HTML (admittedly, most would not affect the rendering though) but
the main error message flagged is the the missing DOCTYPE declaration so the validator wasnt even able to tell if it was HTML or XHTML - let alone the desired rendering mode.

I would recommend you correct the HTML so that Standards Mode is enabled as this will make it easier to test. It's also much easier to do that rather than getting everyone to change their email clients and saves you posting long rants about why things look funny in IE8, when your HTML is telling IE8 behave more like IE5

The WebDeveloper tool bar for Firefox will show you if the page has the correct headers to put the browsers into Standards Mode. Most online HTML validators will tell you this too.

[Darren]

[NickG]

OK...

Another issue you're going to have (which you can't really do anything about) is that with webmail systems, they use the render mode defined by the hosting page, not the one you specify yourself. There's no solution to that, and in my experience the only way to reliably send out newsletters is to avoid using any really new CSS (2.0) and keep the HTML as basic as possible (which may mean using tables where you'd normally perfer to use only DIVs).

Also, for some bizarre reason on GMail, it's actually altering your HTML which it doesn't seem to do to messages I send out from the platform we use (DotMailer).

I stand corrected about OL2007. I looked it up online and it referred generically to Outlook and didn't mention that 2007 behaved differently to other versions. Word is a TERRIBLE rendering engine, so I'm not surprised you're having problems if thats the case.

To your credit, you've tried to stick to pure CSS and have done a pretty good job, but unfortunately not all email clients behave exactly like browsers (especially on other platforms). Ironically if you'd used tables to layout the newsletter, you probably wouldn't have had any problems. For newsletters at least, I refer you to http://www.giveupandusetables.com/

[Darren]

Gmail is an oddity though, as I said earlier, it even breaks messages from Google!

I find all this 'standards' stuff really irritating. Why have standards if everyone just cherry picks the parts of the standard they choose to observe!

Is anyone using Windows Mail or whatever it's called in Vista and Win7?
_________________
Darren Griffin

[NickG]

Yeah I have Windows Mail set up in Windows 7 for testing.

[NickG]

*you* find them irritating? This is my full time job so imagine how annoyed I get! (actually I think you already know! )

I wish they'd all just give up and switch to a single rendering engine. Preferably KHTML (used in Safari 4 and Chrome) or Gecko (Firefox and family).

[Darren]

We see you’re using an ad-blocker. We’re fine with that and won’t stop you visiting the site.
Have you considered making a donation towards website running costs?.
Or you could disable your ad-blocker for this site. We think you’ll find our adverts are not overbearing!