One-column template builds are among the best places to begin when it comes to flexing your responsive muscles. A single-column layout design is effectively bomb-proof, plus it’s simple to build, and it’s pretty. One-column

layouts are very readable and compatible with all monitors. And they’re quick to fix, since they have the least amount of nested tables and inline

styles to troubleshoot. A one-column build can get outthe door fast for a quick win.

There’s no getting around it: most email clients block images. In order to defend your message against blocks, you do have some weapons at your disposal. Consider employing one or more of the following to ensure your

email displays the way you want it to.

When working with responsive designs, it’s important to understand that fixed widths will not adjust on their own. Using a media query style to

adjust widths only wins half the battle, as only 50% of email clients support media queries.

Working with percentage-based widths for images and tables results in an adaptive layout across devices. To avoid image and table blowouts in larger

monitors, use a max-width with pixels and a width with percentages.

You may wonder, when it comes to responsive design, just how fancy is fancy? And when is the effort worth it?

Let’s say your base template works great and renders well in all devices tested. What more could you ask for? Well, quite a bit. Don’t be lured by

design complacency. As long as you keep your successful, time-tested base template as a fallback, there’s always room for enhancements, big and

small. Here are a few easy-to-employ elements thatcan take your email to the next level:

Learn more about progressive enhancements for email.

If your company is attached to a desktop email build, making the push to go mobile might well be difficult. Statistics found on mobile vs. desktop

opens vary from article to article (read Email Monday’s recent review), so take the time to research how and why going responsive is important

for your company. Specifically, ask yourself:

If you answer yes to any of these questions, you may find your email campaigns are prime for updating to a responsive design.

Prioritizing brand guidelines can either deter or enhance an email; the secret to success is showcasing branding that works with your message,

rather than competing with it. A few tips to keep in mind:

View Online links have become antiquated in email marketing, plus they take up precious space. If a recipient can’t view the message in email, there’s little chance they’ll click to view it in a web browser. A better solution: make your

email bulletproof, and suddenly this link becomes unnecessary.

An email’s message should always come first. If you’re going to highlight branding and logos in the main message, make it a priority message.

Think of it like grocery shopping—a buyer first goes to the ketchup section, then they find their favorite brand. If the product or message is amazing,

the recipient will know who you are.

Historically, many marketers have designed emails around a main navigation, much like a traditional web page, despite pushing

the message down the screen.

The purpose behind an email’s navigation is to take the viewer to the site; far different from the intent behind a website’s navigation—to move them

around the site. The downsides to navigation in an email are that it can distract from the main message, take up valuable real estate, and ultimately

direct viewers away from the CTA.

Reducing a navigation menu to a limited set of key links, or including it in the footer of your email, can be good compromises. If a larger navigation is

imperative it’s up to you to test which formats work best.

The best place for the unsubscribe button is away from other links— you don’t want consumers to inadvertantly click on it.

Beyond that, keep it clear, simple, and on its own line. And remember: unsubscribes are a blessing: they help develop a list of qualified contacts interested in what you have to say. We all know good hygiene is the law,

but it’s also a good method of house cleaning.

Behind every email campaign launch are a hundred little decisions. How will your email encapsulate brand, message, and product? How do you create an ROI that makes it worth

sending out an email in the first place? And, when it comes to responsive design, where should you invest your time?

This guide will cover the quick wins, progressive enhancements, and obstacles behind creating successful responsive emails.

Litmus email campaigns are primarily one-column layouts. They use large CTAs and fonts, along with contrasting brand colors that make the message

extremely readable on as many devices as possible.

Wix does a brilliant job with highly intuitive yet creative email design. In this campaign, note that the CTA is larger than the brand logo, but you know exactly who’s sending the email because the logo is prominently placed and surrounded by plenty of space.

(NEAR) INSTANT GRATIFICATION

GET DEFENSIVE

STOP FIXING EVERYTHING

NEVER GIVE UP

FROM DESKTOP TO MOBILE

MANAGING BRAND GUIDELINES

VIEW ONLINE? BUT I ALREADY AM!

MAINTAINING BRAND—KNOW YOUR PRIORITY

NAVIGATION—IS IT WORTH IT?

PLACING THE UNSUBSCRIBE BUTTON

Quick wins

Progressive enhancements

Overcoming Obstacles

GOING RESPONSIVEMobilize your marketing

Styled alt tags Every image in your email campaign should contain a populated alt tag to define it when it’s not being displayed. Just like styling system text, you can use CSS to manage the appearance of the alt text.

Reducing imagery Minimizing the use of images in your emails decreases download time, allowing viewers to read your system-generated messages and CTAs. If your message is important, avoid embedding it within an image. The fastest way to get an audience to click on a CTA is to build it as system text. If the entire email is image-based, initial opens will look, well, dismal:

Background colorsUsing a background color to further define an email’s blocked area helps break up the campaign and increases readability. Additionally, this gives you an opportunity to use brand colors to further define the email. In short, it’s a win-win type of deal.

The example shows how background colors can serve two purposes —pixel art simulates an image and the structure of the email is clearly defined.

Question 1Is your data analytics telling you that most readers are viewing your emails

on mobile devices?

Question 2Are you experiencing unsubscribes by

consumers opening on mobile?

Question 3Do you see a significant difference in

number of click-throughs on mobile vs. desktop?

We hope this guide meets you wherever you are in your responsive design journey and helps you pave a clear path to successful campaigning … campaigning that saves time, forges through those confusing moments, and leads to an improved

viewer experience for all.

Need a hand? Let us help you develop highly successful responsive email campaigns. Get in touch at shawscott.com.

Quick win 1

Quick win 2

Quick win 3

+ Rounded corners+ Gradients+ Background images+ Drop shadows

+ Web fonts+ Gif animations+ Rollovers+ CSS3 techniques

Consideration 1

Consideration 2

Consideration 3

Consideration 5

Consideration 4

Consideration 6

Web fontsMost desktops, and 50% of devices, don’t support web fonts, so prioritize good fallback fonts that use similar spacing when using company fonts. If we look at a sample like Soho – would you use a sans-serif or serif font? Which fallbacks have similar spacing? Be careful choosing fonts that are extra light for email since some email clients render them very thin.

Brand colorsUse company colors selectively. Stick with a three to four color palette and be consistent with how you use your color (for example, links should all be one color to avoid confusion). Avoid bright colors if your company uses muted colors and vise versa. Remember that red isn’t the only color that can pop.

Brand logosIncluding a company logo is imperative, but balance is paramount. Your logo shouldn’t take focus away from the campaign message. Much like the Wix.com sample above, charity: water took on a very simple, yet powerful approach that creates an email that highlights the message very clearly, yet you know exactly who is sending this email. The logo is in a reliable location (top left) surrounded by white space.

Saks Fifth Avenue uses styles to swap out desktop and mobile views to render a navigation that does not interfere with their main message. With this option they have decided to focus on desktop and iOS, and forego those clients who do not support media queries.

Takeaway

We suggest setting up a routine to test your email and make sure it renders well across the devices on which your strategy is focused. Litmus.com is a fantastic resource that allows you to see multiple results, spam check, and

organize multiple campaign builds.

Nothing can replace good coding practices. Not doing your research first or cutting corners can prove to be a headache in the long run. Our developers

at Shaw + Scott are not only coders, but HTML instructors as well. We are happy to help your team develop good html email building habits.