Thanks to everyone who joined us for our May webinar: Modular Email Design: Build Better Emails Faster. We teamed up with IBM to teach you how to take a modular approach to responsive email design. Below, you’ll find the webinar recording, slides, Modular Email Design Cheat Sheet, and Ferguson case study we promised you.
Overwhelmed by your email frequency and volume? You’re not alone. According to Litmus, almost 55% of companies have six or more emails in production at the same time. If production demands are high, email complexities are even higher. Email On Acid found that 71.8% of companies plan on spending more time on email production this year.
If you’re an email marketer spending significant time coding, building, and testing each email send, STOP what you’re doing and download our Modular Email Design Cheat Sheet. Using modular email design, you boost email quality, while cutting email build time by as much as half. See how it works!
What is Modular Email Design?
Modular email design enables users to build flexible templates using modular “building blocks.” Email modules are pre-tested snippets of code laid on top of each other like Lego blocks that fit nicely together. Swapping modules in and out allows for endless combinations of email layouts and designs. Ready for the kicker? With modular design, you don’t have to code and test the modules each time.
Modular design takes planning, coding, and stringent testing in advance, but then frees your email team to repeatedly reuse the modules for all email and design needs. Our clients using modular design have cut their email production time in half – check out a case study to see how we did this for Ferguson Enterprises!
Why Should You Use Modular Email Design?
Modular email design makes the email production process easy and significantly less time consuming. By testing the modules in advance, you’re no longer spending time fixing line breaks or irritating rendering issues across different email clients or mobile devices. Your designers can instead focus on email strategy, compelling copy, and eye-catching imagery instead of rendering and formatting issues. Say goodbye to the days of spending hours coding each email, and hello to the days of pre-tested code modules that can be swapped in and out of emails in a fraction of the time!
How Can I Get Started with Modular Email Design?
Have you decided you want to try modular design out? To excel at modular design, you need to think through your email template and module needs to ensure you build flexible email layouts. We’ll break the steps down for you:
Step 1: Look through emails you’ve recently sent and figure out what’s working and what’s not. Are some parts of your emails getting more clicks than others? Is your audience ignoring elements in your navigation or overlooking calls-to-action? What parts of your emails is your audience interacting with?
Step 2: Compile the best parts of your emails and any need-to-have elements. This is where you’ll begin designing email modules to swap in and out of your email templates. Only keep the elements that have been working within your existing emails.
Step 3: Once you choose your modules – code and thoroughly test them. We recommend using a testing tool, like Litmus or Email on Acid, to ensure your modules render correctly across devices and ESPs. We suggest building responsive modules, so every email you send looks great regardless of screen size.
Step 4: Design, build, and test your templates. We typically build standardized headers and footers, and a master body that includes all our flexible modules. Test the templates for rendering and coding issues.
Step 5: Once you’ve thoroughly tested your modules and templates, you’re ready! Add in the modules like building blocks, change up copy and imagery, and enjoy your endless variations of email designs.
Download our Modular Email Design Cheat Sheet
If you’d like additional help, get our Modular Email Design Cheat Sheet. The cheat sheet includes an email modules guide to help you brainstorm module types, examples of what those modules look like in real emails, and a checklist to use when creating your own modular emails. Get ready to boost email quality and decrease email production time!
If you get stuck, contact us and we’ll walk you through the steps. We’ve built a modular email design tool, Code Perfect, that lets you add modules and customize layouts with a simple mouse click. See what everyone’s saying about Code Perfect and get a free demo of Code Perfect.
As promised, here is our 2017 Responsive Email Design Checklist.
Did you know that 51% of consumers unsubscribed from a brand’s email because their emails or website didn’t display or work well on their smartphone? We know you don’t want your audience to be part of this high percentage.
What’s more, 54% of email is now opened on a mobile device.
With more and more people using mobile devices to open their emails everyday, it is imperative that you keep up!
Get our Responsive Email Design Checklist to follow as you code your next email. If you’re still having trouble, don’t hesitate to reach out to us.
Download the checklist:
This week we welcome Emilyann Key, our Digital Marketing Coordinator, to talk through 3D touch and what it means for marketers.
As digital marketers, we strive to create excellent online experiences by speaking customers’ language. Just as slang changes over time, so does the technology we use to engage customers. If we fail to evolve our digital marketing strategies with technology, we’re analogous to the “cool mom” using outdated slang – in other words, we may as well go fly a kite!
3D touch is a newer feature of the iPhone 6s and all subsequent iPhone models, enhancing users’ functionality based on the pressure of their touch.
In digital marketing, we aim to reduce conversion resistance by streamlining each users’ journey. We minimize the number of clicks required to check out or reduce the fields in webforms, so it’s simple and pleasant for customers to complete actions.
3D touch strives to do the same for iPhone users – offering more navigation options, based on the degree of pressure placed on the screen, instead of forcing the user to navigate to separate screens or click additional home buttons.
While this is exciting news for iPhone users, it tilts the playing field for digital marketers. Today, we’ll talk through how 3D touch impacts users’ email and website experiences, and ideas for how marketers can adapt.
Users Can Write an Email from the Home Screen
Before: Users entered their inbox to start a new email. This subtly forced users to check inboxes at their leisure and every time they wanted to send a new email.
With 3D touch: Applying fingertip pressure on the iPhone mail app opens a menu where users can start a new email, view all inboxes, view VIP, and search their inbox.
Potential Impact on Marketers: Customers no longer have to open their inbox, and might miss many of the new emails in their inbox. While this will do wonders for user productivity (at least mine), it will likely affect email open frequency and overall email performance, especially for time-sensitive campaigns.
Users Can Sneak a Peek
Before: Only from-name, subject line, and pre-header text (for Pete’s sake, use pre-header text!) was visible in the mobile inbox prior to opening.
With 3D touch: With a press and hold, users see a truncated view of the top half of an email or webpage without officially opening.
Potential Impact on Marketers: Peeks provide all the excitement of opening an email or visiting a webpage, without the extensive time commitment and physical exertion of actually opening or visiting.
This function affects marketer analysis and design. Peeks will count as opens for email and visits for webpages. Most ESPs and web-tracking platforms do not yet have a unique metric to separate peeks from opens, which makes it trickier to accurately analyze email and web performance.
Before 3D touch, we’d conclude that an A/B tested email design that received 100 opens and only 2 CTA clicks probably suffered from an ineffective CTA. Now, we must recalibrate our reporting, and consider the fact that a portion of “opens” or “visits” might have only experienced the top half of the email/page.
Marketers should consider consolidating the intended user journey. Don’t panic – this isn’t a drastic change requiring a copywriting overhaul. After all, even before peeks, we front-loaded emails and webpages to entice users to scroll down the page.
If a large portion of your customers open/visit on 3D-enabled devices, consider shaking up your designs. Maybe put your navigation bar beneath the hero image or place your value proposition in plain, peek-able sight. Measure how these changes influence email performance and adjust from there.
Get Contact-Cozy with Customers
Before: To view an email sender’s contact information, users had to open the email and press from-name/email address, to open the contact’s record in the Contacts app.
With 3D touch: By pressing the from-name in an opened email, you can view a contact’s profile, save the contact, etc.
Potential Impact on Marketers: For most companies, asking customers to “save as contacts” seems somewhat outdated. Due to 3D touch, this may become a resurging trend, particularly for email campaigns sent from individual sales-reps.
By encouraging customers to save their sales-rep’s contact information, companies can make it easier for users to call or text (and of course, reply via email) from within the opened-email interface.
We’d love to see companies utilize the contact photo space for further branding. Go on – put yourself out there and encourage customers to save your promotional email address as a contact. Make it even easier by providing a link to automatically save all your promotional contact information and create a branded logo designed for the contact photo size!
Over time, marketers will test and develop clever ways to deliver unique engagements using 3D touch. Today, we’re in that exciting stage before 3D touch’s status quo is established in the marketing space. So, go forth and be adventurous!
Explore new ideas of using 3D touch to give your customers the very best marketing experience. Don’t stop there, press on – but remember, not too hard, or you might save us as a contact!
We did it! It’s now 2017 and we survived Google’s mobilegeddon in 2015. How has the transition to mobile first design changed your day to day or business overall? We first wrote about why responsive is the best mobile friendly design and you can read that here. But have you heard? There’s a new Mobilegeddon for 2017 and here’s what you need to know:
Perhaps you’ve seen them – throngs of zombie-eyed wanderers clutching cellphones in one hand, swiping rabidly with the other; murmuring gibberish under their breaths punctuated by victorious fist pumps.
Perhaps you even know a guy, who’s heard of a guy, who swears he’s seen the infamous Mewtwo, one of the ever-elusive “Legendary”.
No, these impromptu, impersonal public gatherings aren’t the advent of The Walking Dead, nor a particularly sluggish flash mob.
They’re ambitious Pokémon trainers, living their 90’s-era-obsession with “Catching ‘Em All” in the real world.
Consumers increasingly interact with brands from their mobile devices, and in many instances, mobile might be a customer’s only impression of a brand. It’s imperative that customers receive an excellent user experience from every device.
Plow & Hearth is a multi-channel retailer of quality hearth, yard and garden, apparel, and outdoor and indoor living products.
50% of Plow & Hearth’s emails were opened on mobile devices, but their emails were not mobile-friendly.
Like many retailers, they had a small team that was inexperienced in coding emails and a very aggressive email schedule. They were ready to dive into mobile email, but weren’t sure whether responsive or scalable design would be the best approach for their family of six brands.
Plow & Hearth reached out to Whereoware to develop mobile-friendly email templates for their team to update and maintain ongoing.
Due to the large volume of emails sent, and the limited staff/resources to put emails together, Whereoware had to think of a creative and straightforward way for less experienced email builders to construct anywhere from 30-60 emails in one week.
Read the short case study to see how Whereoware worked with Plow & Hearth to deliver three responsive email templates – increasing quality of 60+ emails a week and cutting email production time in half.
This week, we welcome a guest post from our Online Marketing Manager, Liz Cordeiro. Liz is excited to take over this post + dive into mobile responsive template building with you!
So you’ve noticed that mobile sessions on your website are up, and that more users are opening your emails on a mobile device. The next natural progression is to start making your emails look better on a mobile device, but it can be daunting to get started. Did your eyes get wide when you Googled responsive email building and saw words like media queries, fluid, conditional statements PLUS the more advanced code than your typical HTML builds? Take a breath, I’m here to help.
I’ve designed and tested an email to look as good as possible at both desktop and mobile sizes, and I’m going to break down the code for you in a way that’s easy to digest. This is a long post, but I didn’t want to leave anything out – so stay with me!
Setting up header elements
The email will need several bits of code set up in the header. This includes everything between the initial <html> tag & the opening <body> tag. Start with the right Doctype – this will allow you to use all of the code to make it responsive. Here’s an example of how to implement a Doctype – it should be the first 2 lines of code:
Then the email needs the right viewport. Using this basic one will cause the email to scale to 100% on different screen sizes. Place the viewport before the <title>. Learn more about viewports here.
Thanksgiving 2014 was a milestone. For the first time, more consumers visited websites from mobile devices than from desktop computers. This habit extends beyond holiday online shopping – 53% of emails were opened on mobile devices in 2014 (a 500% increase in just four years). Mobile’s growth is a wake up call for anyone doing business online.
This holiday season, your emails and websites needs to be mobile-friendly or half your traffic will buy from brands that make it easier to read, browse, and shop from a tiny screen.
Brands offering a fantastic mobile shopping experience will maintain or grow their online base, and brands that don’t will lose customers.
Forward-thinking companies are leveraging mobile to increase their e-commerce ROI and generate in-store sales. To maximize holiday spending this year, see how mobile apps can integrate the online and in-store shopping experience.
Mobile shoppers browse before buying
‘N Sync gets what some brands don’t – buy-buy-buy is over (we couldn’t pass this reference up!). Customers are so over the pushy sales tactics. Instead, they want to price shop, read reviews, and see similar products to be sure they’re buying the right item at the right price.
Smartphones make it easier for customers to do product research, whether they’re browsing from their couch or pulling up competitor pricing in a store aisle. (Cough, Forrester says 34% of customers have used their mobile device to research products while in a store.)
Instead of fighting savvy shoppers, brands are using their mobile apps to supply customers with the information they need to feel ready to buy.
Neiman Marcus rolled out a Snap.Find.Shop feature in their mobile app that allows customers to take a picture of a product and retrieve similar items. They can purchase the photographed item or the product recommendations with just a few clicks.
Even better? They don’t even need to be in the Neiman Marcus store! By leveraging 3-D visual search technology, a person can take a picture of someone they see on the street and the app returns products with a similar look and feel that Neiman Marcus sells. The feature is currently limited to shoes and handbags, but Neiman Marcus intends to add additional product lines in the future.
The genius of Snap.Find.Shop is mobile shoppers checking out items from other stores are guided to instead purchase them from Neiman Marcus – a win for any brand.
You know how your iPhone beeps when your friend tags a #tbt pic of you on Facebook? You eagerly open your app to realize in horror that it’s your bad hair and braces in all its junior high glory? That Facebook alert is a mobile push notification.
Mobile push is often confused with SMS or text messaging. Unlike a text message sent from one cell phone to another; a mobile push notification is sent through a mobile application to its users.
As mobile dominates all aspects of our personal and business lives, brands’ adoption and consumers’ acceptance of mobile push notifications will only accelerate.
The Mobile Push Opportunity
Brands can email, call, mail, tweet, and reach customers a million ways. What’s so exciting about mobile push? We’re all obsessed with our mobile phones! Unlike desktops or snail mail, consumers take their phones with them everywhere and spend on average, 117 minutes a day on their phones (that’s more than the time we spend watching TV)! We aren’t just surfing the Internet, making calls, or texting either – 86% of our cellphone time is dedicated to mobile apps. This clearly gives mobile push an upper hand to reach consumers where they’re spending most of their time.