In the last post, we talked about how almost half of all email opens happen on a mobile device and how majority of people say they will delete an email if it’s not optimized for their mobile device. Even though most people will hit the trash button, majority of businesses have not optimized their email to accommodate the different screen sizes out there. We looked at the two major issues as to why businesses haven’t completely embraced the “responsive movement”: time and knowledge.
Looking at the more advanced techniques, Responsive and Scalable email design, we talked about the advantages, disadvantages and the best time to use them and why it’s best to go ahead and take the time to learn how to code for responsive email design. In this post, we’ll talk about the easier methods, Fluid and Skinny email design. Let’s jump into it!
Fluid Email: Beginner/Intermediate Level
The rundown -
Fluid design uses tables that are based on percentage rather than a fixed, specific width. The table will grow or shrink to the percent of its parent. For example, if a single table width is set to 50% and the browser (the table’s parent) was 600 pixels, the table would be 300 pixels. If the browser were resized to 1400 pixels, the table would then become 700 pixels. If that 50% table were nested inside another table, it would be half the width of the outer table.
Advantages -
Coding an email using fluid widths will automatically allow the email to adjust according to the screen it’s being viewed in. A big advantage to fluid widths is how flexible it is when something needs to be adjusted. If we had a table with seven cells, those cells would be at about 14% (100/7 – 100 being 100%). If that table width were adjusted from 100% to 90%, the 14% cells will automatically adjust their widths eliminating the need to figure out the fixed width for each cell in the newly resized table. There are no advanced coding techniques like media queries needed for fluid design, just good ol’ fashioned percentages.
Disadvantages -
Like the second fluid example above, fluid emails can get out of hand if they’re relying on the browser to be its parent element. This can cause broken designs, hard to follow content with extremely long line lengths and an email that looks overwhelming to a subscriber. Also, only one columned sections can be used, leaving you to sacrifice some design creativity. Imagine that 50% table looking fine on a desktop but 50% of a mobile device width? That’s super small and we’ve seen content broken up so much with using multiple columns where it was 1-2 letters (yes letters, not words) per line – talk about hard to read! Fluid isn’t the best to use when there’s a need to slice an image for a table with multiple cells – it could cause gaps between the images or the whole email to break if the table ends up wider than the width of the entire email.
Best to use when -
Fluid email works best when the sections are fluid inside of a fixed layout because the fixed layout becomes the parent element that all the fluid sections will adjust to (that’s actually the setup of the first fluid example!). It’s also best for simple designs not containing complex and detailed graphics, especially graphics that need to be sliced in a way to create the “foundation” of the email rather than them being a part of the content inside of the email.
Does it meet the two challenges?
It depends. If the concept of using percentages over fixed pixels is easier, then it helps with the knowledge challenge and could possibly save time if the parent element is fixed rather than depending on the browser, preview pane or screen size. Fluid definitely helps your knowledge by making it easier to get started with scalable design. You can use large text and images knowing you’ll be working with one columned sections. It’s even a method to start trying the scalable hybrid method by adding a media query to change the fixed layout width for smaller devices knowing that the fluid sections within the email will adjust accordingly.
Skinny Email: Beginner/Low Intermediate
The rundown -
A skinny email is basically a fixed email that’s “skinny”, ranging from 400-480 pixels in width. Because of the short width, it looks optimized for a mobile device while still looking normal for desktop viewers.
Advantages -
There’s nothing fancy or new to learn, unless you need to learn how to code for emails! While only one columned sections are recommended, because the email will be exactly the same for both mobile and desktop, complex images, slicing and designs can be used. A skinny width table can also be the parent element to fluid sections inside it, making it faster to develop – just be sure to leave out sliced images and save them for fixed width sections.
Disadvantages -
Just like a supermodel, being too skinny can be a bad thing – remember your desktop subscribers! Any email under 350 pixels can end up leaving a desktop subscriber thinking they received the mobile version of your email by mistake.
Best to use when -
You don’t have the time or knowledge to learn a new coding technique. You can code the same ol’ way without concerning yourself with the different experiences between desktop and mobile device subscribers. This method is also best combined with the scalable method – large, minimal amounts of text work great in a skinny design!
Does it meet the two challenges?
Skinny email totally takes care of time and knowledge, but it can be a little enabling. Meaning, it’s easy to use skinny emails in lieu of at least exploring responsive design. It’s a good starter method for beginner and intermediate levels who understand how to code for emails at the very basic level, they can still code for their mobile subscribers.
Recommended resources:
Fixed vs. Fluid & Another Option – Part 1
The first of two parts explaining the difference between fixed emails and fluid emails.
Fixed vs. Fluid & Another Option – Part 2
The second of two parts discussing the hybrid method that uses a fixed parent element and how to use fluid sections inside of it.
Modern HTML Email by Jason Rodriguez
The book of all books about coding for emails. It starts off building a solid foundation to coding email then goes into the advanced techniques of adding media queries to make the email responsive. You’ll see how the fluid method comes into play and get a good understanding of what you need to be aware of as you design and code your email.
So to recap:
Responsive Email: High Intermediate – Advance+ Level
Uses media queries to change layout, font and image sizes based on the device. While harder to get the hang of, the benefit of having an optimized email for both desktop and mobile subscribers makes all the experimenting and testing to learn responsive totally worth it.
Scalable Email: Any Intermediate Level
Similar to responsive, but unlike responsive, the layout does not adapt to the screen. However, the text and images are large and engaging enough to still look good for mobile devices. Good for a designer to use to get better acquainted with how responsive works.
Fluid Email: Beginner/Intermediate Level
Uses percentages rather than fixed pixel widths. A fluid email can look great on a mobile device that uses only one columned sections, simple design and minimal text. Works the best when sections are fluid in a fixed width table.
Skinny Email: Beginner/Low Intermediate
An email coded the “old school” way, no media queries, with a 480 pixel or less fixed width so it fits comfortably in a mobile device. If a designer knows the basics of coding an email, they can still create an email that their mobile subscribers can read easily, especially when large text and simple design are used.
If you decide to go with any method other than responsive, we encourage you to take the time to at least play with responsive email design to see if it will work for you. Check out our Responsive Template Boilerplate – play around with the media queries, try to make additional sections and test the outcome in your browser by resizing it!
We hope this little “guide” can help you pick the right method for your email designs based on how much time you have and how much you currently know about coding for emails. Mobile email opens are only going to continue to rise so let’s embrace it and start considering our mobile subscribers in our designs, regardless of challenges!
Until next time – happy designing!