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 / 320x460 ...

Fluid email

In landscape mode on the iPhone 3G / 460x320 ...

Fluid email

BlackBerry 8530 (Curve) / 320x240 ...

Fluid email

Samsung SGH-i607 (Blackjack) / 320x240 ...

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