Monster’s Fluid Layout Stands Out Among Job Search Emails0
2012 was a BIG year for mobile — mobile opens increased over 48% in only 12 months! With that in mind, companies are (hopefully!) putting a lot of thought towards their mobile strategies in 2013.
As you all know, email marketing is all about knowing your audience, so the first step in figuring out your mobile optimization strategy should involve doing some mobile audience discovery — the higher the percentage of your subscribers opening on mobile, the more thought you should give towards your mobile strategy. To see where your audience is opening your emails, you can use our Email Analytics tool. Once you have this data, you can determine the investment into your mobile strategy.
While a scalable layout that turns responsive on applicable devices is the most desirable approach for readers (it’s easy to interact with in all environments — what’s not to like?!), this may not be the right approach for everyone. For instance, if you have limited mobile resources or text-heavy content, perhaps a fluid layout is the best format. In the case of Monster, it’s the latter — their daily emails are full of text which makes it the perfect candidate for a fluid layout. Let’s take a look!
Prior to starting at Litmus, I had subscribed to numerous job posting sites and started receiving emails from them daily. This email from Monster isn’t sexy; however, unlike many of the other job sites I subscribed to, it is somewhat mobile-friendly since it uses a fluid layout.
WHAT IS A FLUID LAYOUT?
As Campaign Monitor states in their post, Applying Fluid Layouts to HTML Email Design, “fluid layouts adapt to different device or browser dimensions by using percentages (eg. width=“70%”), allowing elements to flow horizontally across the available space.” Since most emails are set up as table-based designs, they can have a fixed-width or a percentage-based width. With a percentage-based width, designers can make the email’s width take up X% of the user’s screen or email-box window.
The width of this email is set to be at 100% of the container table, so the email fills up the width of the reading pane on my desktop, and also scales to fit the width of my iPhone screen.
As a result, the text flows horizontally across the screen and automatically wraps to the next line once it hits the edge of the container (and my screen); this enables the email to be easily read on both desktops and mobile devices.
FLUID LAYOUT PITFALLS
Things can get a little ‘funky’ in fluid layouts when the screen size is really large or really small. On extreme ends of the sizing spectrum, images (especially ads, such as the ones in the Monster email) can become excessively stretched or squished, making the text difficult to read. For example, when my inbox window is stretched, the advertisements become nearly illegible. Long lines and paragraphs of text can also become hard to read.
It’s fairly straightforward to fix these images, by using a little CSS and the max-width property:
<img alt="..." src="..." height="90" width="100%" border="0">
<img alt="..." src="..." height="90" width="100%" border="0" style="max-width: 728px">
As a result, regardless of how large the inbox window is stretched, the image doesn’t exceed its actual width of 728px. Therefore, it remains clear and looks great!
However, not all email clients support max-width. Take a look at compatibility in major clients (from Campaign Monitor):
|max-width support in email|
|Android 2.3+ (Gmail)||Yes|
|Apple iOS (iPhone/iPad)||Yes|
|Apple Mail 4+||Yes|
|Gmail (IE9+, Safari, FF, Chrome)||Yes|
|Outlook.com (IE9+, Safari, FF, Chrome)||No|
|Yahoo! Mail (IE9+, Safari, FF, Chrome)||Yes|
THE BEST OF BOTH WORLDS
As you can see from the compatibility chart above, max-width has limited support in desktop and webmail clients, but great support in mobile clients. As a result, fluid layouts are a great solution for smaller screens. But given some of the pitfalls of fluid layouts (and ever-increasing monitor resolutions), you might prefer a more robust, fixed-width layout on desktop and webmail clients. So what can you do?
It’s possible to use both fixed-width and fluid layouts simultaneously with a little media query magic. In this scenario, a fixed-width layout would be used for the “desktop” version of the email on large screens, while a media query would allow the layout to utilize a fluid layout on smaller screens and smartphones. Check out Anna Yeaman’s post, “Using @media to bypass max-width,” for great examples and tips on how to put this into practice!
Another great attribute of this email is how it still maintains its hierarchy and pertinent information when images are disabled.
Due to the fact that the body content of the email is all live text, the job listings are still present when images are disabled. Subscribers sign up for Monster’s emails in order to receive updates on job positions, so a major benefit of this email is that even in an images-off environment, the important information is still present.
And ALT text? Yup, they’ve got that too! However, it’s a little uninspiring. All of the advertisements have the same ALT text, “Click here…” I’d be a little afraid to click those links when images are disabled since I have NO idea what they would lead me to.
In addition, while they use ALT text on all of the social sharing links, the text is a little long (ie. “Monster on Facebook). In many email clients, ALT text will disappear once the size or length of the text exceeds the width and/or height of the image container. Due to this behavior, it’s probably best to stick to short descriptions and smaller font sizes to avoid having your ALT text removed altogether.
Lastly, Monster’s use of background colors enables the hierarchy to remain present in an images-off environment. With these background colors, it appears as if there is still a preheader, header, body and footer of the email — nice work!
WHAT DO YOU THINK?
What do you think of Monster’s daily emails? I think their fluid layout makes their emails stand out among their competitors, but I’d love to know your opinion! Let me know in the comments.
SUBMIT YOUR EMAILS TO BE FEATURED
Would you like us to analyze your email and feature it in our inspiration series? Simply send us an email to email@example.com and we’d be happy to take a look!
- Another great example of a fluid design is this email from WooThemes — try resizing the browser window to see how the text adjusts in all of the different window sizes!
- Applying Fluid Layouts to HTML Email Design — Campaign Monitor.
- Using @media to bypass max-width — STYLE Campaign.
- Fluid mobile email design — STYLE Campaign.
- The Ultimate Guide to Styled ALT Text.