Welcome everybody! My name is Laura Myler and I’m a Digital Designer within Bronto’s Professional Services team in Durham, NC. Before coming to Bronto two years ago, I worked for big retailers like Dillard’s and Bevello within their internal Digital Marketing teams – so stepping into my current role was a pretty seamless move. I specialize in catering to Bronto’s high end retailers with a focus on fashion and branding within our Full Service offering – so everything we are going to be discussing today is pretty much business as usual for me and I’m excited to dig into some of the expertise and best practices I share with my clients on a day-to-day basis.
But before we start – a few fun facts about me, one of the things people tend to find most surprising about me is I was raised an Arkansas girl in the backwoods of the Ozark Mountains – anyone who wants some good ole ‘Back in Arkansas’ stories just find me in the Commerce Café later. ;)
Another fun fact – I just got married earlier this month – I literally hopped off a flight from my honeymoon in the Caribbean and then hopped on a flight here to Vegas – so you could say that I’m pretty high energy!
High energy just like my two pets – Maverick the Australian Shepard and his little sister PJ, as you can see – my desire to match carries over to my animals as well…
But enough about my story – let’s get to Creative Storytelling and why good design matters.
It may sound superficial, but let’s be honest—when it comes to email, looks matter. Think about the emails that engage you the most. Are they easily viewed on any device? Do they include a healthy balance of visually appealing images to concise text? Is it easy to spot the “what’s in it for me” of the message?
We live in a time saturated with digital noise. With so many people and initiatives trying to be heard, your organization’s design, language and brand need to speak to the people you’re hoping to attract if you want to stand out. Plus, let’s not forget about your bottom line – can you afford to send out campaigns that aren't performing as well as they could be? Every email and every subscriber costs you money. The more engaged and the higher your click-through rates, the higher the return on your investment. And creative design and compelling storytelling are critical elements in driving that revenue-boosting engagement.
In this presentation, we’ll walk through how to use good design in every aspect of your emails to overcome some of the most common creative challenges that retailers face in today’s busy email market.
Let’s begin by reviewing the most common creative challenges for retailers today and those are:
• Creating a Cohesive Brand Identity
• Being both Relevant and Responsive • And telling your story effectively
So there they are – these are common obstacles that I help my clients overcome on a daily basis, so know that you aren’t alone and even better…know that these, sometime daunting road blocks, can be overcome. So get ready to flex those creative muscles!
First up on the list of challenges seems like a no-brainer – maintaining a cohesive brand identity. Simple, right? But if can be harder than you think.
We all know what brand identity is – it’s made up of carefully-curated aesthetic choices used in all of your marketing assets, not just email, and are intended to encompass everything your brand represents and wants to convey to your target consumer.
Brand identity is synonymous with your company’s personality – we’re talking about everything from text and tone to color palettes and fonts. These fundamental elements of your brand should be carefully thought out to project a convincing image that your audience will want to support.
But delivering these elements in a cohesive, consistent manner is often harder said than done with obstacles like a lack of resources, aggressive growth or even turnover.
So why is it so important to stay consistent?
Let’s take this to a more personal, relatable level – say meeting someone for the first time. You have a first impression of them, right? You just met them so you know nothing about them – you’re simply judging them on what you can see. Do they look inviting? Are their clothes and appearance appropriate for the situation? Most importantly – do you want to get to know them better? All this happens in a matter of seconds (if you’re lucky!) – and the same applies to your brand!
• When considering what you want your brand identity to be – think carefully about your business values and goals, if you have an underlying, consistent focus as your brand’s foundation, this will result making your brand relatable, recognizable, and most-importantly authentic. Authenticity adds a crucial level of trust to your brand – and it’s this trust that gets you from first-impressions to a relationship comprised of loyalty and engagement – and that leads to revenue!
So let’s jump into some Pro tips and tricks!
First up – is creating an awesome Brand Guide. Let’s get a show of hands – Who here has a company brand guide? Okay great – keep your hand raised if you could access that brand guide if you wanted to right now?
It takes a small army to keep a business going day to day – so you need to be able to easily communicate your brand identity to all parties involved if you want to maintain consistency. And all of these people, particularly any third parties involved, need access to all the elements necessary to deliver on that identity – like logos, font files, and hex color codes.Look at this example brand guide for Azalia Spa Goods – everything about these style choices scream relaxation, right? From the soothing pastels to the organic scripted font and illustrations. Overall these elements work together really effectively to represent both the market and the product of high end spa goods.
But first, you need to make sure everyone is on board. This seems like a given, right? But one of the most common delays I see on a regular basis is teams of multiple people within a business that don’t seem to be on the same page as far as their goals and initiatives. So be sure that everyone within your organization is aware and on board with your brand identity and message. You can’t expect your potential customers to love and engage with your brand if your own employees don’t.
Speaking of potential customers that takes us to pro tip #2 – you want to be sure to know your audience and articulate your brand messaging accordingly. Your goal should not be to be all things to everyone, instead your goal should be to direct your messaging toward your key audience. Identify key demographics like targeted gender, age, and geographical location. Resources like Google Analytics or building Bronto segments based on browse data can be great starting points for identifying your audience. You also what to be aware of what values are important to them – for example, TOMS – a retailer who initially rose to popularity for their wide variety of comfy canvas shoes – how many of you own a pair of TOMS? Just about everybody – that’s powerful stuff! Well a majority of their customer base – and I’m sure many of you, initially connected with their brand because of their one for one initiative so obviously philanthropy is super important to that niche. TOMS was smart enough to capitalize on that value and has continued to grow their philanthropic eoffrts and in turn their inventory of ever growing products beyond just shoes. Lastly, you need to know what incentivizes your audience to convert – are they motivated by discounts? – or will a simple email announcing new arrivals do the trick? This is a great opportunity to A/B test your audience to make sure you are sending them the right incentives and no wasting money sending coupons to customers who would have converted regardless of a discount.So who wants to see a brand that totally knows their audience and does an awesome job marketing to them?
Dun, dun, dun, dunnnn… Burt’s Bees! A company we likely all know and that describes itself as an “Earth friendly, Natural Personal Care Company.” You can see from their natural palette of color choices, imagery usage, social media focus, and playful verbiage that their core demographic is female millennials who place an emphasis on sustainability and natural products. This is a unique niche that doesn’t require much incentive to convert – Burt’s Bees customers are very brand loyal and with a strong lineup of core products, new buyers are often become repeat buyers – so you won’t likely see too many coupons landing in your inbox from Burt.Show of hands – who loves them some Burt’s Bees?? Yep I know I do. So as you can see, when your goals and values align with your audience, you set yourself on the track of creating content that will be meaningful and impactful.
Okay so moving right along – next up on our list of challenges is remaining responsive and relevant in today’s ever evolving, tech-savvy world.
And at this point, responsive or mobile-aware email design is already the dominant approach adapted by most marketers, and we all know that we need to take into consideration all devices and email clients if you want to be successful – otherwise you’re just missing out on potential revenue.
But where do you begin in this journey of not only embracing responsive design but keeping up with the latest trends and innovations? Many email marketers are challenged by the overwhelming obstacles involved with creating universally responsive emails. Things like bad CSS support in certain email clients, endless workarounds and techniques, and lack of resources can often prove too much to take on. But lucky for you, Bronto has made it exceedingly easy with our intuitive Drag + Drop Editor. Let’s take a quick look at the Editor’s easy-to-use interface and some of the cool things you can do like personalized recommendations and contact-specific coupon codes – all within a percentage-based, fluid responsive template without any additional HTML code or CSS whatsoever.
Easy, right? You’d be surprised how easy it is with the right tools! So let’s dive in to some more Pro tips and tricks.
Pro Tip #1 is often my first recommendation to any new client, and that’s to create a responsive boilerplate template. The foundation of any good marketing program is an effective template to keep messaging consistent. When I say template, we’re talking about your static elements like the header, footer, and the wireframe of your content. Not only does a template keep you on-brand, but it also cuts down on production time and less time spent on each campaign is less money spent on each campaign. Win-win, right?
When crafting your template, or collaborating with the Bronto full-service team to craft it for you, a good place to start is your website.
A fluid experience for your audience from your email to your website is key. Consistency is so important here – take into consideration your website layout, navigation selections and color usage when designing your email template. Attrition rates skyrocket when distrust is created by inconsistent click-through.
Check out this example from Sam Edelman – as you can see they do a really great job of creating a consistent storyline from email to ecommerce.
Next up, consider desktop and mobile specific elements for an ideal experience on any device. For example – your navigation. A popular choice for navigation is having a desktop-specific and mobile specific navigation like in this example from retailer American Giant. As you can see, the desktop nav hides on mobile, and shifts to the footer into easy to click mobile-specific buttons for a stellar experience for all subscribers. You’ll also notice that header white space is minimized on mobile to keep as much of the campaign above the fold as possible on smaller devices. And you’ll see that the content is grid-based for optional scaling or stacking on mobile.
• Lastly, know your priorities. There are a million and one ways to approach template design – so one of the key things I like to ask my clients when it comes to their template is – what is your #1 priority when it comes to your template?
Common responses are things like easy editability or consistent rendering in all platforms. And though my general best practices would be similar – my specific recommendations for these two clients would be completely unique. For example, for the client that says editability is key for them – this tells me that they change up their approach to email marketing regularly and they need updates to be simple for them. So I would advise them of things like keeping their navigation as rich text to allow for easy updates, use minimal HTML and CSS (if any at all), and provide them with thorough training on not only adding content, but editing static elements as well.
When Bronto builds a template for you – we thoroughly test that template across all major browsers and email clients to ensure consistent rendering.
But it’s also important for you to continuously test your emails as well – rendering issues can distract subscribers, cut short engagement or even cause them to unsubscribe completely.
I would recommend using software like the Bronto Previewer app or external testing software like Litmus or Email On Acid to easily test your campaigns to avoid these issues.
But as we all know there are always going to be elements that are out of our control that we need to be aware of, but luckily I have some hacks for you.
So let’s talk about the elephant in the room… *Cough* Outlook.
Raise your hand if at one point or another you’ve run into issues in Outlook. Just about everybody! And if you didn’t raise your hand – more than likely you have and just weren’t aware of it.
One of the most surprising things about Outlook is that most of the newer versions use Microsoft Word to render emails. Yep, a word processor. Outlook’s usage of Word as a rendering engine has resulted in disappointing setbacks to CSS support and a ton of frustrating quirks. So let's review some specifics. 1. First up – Animated .gifs don’t work in most versions – basically you’re subscriber will only see the first slide of your .gif.How you can adapt: Make sure that the first slide of your .gif renders your complete message so that the message is not lost on them by incomplete creative.
2. Another common frustration is that rich text renders as Times New Roman regardless of what font family you have in place. Let’s be honest – no one since the 90’s has chose to use Times New Roman. How you can adapt: Use this simple CSS style to override Outlook’s desires to render your font as Times New Roman.
3. Another big quirk is that any image height that exceeds 1728px will get clipped – essentially cut off at the height limit. How you can adapt: Have a particularly long email? Slice it into multiple images to overcome this limitation AND as a bonus keep your load time down.
Moving on to the Gmail and the Gmail app. Gmail has historically not supported embedded CSS styles – forcing designers to use in-line CSS for years, but in late 2016, Gmail made the surprising announcement that they would start supporting embedded CSS and in turn support media queries and responsive emails. It’s an exciting time for mobile viewership. With Gmail’s decision to support media queries, essentially the gears of responsive design, it’s time to double down on responsive design to provide the best viewing experience possible for your mobile viewers.
But! Not so fast – there’s still one very relevant limitation to be aware of and that is that Gmail and the Gmail App will clip messages that weigh over 102kb. So the pro hack here is to slice your images and be sure to compress them to keep the overall weight minimal.
Beyond rendering, also keep in mind deliverability design best practices to keep your emails in the inbox. By implementing some of these tips and tricks you will be better positioning your campaigns for success.
• First of all – don’t use unclear or spam flagging subject lines – for example avoid using ALL CAPS and aggressive punctuation.• Also, emails with very little copy and a lot of images, or a campaign simply composed of one large image can be hallmarks of spammers. By composing similar email, you can run the risk of your email being flagged as spam too. Instead, design your emails with this in mind and ensure you balance your images and copy so that your email makes sense and is engaging in the event of the images not being displayed. Speaking of which – always use alt text for your images so even if they don’t render, your subscribers will have context for what the images are.• Lastly, keep your total email size under 80KB when possible – sending an email over 100KB can potentially effect deliverability. Not to mention, large emails can load slowly – impacting your customer experience. So be sure to compress your images – for those of you who don’t know what I mean I’m talking about using the ‘Save for Web’ function in Photoshop that allows you to bring down the quality percentage of your images. I typically recommend saving at 60-70%.
Overall, sending emails that are not too long and compressing images will do the trick 99% of the time to avoid deliverability issues. But do keep in mind that there are a lot of considerations when it comes to deliverability and we have a dedicated team within Bronto that specializes in just that – doing their best to get you to the inbox.
Okay. So everything up until this point – solidifying a cohesive brand identity and maintaining a solid, responsive platform is all to allow for your story to be told. We can’t very well tell your story if we don’t make it to the inbox, right? Effective storytelling is more than just design best practices, it’s about staying relevant within the ever-changing landscape of email marketing. Okay so you’ve made it into the Inbox – AWESOME. But how compelling is the story you’re telling? The #1 reason people sign up for your emails is because they think they're gonna to get something – whether that something is a welcome coupon or simply a connection to your brand, you’ll want to foster than connection and continuously remind them of why they connected with you in the first place – all while presenting your campaigns in a way that is easy to absorb, aesthetically pleasing, and most-importantly on-brand.
Let’s review some specific design best practices that you can take away with you today and immediately start applying to your emails. Sound good?
First up, is the framework of your campaigns. We’re talking about your overall layout and composition. a. The first thing you’ll want to consider is how your layout will adapt on mobile – that way you aren’t working backwards trying to make it work post-production. There are a lot of different approaches to having effective, adaptive layouts. A few considerations are things like: - Stacking behavior on mobile. This approach is ideal for multi-column content and ensures your content is easy to read and absorb no matter what device your subscriber is using – just like in this example from Shinola.
There’s also the approach of mobile aware responsive design – or desktop-specific, mobile-specific creative – what I mean by this is that completely separate creative is produced for desktop and mobile. And this creative is triggered by media queries that recognize the screen size of the device being used and pulls the appropriate creative – whether that be the desktop or the mobile creative.
This approach, one of my favorites, gives you complete control over how your content renders across different devices.
Next up is Balance. As with anything – you want to keep your email tidy. Balance the elements of your email, like the ratio of text to images, using things like margins, white space and line breaks to give a harmonious composition. This will lead the viewers eye on the journey you intended for them.
These elements also lead into the hierarchy of your campaign. Whether you have a simple message or a complex array of information to present – take careful consideration when laying out your email – order your information logically to create stability and hierarchy – even with densely packed information – you want to make sure that your main message is not lost.
Things like differing fonts choices for headers and body copy and accent colors are a great way to create this hierarchy effectively. Just look at this example from Victoria’s Secret. What is your eye drawn to first? Probably the beautiful model right? What next? Probably the scripted font headers. This is a great example of how the creative makes your eyes stream seamlessly down the page starting with what’s most important and carrying you down through the secondary content.
Next up, is conveying a strong brand identity within your campaigns.
Color Palette is such a powerful tool in design. Whether your brand boasts bold, vibrant colors to convey youth and excitement like in the Rocket Dog example or maybe monochrome is your thing like Theory who presents their brand as sleek, timeless and sophisticated. The key is to stay consistent.
You can also shape up – the use of geometric divisions and shapes can really take your design to the next level and give your emails an edge that’s unique to your brand.
For example, Bobble is a brand known for both stylish water bottles and a platform for sustainability - so the use of the water droplet shape in their creative is a sleek way to incorporate what their brand does and represents seamlessly into their marketing campaigns.
And of course Imagery is huge consideration in any design discussion – of course, I would recommend avoiding stock imagery when possible, and opt for carefully-curated images unique to your brand that will convey your brand personality.
Imagery is the most compelling piece of your brand identity and it’s what people will most likely connect with – so take advantage of that! And of course if you don’t believe me – keep in mind you can always TEST! Remember that super easy to use A/B test function I mentioned earlier?
In these examples – the brand personalities couldn’t be more opposite. Wildfox conveys youth, fun and fast fashion. While Theory suggests a more mature take on timeless investment pieces for the sophisticated shopper.
So last, but not least, you’ll want to optimize specific elements for mobile viewers.
With your goal to get a high click-through, you’ll want to be sure to keep your Call To Action buttons above the fold – meaning high enough within the creative that your subscriber won’t need to scroll to see it on mobile. However I do advise to make your entire creative clickable for the best customer experience and highest conversion.
Use bold, contrasting colors for your CTAs to avoid getting lost in the mix and make them large enough to be easily viewed and for easy clickability on mobile. Like with this example from Barney’s – the entire email is saturated with color and the bright white CTA really stands out.
Text is also super important – remember those emails 10 years ago that you would struggle to zoom in and had to squint to read? There’s no excuse for that now! Make it legible.
Ensure all rich text and other text content is large enough to read on mobile. The best way to easily ensure readability is to live test your campaigns within your team or use testing software.
Also keep in mind, do your text selections complement each other? Generally, brands choose a Serif and a san-serif that pair cohesively together to differentiate key pieces of information and create a hierarchy of content. Check out AVON, they do a great job breaking up different information based on importance by using a sleek serif as their header to catch your attention – and an easy to ready sans-serif for supporting copy to present the information in a really easy to absorb way.
And we’ll mention it one more time – grid based creative works really well for responsive design and as a bonus - looks really nice and clean.
In the examples shown, you can see that the content can easily stack on mobile and will look great on any device to provide an awesome customer experience.
Fun stuff, right? What’s great is that you can easily start incorporating these best practices into your marketing right away.
But let’s also look ahead. Here are the most innovative and exciting trends forecasted for email marketing in 2017.
First up is Interactive Design – probably one of the most exciting trends of the year.Interactive design means to take an action in an email that triggers an event within the same email. Examples include things like hamburger menus – an element you’ve likely seen in mobile sites over the past few years, image carousels, offer reveals, and video. This interactivity brings some of the interactions that would normally take place on your website and pulls them into your email – this reduces barriers to engagement and makes clickers have even higher intent.In a recent Litmus article, their analytics reported that the average time spent reading an email increased nearly 7% to 11.1 seconds between 2011 and 2016.
Surprising, right? In today’s busy world – you’d expect attention spans to go down, but in reality, with dramatically improved user experience and increased screen sizes – time spent with email on mobile has increased considerable – and in turn, laying the foundation for interactivity within email.
Next up is a no-brainer. Personalization is key with an ever-increasing tech-savvy population who demands a unique experience – you heard some great examples of this in Carolyn’s keynote and you’ll continue to hear more throughout this week.
Showing the right content at the right time to the right person is the epitome of personalization. And with things like dynamic content based on consumer data, personalized Recommendations, and Browse Recovery data – it’s easier than ever to implement this personal experience into email.
And what’s even better? These features can be automated with Bronto apps like Premium Recommendations and Browse Recovery.
Lastly, is one I think most designers gave up on years ago – and that’s video in email. In 2013, Apple dropped support for HTML5 video and slammed the breaks on the revolution of video in email. But now with the launch of iOS10, HTML5 video support is back! According to Litmus, as of late 2016, 53% of emails are opened in Apple email apps which is more than enough to justify trying it with the appropriate fallbacks. Not quite ready for video? Try an animated .gif as a preview of the video with a play button overlay that links off to the landing page. GIFs are a great way to add interactivity to an email and they have much better support than HTML5 video.
Okay so wrapping up – a few last tips and tricks.
Pro tip #1 is using retina images in your campaigns.
Apart from the onslaught of screen sizes, the mobile revolution introduced another interesting challenge for email designers: high-DPI displays. These displays, often referred to as Retina displays, have the power to both enhance any email campaign—or give your subscribers a less-than-stellar email experience. So if you’re not accounting for retina displays – you run the risk of looking careless to subscribers. Look at the example here, retina users viewing a retina image see the image as crisp and clear. But retina viewers seeing the same image not optimized for retina see a degraded email design. So how do you ensure your images are retina quality? It’s really pretty simple. Retina screens have twice as many pixels, therefore your creative needs to be twice as large. So all you need to do is design your creative at 2X ratio. For example, if your email is generally designed at 600px – bump up the dimensions of your creative to twice that – or 1200px. That way, when they’re scaled down, there are more pixels for the retina screens to display.
Just keep an eye on your file size when compressing your images for web to avoid those deliverability issues we discussed earlier!
So now you have the knowledge and tools to apply design best practices to every element of your marketing campaigns, but there’s one final challenge that every team faces at one time or another – ANY GUESSES?
Whether your needs are short term or you’re looking for a long-term partner, Bronto experts can help reduce the burden on your team and expedite the success of your marketing efforts. Our Professional Services team caters to whatever your specific needs are – whether that be strategic guidance every once in awhile or becoming an extension of you own internal marketing team and assisting with every aspect of your marketing campaigns from concept to design and deployment. Obviously if you have specific questions about these services you can find me in the Commerce Café and I’d be happy to discuss our offerings with you more.
So let’s go ahead and open it up to questions!
Creative Storytelling - Why Good Design Matters - Laura Myler, Bronto Software