16

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?

Community
  • 1
  • 1
leepowers
  • 37,828
  • 23
  • 98
  • 129
  • You may be able to use CSS width-based media queries on some devices. – ceejayoz Mar 15 '11 at 19:29
  • Do Not Want: I only want images that are mostly text with minimal formatting, and images only where absolutely necessary (don't need branding, colors, borders, etc). Now get off my lawn ;) – davr Mar 24 '11 at 21:39

4 Answers4

18

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.

ChrisR
  • 14,370
  • 16
  • 70
  • 107
  • You could write two variations of the email, and set `display: none;` on one variation a inside the media query (and display: none on the other variation outside it). – Paul Schreiber Mar 17 '11 at 22:07
  • 5
    Yes, but be very careful with that, display:none might trigger some spamfilters into thinking you're actually trying to send spam or phising. – ChrisR Mar 17 '11 at 22:09
2

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/

Tom
  • 1,986
  • 2
  • 18
  • 29
1

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.

Community
  • 1
  • 1
0

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

Bruno D. Rodrigues
  • 370
  • 4
  • 9