CODEWITHSUNDEEP
iphonehtmlcssemailmobile
leepowers
leepowers

Reputation: 38318

Standard way to detect mobile mail client?

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 is opened on the built-in iPhone mail client it will display a version of the message specially formatted for the iPhone. If opened on an tablet or desktop it will display as the complete, full-size version of the email. This is similar in principle to web sites that have mobile-friendly versions of the site that load automatically by detecting the user-agent - but for email clients.

So - is it possible to detect the mail client being used to open an email and format the message accordingly? Perhaps a way to detect the screen resolution?

Upvotes: 16

Views: 12185

Answers (4)

user672118
user672118

Reputation:

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.

Upvotes: 1

Bruno D. Rodrigues
Bruno D. Rodrigues

Reputation: 390

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.)

Upvotes: 0

Tom
Tom

Reputation: 2016

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/

Upvotes: 2

ChrisR
ChrisR

Reputation: 14447

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.

Upvotes: 19

Related Questions