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? 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: 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: [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. 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. Source: http://www.campaignmonitor.com/blog/
