Become a Pro at Designing Emails for the Android
We have just released beta versions for both the native Android Email Client as well as the Android Gmail Client Application. For those who have not had the privilege to pick up one of these extremely sleek and user friendly devices, let’s dive into a few high points with regard to the way they render emails.
The Android essentially resizes each text string so that it fits neatly within the vertical or horizontal viewport. As you zoom in, the text gets larger and wraps nicely so that there is never a need to scroll side to side while reading. This has a fairly drastic effect on your design layout but the payoff is that users will have a much easier time reading the content of your email. To see the text wrapping for yourself, check out our Android Demo.
Here are a few highlights:
- The Gmail app does not allow you to zoom whereas the native email client does.
- Generally speaking, the Gmail app follows the same rules as it’s web version counterpart: No support for embedded CSS, and it is better to use the background attribute within TDs vs. relying on backgrounds in CSS.
- The native email client increases your font size by about 10% – to our knowledge, there is no way of turning the text resizing off.
- The native email client does not block images and there is no option to do so – whereas the Gmail client does block images by default and there is a fairly large button on the top right for unblocking them.
- Alt and title tags do not work when images are blocked in the Gmail app.
- Gmail converts your body to a DIV (in the web version and on the Android Gmail app). This is extremely important because since there usually isn’t a width set in your body, the Android sets the width of your converted body tag to that of the device viewport (horizontal or vertical). So if you have a background color or image in the body of your email, it will probably get cut off. Here are a few possible fixes:
- Wrap the contents of your email in a table or div with the WIDTH set to the widest element in your layout. Attributes or css properties will work. This is a good fix if you do not have a background image in the body tag. If you are using a background color in your body – be sure to add it to your wrapper table or div as well.
- Add an inline CSS width attribute to your body:
For example: <body style=”width:800px”>
The problem with this solution is that your email will now be left aligned in the web based Gmail client and the background color will not extend to the far left and right. This is because the web based Gmail client will also convert your body to a div. One way to center it would be to add “margin: 0 auto” to the style of your body tag along with the width property.
IMPORTANT NOTE: *You must use ‘px’, ‘em’, or ‘pt’ in either of these options – percentages will not work.
- The Gmail app does support animated gifs, but animations do not loop. Instead, it stops on the last slide.
- If there is a height property on a block element that contains text, each client handles it differently. Gmail sets the height of your block element to “auto” so that there is no overlap when the text wraps within it. The native Android client does not wrap text within block elements that have a height property, however it increases the font size so often times there is a text overlap on your box element container. The moral of this story is to avoid height properties on block elements if you want your email to render nicely on the Android. This does not seem to be a problem from within TDs – just div, p, li, ul, etc.
Designer Tips and Tricks
All in all, we give this device an A+ for usability, readability, and support for web standards. However, we’ve seen some layouts get really messed up from the text wrapping. We plan to follow up this blog post with a few more examples but in the meantime, here are some good habits to get into before running your emails through our Acid Test:
- As mentioned above – wrap the contents of your email in a table or div with the width set to the widest element in your layout. Be sure to include the same background color as you have defined in your body tag.
- Make sure that your content can wrap freely and avoid adding <br />’s in the middle of sentences.
- Try to avoid using the CSS height property.
- Avoid embedding important messages in wide images (over 320 pixels) – users will most likely have to scroll left and right to read it.
- Text aligned to the center or right will not get wrapped so again, your text might become cumbersome to read in the vertical viewport.
- If you have text within a TD, be sure the table can stretch vertically without messing up the placement of other images in your table.