Standard way to detect mobile mail client?

Question

This question is similar to \"Standard way to detect mobile browsers in a web application based on the http request\" except for mail clients. For instance, if an email message

Answer 1

You can try to apply @media css queries that target specific browsers like mobile devices. There is a good introduction on the campaignmonitor help website but be aware, it probably is only supported in a hand full of browsers and devices, iOS being on of them luckily :)

Basically you are defining css styles that target specific screen widths so that you can optimize your email for limited screen space.

@media only screen and (max-device-width: 480px) { ... }

When talking really detection and displaying a totally different email, that's really impossible since you are talking about javascript there and that's not done in emails and probably won't even work in 99% of all email clients. But you can go a loooong way with @media queries.

Answer 2

When you say "mail client", do you mean the real email client that uses ActiveSync, IMAP or POP access? Then you'd need to know if there is any information on each protocol that could simulate the User-Agent from HTTP, which unfortunately there is none on IMAP or POP3 AFAIK. Over Active-Sync, being HTTP, you have the User-Agent and can tweak the responses as you which - for example, first the device asks for a text version (e.g. the preview lines on the list view), and then asks for the whole mime version (possibly html). At this point the server can tweak the email mime and return an optimized version (e.g. tweak the markup, convert or resize attachments, etc.)

Answer 3

I think the best solution is using responsive web design techniques. So my suggestion would be a fluid email layout that would adjust based on the size of the cellphone screen.

Here is an example: http://stylecampaign.com/blog/?p=85

Note: Writing markup for email is a whole different beast than the browser. Here are a few guides worth looking at:

http://articles.sitepoint.com/article/code-html-email-newsletters/

http://www.mailchimp.com/resources/guides/email-marketing-field-guide/

Answer 4

If you want CSS that specifically targets mobile browsers you can try the following code.

<link rel="stylesheet" type="text/css" href="desktop.css" media="screen" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

HEAD tags are often stripped out by email clients, so inline styles are preferred. But if you link to CSS inside the BODY tags it should work.