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?
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
min-width properties to the surrounding container, usually a
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
min-width in email clients
min-width support in 24 of the most widely-used email clients. Here’s what the situation is like in the top 8:
|Google Gmail||Android 2.3 (Gmail) |
 For full CSS rendering capabilities, see MSN Developer docs |  Tested on a Google Nexus S |  IE7: Partial support. Good in IE9, Safari, Firefox, Chrome |  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.
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?
@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.
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.