Browse by...
Home Resources Blog

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 more so, 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]
Live Hotmail
Mail 4
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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free