Today’s post comes from our email designer, Ryan Sawyer.
For the final Webs blog post before the start of the new year, I wanted to talk about some design trends that have emerged in 2013. Looking toward the year ahead, consider how these 3 growing trends in the email industry can give your emails a fresh and modern look for 2014.
As Bob Dylan said, “The times, they are a-changin’.” Gone are the days of glossy buttons, drop shadows, heavy gradients, textured backgrounds, and realistic-looking graphics. GONE, I SAY! A new school of design has wormed its way into our collective hearts, and that is Flat Design. Decorative design elements used to compete with content for the user’s attention. Nowadays, content is king, and flat design is its knight in shining armor. Or maybe it’s the castle that King Content lives in…You get the idea.
With flat design, an email’s non-essential elements have been removed, and all that remains is clean typography, plenty of padding (aka “negative space” or “white space”), and some very simple graphics (usually vector-based “cartoony” images created in Adobe Illustrator). Since many of the email’s elements are created directly within the HTML/CSS coding rather than utilizing image-based slices, the email now loads more quickly and is easy to read at almost any screen size, giving your smartphone and tablet users a much more pleasant email-reading experience. Don’t worry; it looks great on desktops, too.
Flat design also embraces short headlines and minimal amount of body copy. If flat design had a middle name, I like to think it would be “Minimalism”. Users are bombarded with all kinds of information throughout their day, so if your email’s message is going to be understood in a short time, it needs to be short and to-the-point. If your message can’t be conveyed fully in a few sentences, consider using an enticing snippet of text, then linking users to a landing page with more information.
“But Ryan, without drop shadows and glossy buttons, how will the user know what’s clickable and what’s just a colored box?” Slight adjustments in alignment and spacing, along with careful use of color and copy, can help make an interface’s structure clear to the user. Check out some of the links below for excellent examples of successful “flat design” across the web:
With more and more users viewing emails on mobile devices (51% of all emails are opened on mobile), the importance of readability has never been greater. Responsive and scalable emails can adjust their size (and sometimes their entire layout) based on the width of the screen they’re being viewed on. This means that you can code your emails so that the items you REALLY want the user to read or click (such as headlines, offers, and call-to-action buttons) can be enlarged to an easy-to-read and easy-to-click size, no matter what device the user is on.
Even if creating responsive or scalable emails isn’t a possibility for you right now, you can still incorporate larger elements into your design. An average desktop email is around 550 pixels wide. To see if your most important elements are large enough, try shrinking the email down to half its size. This is about the size your users will see the email if they open on a mobile device. Are the important elements still readable and/or easily clickable? Don’t make the user hunt for what they’re supposed to do…making them pinch-and-zoom to make something readable or clickable can be a frustrating experience for the mobile user, which means they’ll be less likely to take the action you want them to do.
Be selective with which elements you make large, though. Like the saying goes, “If everything’s important, then nothing’s important.” Carefully decide which parts of your email should get visual priority. If possible, try not to use large photos multiple times in a single email. This not only increases the email’s load time, but it can sometimes trigger spam filters in email clients. Vector-based graphics and icons are great for enlarging because they have small file sizes and can often convey the same information as a photograph. Why show a bulky photo of a customer service rep sitting at a desk when a crisp icon of a headset works just as well?
Good news! “White space” doesn’t have to be white! Effective use of color for your backgrounds is a great way to convey emotions, show visual hierarchy, and make certain elements (like call-to-action buttons) stand out. Consider the use of contrast and varying shades of light and dark to help set elements apart from each other.
It can be tempting to make your emails a veritable rainbow of colors, but they have to make sense for both your email’s message and your overall brand. Consider how different colors can convey different emotions. Bright and highly saturated colors are good for conveying energy and action, whereas less saturated colors are good for conveying calm and relaxation. Peruse sites like FlatUIColors.com, FlatDesignLuv.com, and ColourLovers.com for inspirational color palettes.
One final tip: find out which companies are using some of these new “flat design” techniques and subscribe to their emails. Get a feel for how they’re using colors, shapes, and shortened copy to get their messages across. Translate what you can into your own emails, and help make your users’ email experience a more pleasant one.