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…

Fluid email

To a 320px wide iPhone …

Fluid email

1024 x 768 tablet like the iPad…

Fluid email

to your Gmail account on a PC.

Fluid email

 

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

Fluid email

In contrast the elastic image on the MAC Cosmetics mobile site, scales to fit either device width.

Fluid email

 

 

 

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 …

Fluid email

In landscape mode on the iPhone 3G / 460×320 …

Fluid email

BlackBerry 8530 (Curve) / 320×240 …

Fluid email

Samsung SGH-i607 (Blackjack) / 320×240 …

Fluid email

In Hotmail (after I scaled my browser down) …

Fluid email

In Hotmail (default browser size)…

Fluid email

And on the iPad (See Net-a-porter with and without a max-width)

Fluid email

 

 

 

 

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:

 

Fluid 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:

 

@media email

 

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:

 

Fluid email

 

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

 

 

9 Responses to “Fluid mobile email design (part 4)”

  • Alex Fenwick
    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

  • Anna Yeaman
    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!

  • Flexible Grafiken für Smartphones - dialogue1 E-Mail-Marketing Blog Tipps, Ideen und Fallbeispiele
    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 […]

  • Ron Blaisdell
    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?

  • Anna Yeaman
    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…

  • Ron Blaisdell
    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

  • Becs
    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 :)

  • Becs
    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.

  • Anna Yeaman
    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…

 

Leave a comment: