Applying fluid layouts to HTML email design

Following our recent post in Smashing Magazine, we received a couple of questions in regards to designing fluid layouts for email. Hardcore CSS trivia aside, the big questions came down to: ‘Can I use a fluid layout to adapt my design to fit in any-sized email client?’, and perhaps more importantly, ‘Does the CSS used to achieve fluid layouts work at all?’

I’ll answer these shortly, but first, I wanted to look at the fundamentals of fluid-width design and its applications in HTML email. CSS nerds are going to love this.

Using fluid layouts in email

In ‘Web Design 101’, you probably learnt a little something about fixed and fluid (or relative/liquid/flexible/elastic) layouts. While fixed layouts have exact pixel widths for elements, fluid layouts adapt to different device or browser dimensions by using percentages (eg. width="70%"), allowing elements to flow horizontally across the available space. The width CSS property and moreso, the HTML attribute are widely supported across mobile, desktop and webmail clients and can be reliably used to set percentage-value widths for layouts. Here’s an example of a fluid email design (also see below) - try resizing the browser window to see how the text adjusts.

While fixed-width layouts are overwhelmingly the popular choice when designing HTML email, the rise of responsive email design for mobile devices has renewed interest in all things fluid. In theory, if the content within HTML email designs can be set to adapt to the width of any device, then we could use fluid for all layouts, right?

WooThemes go too wide

Sadly, things are never so easy. The email design above adapts nicely when stretched in the browser or reading pane, but then after a point, the wide paragraphs become hard to read. When too narrow, the email can become unnecessarily long and the layout can suffer.

On the web, we’d usually tackle this by applying fixed max-width and min-width properties to the surrounding container, usually a div or table cell. Here’s an example of what this looks like in code:

<table width="90%" style="max-width: 600px;">...</table

As we’ll discover in a moment, quirky ol’ email isn’t that straightforward.

CSS support for max-width and min-width in email clients

We tested max-width and min-width support in 24 of the most widely-used email clients. Here’s what the situation is like in the top 8:

Style element Outlook
2007/10 [1]
Outlook
2000/03
Apple
iPhone/iPad
Windows
Live Hotmail
Apple
Mail 4
Yahoo!
Mail Beta
Google Gmail Android 2.3 (Gmail) [2]
max-width No No Yes No Yes Partial or buggy support[3] Partial or buggy support[4] Yes
min-width No No Yes No Yes Partial or buggy support[3] Partial or buggy support[3] Yes
Market Share 27.62% 16.01% 12.14% 11.13% 9.54% 7.02% 1.7%


[1] For full CSS rendering capabilities, see MSN Developer docs | [2] Tested on a Google Nexus S | [3] IE7: Partial support. Good in IE9, Safari, Firefox, Chrome | [4] IE7: No support. Good in IE9, Safari, Firefox, Chrome

As you can see, support is a little shaky. In particular, webmail clients viewed in Internet Explorer 7 have variable support, while IE6 doesn’t support these properties at all.

That said, things are not as bad as they may seem. For one, the preview panes of most email clients don’t allow content to run so wide that it’s unreadable, which means that you may be able to get away with not using max-width. But nonetheless, it’s easy to see that fluid layouts in combination with max-width are often not the most reliable choice for web and desktop clients, especially if multiple columns are involved.

Fluid for mobile email clients, fixed for web and desktop

Unlike many of the web and desktop email clients above, mobile devices like the iPhone tend to have much better CSS support. The use of fluid-width layouts is also far better suited to these smaller screens, not only due to the very limited viewport size (which pretty much removes the need for max-width), but ability to adapt across the near-infinite screen resolutions available across iOS, Android, Blackberry and other mobile devices.

Fluid images on mobile clients
Adapting to screen dimensions by applying % widths to images and layout, courtesy of Style Campaign

Given the benefits of using a fluid layout on mobile devices and a robust, fixed-width layout everywhere else, why don’t we use both?

With @media queries, it’s possible. In Anna Yeaman’s post in the Style Campaign blog on moving from a fixed to fluid layout, she features a great example of an email that uses a fixed, 550px wide table layout in web and desktop email clients, then switches to width: 100% on small screens. In tandem with fluid images, you can create insanely robust responsive layouts using this technique.

max-width vs. max-device-width in @media queries

Another great example of using simple @media queries to switch between large and small screen layouts is this Starbucks Coffee newsletter by the uber-talented Ed Melly. Unlike previous examples, the @media query used here targets small displays using max-width over the more commonly-used max-device-width. Each of these properties calculates maximum width differently in the context of mobile device viewports and so we generally recommend using the latter. However, if you’re keen to have the layout adapt to most small displays (ie. narrow email client preview panes) and are happy to do a little more testing on mobile devices, then using max-width is certainly a valid option.

A huge thanks to Anna Yeaman at Style Campaign and Ed Melly for providing the know-how and examples for this post. We’d love to hear about your experiences and advice when using fluid layouts in email, so feel free to contribute in the comments below.

Posted by Ros Hodgekiss

8 Comments

  • Scott
    9th September

    Hi,

    I am not sure I understand. With the starbucks example - I tested loading the page in my phone web browser and it worked as expected. The site reformatted - just as it did when I shrunk my browser. Perfect.

    When I sent it as an HTML email - my Nexus S Android displayed it at the full width and did not shrink the newsletter. It was ~600px wide or thereabouts. I use Android 2.3 as you list above and it did not work.

    Am I missing something? 65% of the mail clients above have questionable support of this feature…..

  • Ed Melly
    9th September

    @Scott - are you definitely using the native Android mail app (rather than Gmail)? I’m running Gingerbread on my Desire which gets the fluid version, and I’ve also tested successfully on a few virtual devices.

  • six degrees
    10th September

    This looks truly promising. I guess I’d like to see some more detailed testing scenarios before pushing this technique through production though. However, I also sent the starbucks HTML email to my Android device and opened with the native mail app to see the smaller style. I’m using HTC Inspire 4G w/ Android 2.3.3.

  • Scott Fletcher
    12th September

    @ Ed,

    Ahhh - I use the Gmail App. This is a great feature for customising emails - however the lack of support is annoying when trying to have an overarching strategy! I wish all the clients would agree on supporting the same things!

    Scott

  • Jarrod Purchase
    15th September

    @ Scott,

    If you get them to do that we can invent a Nobel Peace Prize for email clients and award it to you :)

  • stephanhov
    30th September

    let’s say you use @media-query in conjunction with CSS in your < head > tag, and then put your “default” CSS inline due to lack of stylesheet support. Which wins?

  • cc
    5th October

    Has anyone had an experience using this service?
    http://www.htmlforemail.com

  • Ed Melly
    2nd November

    @stephanhov - according to the cascade, inline styles will over-ride those in the head of your HTML document. When attempting to over-ride inline styles, you therefore need to use the <span >!important</span> declaration to give them precedence.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account