Fluid mobile email design (part 4)
1. What’s a fluid email? {View}
Fluid emails adapt their layout to different device widths.
From a 176px wide N70 or Sony K75…
To a 320px wide iPhone …
1024 x 768 tablet like the iPad…
to your Gmail account on a PC.
Fluid templates set the container width in percentages, and lend themselves to rich-text layouts.
2. Fluid images?
Adding a fixed-width image into a fluid layout can cause issues.
The 300px wide fixed-width image in this net-a-porter mobile email, is perfect for the 320px wide iPhone (below left). But doesn’t do as well on the 176px wide Nokia (right).
In contrast the elastic image on the MAC Cosmetics mobile site, scales to fit either device width.
3. 550px wide fluid image test {View}
I tested this template - adjust your browser to view it scale - which contains a 550px wide image with the code:
IMG style=”width:90%; max-width:550px”
The image scales down, but not up beyond 550px wide (the images default width). It’s set at 90% to leave a margin around the edges.
In portrait mode on the iPhone 3G / 320×460 …
In landscape mode on the iPhone 3G / 460×320 …
BlackBerry 8530 (Curve) / 320×240 …
Samsung SGH-i607 (Blackjack) / 320×240 …
In Hotmail (after I scaled my browser down) …
In Hotmail (default browser size)…
And on the iPad (See Net-a-porter with and without a max-width)
4. Support for fluid images
| Looking pretty good |
|
|---|---|
| Email clients | |
| Outlook 2000 | Yes |
| Gmail | Yes |
| Hotmail | Yes |
| AOL | Yes |
| Outlook 2007 | Yes |
| Thunderbird | Yes |
| YahooMail | Yes |
| Entourage | ? |
| Apple mail | ? |
| Lotus 7 & 8 | ? |
| Mobile | |
| iPhone 3G + 4 | Yes |
| iPad | Yes |
| N70 Nokia | Yes |
| Sony K750 | Yes |
| Android | Yes |
| Samsung SGH-i607 (Blackjack) | Yes |
| BlackBerry 8530 (Curve) | Yes |
| Web browsers | |
| Firefox 3.6 | Yes |
| Chrome 5.0 | Yes |
| Internet explorer 8 | Yes |
| Safari 4.0 (Max around 280px) | Yes |
| Opera 10.6 | Yes |
The test template scaled below 550px in all browsers. Though there are some caveats: Minimum browser widths vary, e.g. Safari 4.0 went no smaller than around 280px wide. IE6 ignores max-width (does not cap how large the image scales up to), but IE8 supports it.
If your on a mobile/email client I’ve not yet tested, let me know how it performs…
5. Alternatives
Fixed-width images:
If your using fixed images in a fluid layout, then make them small like in this KEEN mobile email:
@media query:
For devices with CSS3 support @media is an alternative. It’s supported on the iPhone, Palm and Android, though not currently under IE.
Check out Campaign Monitor’s great write up on this Panic email that uses @media. The images below are from that post:
No images:
You can always stick with a rich-text layout for your primary email, like the Good Experience newsletter. One key benefit is smaller file sizes, though I can’t see many B2C emails abandoning images altogether.
No matter what you do, some mobile devices don’t support images. Only the text is displayed like the Motorola MOTO Q below:
There’s great diversity in mobile screen sizes and varying levels of HTML support. Creating multiple, device specific email templates is impractical. We need future-proof designs that adjust to their context.
Fluid emails meet that challenge, rendering well on a PC or mobile device (not just the iPhone). But for wide adoption beyond the, “mobile version”, businesses will want the option of adding images.
Luckily, support for fluid images is stronger than I expected. I’ll certainly be doing some further testing …
—
Update: Read a follow up post here
September 7th, 2010 03:06
Hi,
Great post and really useful. We’ll be adopting this for our campaigns.
Just a heads up, Android renders absolutely fine as well. Pretty much the same as iPhone.
Regards
Alex
September 7th, 2010 09:41
Hi Alex,
thanks for letting me know it works on the Android. Think it will work on Palm as it also uses Webkit along with the iPhone. Thanks for confirming it, I’ll update the post.
Thanks!
September 8th, 2010 03:32
[…] 320 Pixel zur Verfügung. Anna Yeaman vom kalifornischen E-Mail-Dienstleister Style Campaign veröffentlichte gestern in ihrem Blog eine tolle Möglichkeit, Grafiken automatisch auf eine passende Größe zu skalieren. Und zwar mit […]
September 14th, 2010 09:07
While I have been able to successfully adapt to a flexible layout where the header image will flex - I seem to have problems with images I place in articles — they do not flex, even when set with the proper style. Thoughts?
September 15th, 2010 13:15
Hi Ron, hard to say without seeing your email…fill free to post a link or email me a sample anna (at) stylecampaign.com
Also check out: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html (fluid layout) and http://www.alistapart.com/articles/fluidgrids/ Found these helpful in my research…
September 17th, 2010 09:17
Anna –
Images that are aligned center seem to work fine … so I think that is the key.
I did some re-sizing on the other images to bring them down to 150px or below, and the whole layout seems to work much better.
Thanks for a great article!
Ron
September 20th, 2010 04:11
Hi Anna, I’ve just tried this with a mailchimp template for my work email and it works really well! Really great article, thanks :)
September 20th, 2010 05:40
Actually I can’t get non-image max-width to work in Outlook, so I copied your example and the div definitely spreads the whole way across the page.
September 20th, 2010 12:47
While fluid images work under Outlook 2007:
1- http://stylecampaign.com/blog/blogimages/fluid/fluid43.jpg
You’re right, the text in our example spreads the width of the page (100%) under 07:
2 - http://stylecampaign.com/blog/blogimages/fluid/fluid42.jpg
We’ve not looked closely into which clients support max-width (whole new post). Though I remember it worked in Yahoo, AOL, Gmail, Outlook 2000…depends which browser you’re using.
Anyone find an 07 max-width fix feel free to post it up…