Marvolio’s Nostrum

Liquers

For this project I contribute to hand coding the website in HTML5 and CSS3 and usign Boostrap for Responsive Design and Jquery animations, lightbox and HTML image maps as buttons. For this project the assets were provided by IM London Head of Creative, also I worked closely with the Head of Digital, fixing problems encountered in the functioning of the website, enhancing the look, functionality and appearance, testing the website functionality in different browsers & at diffrerent resolutions.

• Date: 2017
• Agency: IM London
• Client: Marvolio’ Nostrum
• Live website: marvolios.com
• Category: Websites Design

Close Project

VHX Records

Music Records

VHXREC is an independent record label founded in Naples and based in London, their eclectic taste in music has brought them together to create a fusion of their favourite sounds, a mix of Jazz, Trip Hop, Hip Hop, Cinematic, Electronic and everything that involves instrumental music with a creative urban approach.Responsible for working on the project, designing appealing graphics and interacting with marketing manager.

New website coming soon

• Date: 2016
• Agency: DoubleD
• Client: VHX Records
• Website: vhxrec.com
• Category: Website Design, Emails, Housing

Close Project

APNG

An alternative to GIFs

Animated imagery is one of the top email design trends for 2019. Email marketers everywhere are looking to add movement to their campaigns—and the most popular way of doing that is by using the power of animated GIFs.

But animated GIFs aren’t the only file type that allows you to add movement to imagery. Animated Portable Network Graphics—or APNGs—are an option you might want to explore, too.

REASONS TO USE APNGS IN EMAIL

An animated PNG is exactly what the name suggests: a collection of PNGs that are combined to introduce movement. So to understand what makes an APNG special, it’s key to understand the characteristics of a simple PNG.

There are two types of PNG formats: PNG-8 and PNG-24. The PNG-8 format is similar to GIFs in that they are saved with 256 colors maximum. The PNG-24 format is able to display millions of colors. So compared to the limited colors of a GIF that often give animations a low-quality look, APNGs let you use the full range of color depths. That gives your images a crisper look—especially when you’re using photography with a broad range of colors—but higher quality always comes at a cost. If you don’t carefully watch your file sizes, PNGs can become quite large. If you’re using many of them to create an APNG, the large file sizes can negatively impact your email loading times.

Plus, in contrast to GIFs, APNGs allow you to work with transparency. GIFs handle transparently poorly, applying a rough white edge around elements when set on a transparent background:



Why would you want to use an animation over a transparent background, you ask?

TRANSPARENCY AND ANIMATIONS IN EMAIL: APNGS IN LITMUS’ OCTOBER NEWSLETTER

For our Halloween-themed October newsletter this year, we wanted to give our readers the opportunity to “switch off the lights,” changing the email from a bright design to a dark and spooky one. Plus, for extra spookiness, we decided to include some animation to make scary eyes blink in the dark, ghosts hover and goo ooze—but only when the lights are turned off.



See the full newsletter in action here.

To hide the animations in the bright version of the email, we designed them in the very same color as the background they were placed on in the bright version. When a subscriber “switched the lights off,” those background colors changed and—surprise—made our spooky animations visible!

Purple ghosts on the transparent background are invisible until the background color changes.

For this trick to work, the animations had to live on a transparent background—and that’s exactly why using GIFs wasn’t an option for us. Had we used a GIF, you’d see those white edges around our illustrations, which would have looked messy and exposed our hidden graphics when the lights were on. Animated PNGs, on the other hand, handle the challenge of transparency perfectly.

We considered an alternative tactic to address this issue by animating a sprite-sheet of PNGs using CSS animation keyframing. But in the context of this project, the amount of CSS involved for each graphic would have resulted in an email that was too code-heavy. And even more significantly, email client support for animated PNGs has actually overtaken support for CSS animation in recent years.

EMAIL CLIENT SUPPORT FOR APNGS
Many popular email clients offer full support for APNGs. The most troublesome exceptions are Gmail (both the webmail client and mobile apps), Outlook.com, and Outlook on Windows. These email clients only show the first frame of the animation.

Animated PNGs are fully supported in:

• Apple Mail
• iOS
• Samsung Mail
• Outlook (MacOS)
• Outlook.com
• Outlook.com app
• AOL
• AOL app
• Yahoo
• Yahoo app

Only the first frame shows in:

• Gmail
• Gmail app
• Outlook (Windows)

HOW TO CREATE ANIMATED PNGS FOR YOUR EMAIL CAMPAIGNS
It isn’t currently possible to save animations out as APNGs from software such as Adobe Photoshop or Adobe Animate, so you’ll need additional tools to create your animations. Here’s how we created the animated PNGs for our newsletter:

1. CREATE YOUR ANIMATION IN ADOBE CC AND SAVE EACH FRAME AS A PNG
We use Adobe Animate to create our animations—no matter if it’s a GIF or an APNG. The difference, though, is Adobe Animate doesn’t offer a native option to export an APNG file. Instead, you’ll have to export each frame as a single PNG. After creating your animation, go to Export > Export Movie and select “PNG Sequence” from the dropdown menu.



The process in Photoshop is very similar. Go to File > Export > Render Video. In the Render Video pane, select “Photoshop Image Sequence” from the dropdown and choose PNG as the format. You need to take one more step to ensure that your pngs are transparent: in the Render Options box select “Straight – Unmatted” from the “Alpha Channel” dropdown. Once you’ve selected where you would like to save your images, hit the Render button.



2. COMBINE YOUR INDIVIDUAL PNGS INTO AN APNG
Now it’s time to assemble your individual image files into an APNG!

PNG animator is a great piece of software that you can purchase for a small price from the Apple App Store if you’re an OS user. A free alternative is the Animated PNG maker from ezgif.com which offers similar functionality.

We chose to use the online tool to complete our files. Here we were able to exclude any frames that weren’t required in the final file and set the amount of time each frame required.



3. OPTIMIZING APNG FILE SIZE FOR USE IN EMAILS
Like GIFs, APNGs can quickly become quite weighty. Reducing colors and the number of frames used will help keep file sizes low. The standard zlib compression seemed to be the only option that worked for our files, and once we hit the Make APNG! button, we could see an example of our animation and its file size before downloading. This is a great chance to make further changes—such as altering the speed or removing a few more frames—before downloading.



Before uploading our image files for use within our email, we were able to compress them a little more. We simply ran our APNGs through TinyPNG, which decreases file sizes by stripping metadata and reducing colors, all while preserving transparency and animation. It made a huge difference, reducing our total image file size from 943kb to 243kb, saving over 74% in file size! Not every PNG compression tool will preserve animation, though, so make sure to double-check your work after your images are processed.

And that’s it! Now you’re ready to add an APNG to your email, just like you would work with any other image type.

Source: Litmus

Close Project

Dark Mode

Email Design: Dark Style

Each year, we see new design trends shaping digital marketing—from the use of color and imagery to typography trends, interactivity, and more. In our “Trending in Email Design” series, we look at the hottest digital design trends—and dive into how they translate into email marketing.

Dark email designs have been gaining momentum over the last year as various email clients and apps have rolled out Dark Mode support. Bright designs can create a very jarring experience when viewed in Dark Mode, so designers have started to consider a “Dark Mode first” approach, crafting inspirational creative that looks great for all subscribers, no matter which color scheme they set their inboxes to.

Plus, even when your subscribers view your emails in the default bright mode, dark designs can help make your email stand out. With the flood of campaigns that take the traditional approach to email design—dark copy on a bright background—an email design that uses a reverse color scheme will catch your reader’s attention.

Which brands do dark email designs well, you ask? Get inspired by these beautiful examples.

HOW ARE BRANDS EMBRACING DARK DESIGNS?
MARVEL
Design platform Marvel reaches out to developers in this neatly crafted email to discuss working with their API. Developers often set their machines or their code editors to Dark Mode due to the vast amounts of time spent at their screens reading and writing code. Marvel may have made the decision to make this a dark design when considering their intended audience.
Marvel combines the dark background with custom illustrations in white, featuring highlights in a bright, friendly blue—a stunning combination that stands out in the inbox.

REMARKABLE
Black Friday gives designers the opportunity to get creative with dark styles whilst promoting themed offers. ReMarkable, who produces a writing and drawing device, uses bold typography and negative space to promote their offer in an easy-to-digest way. The orange CTAs add a touch of color to this otherwise simple design. The result is a stunning email design.

EIGHT SLEEP
Eight Sleep promotes temperature control products that aid better sleep. The dark background with highlights in a cool blue creates a peaceful night time scene—perfect for promoting products that keep you cool at night.

DESIGNMODO
You don’t have to work with black and white to utilize dark styles. In fact, using pure white (#FFFFFF) against pure black (#000000) is also known to strain the eye if you are presenting more than a single paragraph of text. Instead, we recommend working with very light and dark gray combinations for a better reading experience. You don’t have to limit yourself to shades of grey, either. Designmodo takes advantage of different dark and light tones of blue to craft this beautiful campaign.

EQUAL PARTS
Cookware retailer Equal Parts have a number of bold colors in their brand palette, which they make pop against the dark backgrounds of their email designs. In this loyalty campaign they use the power of their bold color palette to take the reader on a journey, offering a fun, digestible, and beautiful way to absorb the details of their referral program.

THE NEW YORK TIMES
When combined with bright, vivid colors, dark designs can be friendly and fun. But when paired with more muted colors, dark styles can set a completely different mood and evoke very different emotions.
This campaign from the New York Times is using a dark style to create a gloomy, serious look that’s a perfect fit for their new TV series documenting troubling topics.

HULU
It’s quite common to see dark styles utilized to promote TV and film, such as this example from Hulu for The Handmaid’s Tale. This dark and gripping drama just wouldn’t get the same promotional impact if framed within an email sporting a bright background. Instead, the dark design builds interest and atmosphere, beckoning the reader to “come back and watch.”

BELLROY PREMIUM
Dark colors are often associated with elegance and formality, so brands looking to give their campaigns a premium look and feel may want to consider a dark color palette. Check out this campaign by Bellroy, an Australian accessories brand. Bellroy’s design team combines the power of a dark background, beige-golden shades, and a serif font to give this campaign a high-end look that’s perfect for promoting their premium range of accessories.

LOUPE
Design conference Loupe created a simple but impactful campaign to announce that tickets have gone on sale. The use of a single bold color, negative space, and full width development make this one of my favorite dark email designs.

Source: Litmus

Close Project

Dark Mode

The Ultimate Guide to Dark Mode for Email Marketers

Dark Mode. The tech industry is buzzing with these two words, and email marketing is no exception. Last year, Apple added Dark Mode to its desktop email client. In 2019, Dark Mode came to iOS Mail and other industry heavyweights, including Gmail, announced support for Dark Mode. There’s no denying Dark Mode is taking over the inbox—and making sure emails look great in this reading environment is the new big challenge for email marketers.


In this post, we break down what email clients offer Dark Mode, how each client’s Dark Mode settings impact your email designs, and what you can do to improve your emails for subscribers that read in Dark Mode.

Ready to dive in? Let’s recap the basics.

DARK MODE: A DARKER COLOR PALETTE FOR LOW-LIGHT OR NIGHTTIME ENVIRONMENTS
Dark Mode is a reversed color scheme that utilizes light-colored typography, UI elements, and iconography on dark backgrounds—and it’s one of the hottest digital design trends in the past year. From Apple’s OS to apps like Twitter, Slack, or Facebook Messenger, most popular operating systems and apps now allow users to switch to Dark Mode. Dark Mode is a hot topic—and there’s good reason. Many users prefer Dark Mode because:
It’s easier on the eyes. Light text on a dark background is much better for minimizing eye strain, especially in low-light situations.
It reduces screen brightness, saving your battery life.
It can improve content legibility and can make it easier for some users to consume content on desktop and mobile.
They may simply have a preference for darker interfaces.
With Dark Mode popularity growing, it’s no surprise that it’s coming to the inbox, too.
WHAT EMAIL CLIENTS SUPPORT DARK MODE? These clients and apps currently offer Dark Mode—either as a setting that the user can set manually or by automatically detecting the user’s preferred color scheme:

Mobile Apps

• Gmail App (Android)
• Gmail App (iOS)
• Outlook App (Android)
• Outlook App (iOS)

Desktop Clients

• Apple Mail
• Outlook 2019 (Mac OS)
• Outlook 2019 (Windows)
• Web Clients

Outlook.com
But just because all these email clients offer a way to set their UI to a dark color scheme, that doesn’t mean that they handle your emails the same ways. Email rendering is complex. An email that looks great in one client might look broken in another. Now, Dark Mode is adding another layer of complexity. In fact, there’s various ways a Dark Mode email client might deal with your code.

HOW ARE CLIENTS APPLYING DARK MODE TO MY EMAILS?
At the moment, there appear to be three fundamentally different types of color schemes that email clients use to apply Dark Mode to emails. Let’s look at them one by one (or jump straight to the Dark Mode Email Client Support Chart.)

No color changes

Yes, you read right. Some email clients let you change their UI to Dark Mode, but that doesn’t have any impact on how your HTML email is rendered. Whether the app is set to Light or Dark Mode, your email will look exactly the same. Email clients like iOS and Apple Mail always render your Light Mode designs by default (unless you specifically add code to trigger Dark Mode).

Check out this email example in Apple Mail: The design of the email stays exactly the same, no matter if you view it in the dark or light email client UI: There’s an exception though: plain-text emails do trigger the application of a Dark Mode theme, and the minimum code that blocks Dark Mode from applying to a plain-text email is a 2×1 image—this is to ensure that you can include a 1×1 tracking pixel while retaining a “plain-text”-like feel. Partial Color Invert This Dark Mode theming only detects areas with light backgrounds and inverts them so the light backgrounds are dark, while the dark text becomes light. It generally leaves areas that already have dark backgrounds alone, resulting in a fully Dark Mode design. Fortunately, most email clients that use this method also support Dark Mode targeting, so you can override the client-default dark theme.

Outlook.com is an email client that partially inverts colors, like you can see in this screenshot: No color changes compared to a partial color invert
Full Color Invert

This is the most invasive color scheme: it not only inverts the areas with light backgrounds, but impacts dark backgrounds as well. So if you already designed your emails to have a dark theme, this scheme will ironically force them to become light. Unfortunately, this is currently the tactic used by some of the more popular email clients, such as Gmail app (iOS13) and Outlook 2019 (Windows).

In the screenshot below from Outlook 2019 (Windows), you can see the white backgrounds have been converted to a dark gray and areas that previously had a dark blue background with light text are now light blue with dark text.
Not only does this Full Color Invert scheme most radically change your email, but the email clients that use this logic also don’t allow Dark Mode targeting at the moment. Email clients are still figuring out how to best implement Dark Mode and may be open to feedback from users—especially since not allowing developers to target Dark Mode with their own styles can have a negative impact on legibility and accessibility.

In the interest of advocating for better Dark Mode targeting support and less invasive Dark Mode theming logic, you can communicate your thoughts directly to Gmail’s Accessibility team, and you can also contribute your screenshots of Gmail’s Dark Mode breaking your email.



So what email client follows what color scheme? We’ve tested the Dark Mode settings in the following email clients to see how they impact a regular email that doesn’t include any Dark Mode-specific targeting. Here’s what we found:

DARK MODE EMAIL CLIENT SUPPORT CHART (AS OF NOVEMBER 2019)

HOW DO I TARGET DARK MODE USERS WITH MY OWN STYLES? Now we know how popular email clients in Dark Mode handle your regular HTML emails. But what if you’d like to apply your own Dark Mode styles that could very well differ from email clients’ default color schemes? Here are two methods you can use:

@media (prefers-color-scheme: dark)

This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that’s set to Dark Mode.

[data-ogsc] and/or [data-ogsb]

This is a method first brought to our attention by Mark Robbins to target Outlook app. While it seems like a pretty narrow market share, it’s relatively easy to simply duplicate the @media (prefers-color-scheme: dark) styles you already applied and simply add the appropriate [data-ogsc] and/or [data-ogsb] prefixes to each CSS rule.

But—and there’s always a “but” in email—there’s no consistent support for these targeting methods either.

DARK MODE TARGETING: EMAIL CLIENT SUPPORT TABLE
While some email clients—we’re looking at you Gmail—offer email designers no opportunities to target Dark Mode to optimize the reading experience, most clients can be targeted with one of these methods.

When you’re applying these styles to your emails for use across email clients, keep these things in mind:

1. OPTIMIZE YOUR LOGOS AND OTHER IMAGES FOR ALL STYLES
Add a translucent outline to transparent PNGs with dark text for legibility in email clients where Dark Mode can’t be targeted, like Gmail App and Outlook 2019 (Windows). This will help prevent any issues where the email client might decide to use either the Partial Color Invert or Full Color Invert settings—and make things easier on the eyes for your subscribers. Opting for transparent backgrounds wherever possible will help with this.

Plus, swap Light Mode and Dark Mode images with the @media (prefers-color-scheme: dark) and [data-ogsc] methods described in this guide.

2. ENABLE DARK MODE IN EMAIL CLIENT USER AGENTS
By including this metadata in your <head> tag, you can ensure that Dark Mode is enabled in your email for subscribers that have Dark Mode turned on:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

To support that metadata, you’ll need to add this CSS as well:
<style type=" text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>

3. ADD DARK MODE STYLES FOR @MEDIA (PREFERS-COLOR-SCHEME: DARK)
Add this media query in your embedded <style></style> section for custom dark mode styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS), and Outlook App (iOS).

The .dark-img and .light-img classes are particularly useful for showing a dark mode-specific logo if having an outlined logo isn’t ideal.

Example CSS:
@media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content, Like Images */
.light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
.darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
h1, h2, p, span, a, b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
.link { color: #91ADD4 !important; }
}

4. DUPLICATE DARK MODE STYLES WITH [DATA-OGSC] AND/OR [DATA-OGSB] PREFIX
Add this styling for support in Outlook app (Android).

Example CSS

/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }

5. APPLY YOUR DARK MODE-ONLY STYLES TO YOUR BODY HTML
Make sure all of your HTML tags have the appropriate Dark Mode classes inserted. Here is an example of the .dark-img and .light-img classes as they appear in our Light Mode vs. Dark Mode logos.

Example HTML:

<!-- start HEADER_LOGO -->
<a href="http://litmus.com/" target="_blank">
<img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />

<!-- The following Dark Mode logo image is hidden
with MSO conditional code and inline CSS, but will be
revealed once Dark Mode is triggered -->
<!--[if !mso]><! --><div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">
<img src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" /> </div><!--<![endif]-->

</a>
<!-- end HEADER_LOGO -->

6. ABT: ALWAYS BE TESTING!
As we always mention, email clients are constantly changing. Especially with a new feature like Dark Mode, tweaks to rendering logic are coming quickly and frequently. The only way to be on top of it all is to test every email with a tool like Litmus.

RESPECT USER PREFERENCES WHEN IT COMES TO DARK MODE
One of the biggest benefits of dark mode is its assistance with reducing eye strain for users in low-light conditions or for other personal reasons. If your subscribers are making that conscious decision to view emails in dark mode, it’s best to respect that. Just like you’d want to add ALT text in case your users prefer to have images off by default, you should build emails that respect darker interfaces, too.

Source: Litmus

Close Project

Email Accessibility

Making Emails for Everyone

The world is growing, changing, and aging, and the world’s email subscribers are coming along for the ride. More people are accessing email on a wider variety of devices and types of connections than ever before. And email subscribers themselves are more diverse than at any other point in email’s 47-year history.

But what does all of this change mean for email marketers?

Apart from rethinking strategy and tactics, it points to the need for marketers to create more accessible email campaigns that can be used by anyone—regardless of their ability. There’s a misconception that optimizing your emails for accessibility is hard. Getting started with making your emails more accessible can feel like an impossible task, and many marketers aren’t sure where to start.

77% OF MARKETERS SAY EMAIL ACCESSIBILITY IS A PRIORITY FOR THEIR BRAND—BUT ONLY 8% RIGIDLY FOLLOW ACCESSIBILITY BEST PRACTICES.

INTRODUCING THE ULTIMATE GUIDE TO EMAIL ACCESSIBILITY
The truth is, implementing accessibility is easier than you’d think. Our Ultimate Guide to Email Accessibility gives you the tools, tips, and resources you need to create more inclusive emails—one step at a time.

Why email accessibility matters—and the impact it has on your bottom line.
There are currently around 3 billion email users worldwide. None of those users are the same, with different abilities and disabilities—both permanent and temporary—and access to technology that informs how they experience email. If you create accessible emails, you can reach a wider audience than ever. If you don’t, you’re leaving money on the table with every send. We dig into the research and stats that prove an investment in accessibility is worth it.

How to write and design inclusive emails.
You don’t have to be a coding expert to create more accessible emails. By writing and designing simpler, more subscriber-friendly emails, you can open up your content to a wider audience, all while providing a better, more valuable experience for your subscribers. We walk you through key accessibility guidelines for email design and copywriting—and show how you can put them into action for your campaigns.

How to optimize your email code for accessibility.
Developing an accessible email doesn’t require fancy coding techniques. This guide breaks down the simple, well-established principles and coding tricks that ensure your email campaigns can be accessed from a variety of devices and assistive technologies.
Accessibility is more than just improving the experience for a handful of subscribers—it’s about improving the experience for everyone. Use these insights to get your team on board with email accessibility and start making more inclusive email campaigns in no time.

Source: Litmus

Close Project

Email Accessibility

8 Best Practices You Should Follow

Visual design is more than mere decoration. Great email designs aren’t just pretty, but make it easy for your subscribers to digest your content, find key information, and take action quickly—regardless of your subscribers’ ability. With that, email design has a significant impact on email accessibility.

If you’re looking to create more accessible email campaigns, optimizing your email design is just as important as writing accessible email copy and optimizing your code. How? Here are 8 best practices you should follow to ensure your campaigns are designed for everyone, regardless of ability.

1. USE REAL TEXT
A lot of companies use all-image emails, designing them in programs like Photoshop, and dump them into a basic HTML template. Although this allows for a high level of visual customization, favoring real text in HTML has a number of benefits when it comes to accessibility.

Many email clients disable images for security reasons. When this happens, even those without disabilities can’t read your email. Perhaps more importantly, even when images are enabled, assistive technologies can’t take full advantage of your content. Screen readers can only access the underlying code of an email, not the text in an image, and screen enlargers and zoom settings often result in blurry, unreadable emails.

The majority of your copy should be included in your email as live text inside of HTML elements.

2. CREATE A STRONG HIERARCHY
Both cognitive and situational disabilities (like being in a hurry or being distracted) make it hard for people to read and understand long, uniform blocks of text. Hierarchy—or creating visual differences that reinforce importance—helps those users quickly consume content in email.

By using text size, color, and placement, you can create emails that are easily scanned and read. Try creating bold, high-contrast headlines above smaller portions of copy, and allow for enough whitespace between sections to avoid content bleeding together.

3. LEFT-JUSTIFY YOUR EMAIL COPY
Using both real text and hierarchy can aid readability, but there are subtler ways to improve the readability of your emails, too. One way is by using left-justified text for longer sections of copy.

Reading relies on visual cues to make sense of where we are on a page or screen. One of the most important cues is the start of a new line, which acts as an anchor for our eyes when jumping around an email. It’s helpful to keep that anchor in the same place for every new line in longer bits of copy, but many designers prefer the visual symmetry provided by centered text. Using left-justified text is one of the best ways to keep copy readable.

Justified text, which adjusts the spacing between words to keep uniform lines of text, creates those anchors but comes with other problems. When using fully justified text, rivers of white are often introduced which create hurdles for people with cognitive disabilities.

4. USE A MINIMUM FONT SIZE OF 14PX
You should ensure that your text is large enough for people to easily read, regardless of what size screen they are using. Some mobile devices, like iPhones, will automatically enlarge text that is less than 14px in size. Keeping copy at least that big—preferably even larger—can help create better reading experiences.

5. OPTIMIZE YOUR LINE SPACING
Ensuring that there is enough space between lines of text, but not too much space, is a great way to improve readability. When lines of copy are too close together, it’s hard to tell them apart. Conversely, when they are too far apart, it’s hard to know where to look for the next line as they all look like short, individual paragraphs. The World Wide Web Consortium even has clear guidelines around proper line spacing, suggesting 1.5 to 2 is preferred to single spacing.

6. KEEP CONTRAST HIGH
Contrast is the difference between two elements in an email. Most often, it’s the difference between the color of copy and the background on which it sits. Too low of contrast and people with low-vision can have an extraordinarily hard time reading an email.

Fortunately, there are well-established guidelines for proper contrast. The Web Content Accessibility Guidelines clearly define how they determine appropriate contrast. The main rule is to make elements distinguishable. In their words:
MAKE IT EASIER FOR USERS TO SEE AND HEAR CONTENT INCLUDING SEPARATING FOREGROUND FROM BACKGROUND.

There are a variety of ways to do this, including using color, font weight, and font size. Regardless of which method you use, make sure your elements contrast enough with other elements to ensure your emails are accessible. Accessibility group WebAIM even has a free contrast checker online that can help identify any contrast issues before your subscribers do.

7. INCREASE USABILITY
When it comes to actually interacting with emails, you should ensure that all links and buttons—anything considered a touch target—are usable.

When it comes to text links, this means making those links distinguishable from the surrounding text. There is a reason the default for a link is underlined blue text. When overriding that styling, you should do so sparingly. Underlines, especially, are helpful for denoting links in an email. There are approximately 300 million colorblind people in the world, so relying solely on color for link styling puts them in a difficult position.

For calls-to-action and buttons, keep them large enough to be tapped by even the biggest, shakiest thumbs or pointing devices. And make sure there is ample whitespace around those targets so there aren’t accidental link taps and avoidable frustration for users.

For both text links and buttons, including a hover state is another great way to create a better, more accessible user experience. Targeting links in your CSS and using the :hover pseudo selector allows you to apply different properties when a user hovers over those links. This can provide a clear indicator that a piece of content can be clicked and is an often overlooked enhancement in email design. Anthony from UX Movement sums it up nicely in his article, Why Your Links Need a Hover Effect:
WHETHER YOUR USERS ARE COLORBLIND OR NOT, EVERYONE SHOULD BE ABLE TO SPOT AND TARGET LINKS WITH EASE. ADDING A HOVER EFFECT TO YOUR LINKS IS A SIMPLE AND EFFECTIVE WAY TO MEET THEIR NEEDS. LINKS AND TEXT SHOULDN’T JUST LOOK DIFFERENT. FOR THE BEST USER EXPERIENCE, THEY SHOULD ALSO BEHAVE DIFFERENTLY.

8. KEEP YOUR EMAIL LAYOUT SIMPLE
The layout of your email itself can affect accessibility.

Complex, multi-column layouts can lead to sensory overload for users. The more complex a layout, the easier it is to get lost in an email, so simpler layouts are often preferred. Single column layouts are especially effective at creating accessible campaigns—they streamline content and help reinforce hierarchy, aiding scannability in the process.

Single column layouts are also generally easier to adjust across different screen sizes. As more of the world comes online, more people are using smaller mobile devices to access the internet and email. Regardless of which technique you’re using, keeping your emails responsive across different devices is a great way to improve the subscriber experience.

Source: Litmus

Close Project

7 Myths of Email Development

Don't be fooled

Email began as a text-only, 1:1 method of communication in 1971, when it was conceived by Ray Tomlinson. Over the decades email has evolved, moving away from the text-only versions of early email to HTML. Pushing email into the future has been the email developers, using creative techniques within strict confines.

In that time, email developers created all types of “best practices” to help others get started with email coding, or to act as reminders for those in the trenches of what email developers can and can’t do.

We’re here today to remind email developers that best practices shouldn’t be seen as static. They change. What was best for email developers in the late 1990s no longer rings true in the mid-2010s.

Here are seven email development myths that have been around for ages, and why it’s time to finally put them to rest:

• Myth #1: Emails must be 600 pixels wide.


• Myth #2: You must use standard system fonts only.


• Myth #3: Only use the Transitional DOCTYPE.


• Myth #4: Attribute selectors need to be used.


• Myth #5: All styles in emails must be inlined.


• Myth #6: Don’t use background images in emails.


• Myth #7: Emails must look identical across all email clients.

MYTH #1: EMAILS MUST BE 600 PIXELS WIDE.
Before mobile phones and tablets became commonplace and email was solely a desktop application, best practice dictated that all emails should be no wider or narrower than 600 pixels. Why exactly 600 pixels? The viewport size of the most commonly used email clients back in the day (HoTMaiL, Yahoo, and Outlook) was around 500-550 pixels. Setting the email width to be no wider than 600 pixels would allow as little horizontal scrolling in the email as possible.

That 600 pixel rule stuck around. Even though today there are more devices to cater for, all with varying screen sizes, why do we stick to the this 600 pixel rule?

It’s an easy rule to stick by, especially if your email workflow includes creating a design in Adobe Photoshop or Sketch—you need a physical width to start your email design. It’s true that an email that is 600 pixels in width will still display very nicely among the more popular email clients, on desktops. And by using media queries, email developers can easily change the width of the email depending on the device subscribers use to open.

Fluid width solves the problem of the sheer number of devices email developers need to support. To make this work,use max-width to stop emails getting too wide and illegible on larger viewports, and MSO conditional statements to make Outlook understand (as it does not render the max-width CSS property).

Zalando’s emails are 450 pixels wide—a long way from the 600 pixel standard we’re used to seeing. Combined with the large CTAs, it looks like Zalando’s mobile-friendly emails cater more toward the mobile crowd.

Meanwhile, Email Weekly’s emails employ the fluid technique, with a max-width of 960 pixels. It uses media queries to gracefully change the width of the email depending on the device width.

Depending on the clients and devices your subscribers use to open your email, it can make sense to set your email’s width to a maximum other than 600 pixels.

MYTH #2: YOU MUST USE STANDARD SYSTEM FONTS ONLY.
System fonts have long been the safe option for use in email. Well, they’ve been the only option.

On the other hand, web designers have been experimenting with using non-standard fonts on the web since the early 2000s. In 2008, the CSS rule @font-face finally had the support from web browsers for web designers to use non-standard fonts on their websites. In 2010, Google launched its own library of web fonts, free for web designers to use.

No such luck for email designers due to the lack of a solid method for importing the web fonts into an HTML email. Not to mention the lack of licensing: when web fonts were first created, no one ever thought they’d be used in emails, so licensing of web fonts didn’t cover email use.

Though we recommend standard system fonts in your emails, that doesn’t mean you can’t employ web fonts as a progressive enhancement technique. Online font repositories are beginning to cover email use in their licensing. And Google Fonts, with its 800 free-to-use web fonts, is now becoming the go-to library for email designers wanting to use non-standard web fonts in their emails.

Support for web fonts exist in Google Android 4.4, Apple Mail for the iPhone, iPad and Mac, and Outlook 2011 and 2016 on OS X. This may not seem like a lot, but as of September this year four of the top five email clients, in market share, support web fonts–iPhone, iPad, Google Android, and Apple Mail. That’s over 50% of all email opens in September! Of course, you need to look at your own subscriber base, but this is a good indicator of potentially how many people will be able to see web fonts in your emails.

Can you see the subtle differences between these two emails? The one on the left is using web fonts, while the right one has web fonts disabled. The Outnet have chosen a great fallback font which is very close in look and feel to their web font, showing how you can use web fonts consistently in your email today.

MYTH #3: ONLY USE THE TRANSITIONAL DOCTYPE.
The DOCTYPE of an HTML document tells the browser how to render the page, and is used to validate the document’s HTML.

The most commonly used DOCTYPE in email is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Email developers have gotten into the good habit of having a DOCTYPE, even though some email clients will strip the DOCTYPE altogether or replace it with a different one. Gmail, Outlook.com, and Yahoo! Mail are among the email clients that strip out whatever DOCTYPE present in your email, and replace it with HTML5 DOCTYPE.

On the web, different DOCTYPEs change how some CSS properties and HTML elements are rendered. The above DOCTYPE allows for the widest range of HTML elements, including deprecated elements like , which have been used in email. In past tests, this DOCTYPE was proven to be the most reliable for email. WAS proven—past tense.

This was before HTML5 became the standard it is now:

<!DOCTYPE html>

The HTML5 DOCTYPE allows for the use of newer HTML5 elements, for example <video>, which can be used in email. While not all clients may be able to render the new elements or properties, there is no reason not to nudge your email into the future by updating your DOCTYPE. You can still used deprecated code with a HTML5 DOCTYPE, but the code will no longer be valid when checked through a validation service. While there’s no impact on your email in terms of deliverability or performance if your code is valid or not, it can be a good idea to check your HTML markup for open HTML tags, which can impact how your email is rendered.

MYTH #4: ATTRIBUTE SELECTORS NEED TO BE USED.
Yahoo! Mail has been a slightly kinder email client to develop for than, say, Outlook. It supported style in the head for as long as we can remember. One quirk Yahoo! Mail did offer up was that it rendered any CSS statement in a media query alongside any CSS outside of the media queries. The simple fix for this was to write the CSS statement as an attribute selector:

*[class=”foo”] {color:#000000; font-family: sans-serif;}

Writing CSS in the head of emails like this became the standard as other email clients, which also read style in the head, had no problem reading simple attribute selectors, like the example above.

In early 2015, Yahoo! Mail rolled out an update which enabled it to read style like any “normal” email client would:

.foo {color:#000000; font-family: sans-serif;}

However, because attribute selectors had been so ingrained in email development, it wasn’t surprising to see them still kicking around in email code. Email developers were simply used to using them, and often email templates went un-updated.

Previously harmless, attribute selectors can now do a little bit of harm to your email, if you do have them in your code. If your email’s style doesn’t appear to be working in Gmail, check to see if you’re still using attribute selectors in your style. Gmail does not support attribute selectors, but it does now (finally!) support style in the <head>.

With attribute selectors no longer required for Yahoo! Mail and Gmail’s lack of support for them, there is no need to use attribute selectors in the CSS in your emails.

MYTH #5: ALL STYLES IN EMAILS MUST BE INLINED.
Tables for layout and inlining styles have been the bedrock of email development since… forever. They define the difference between email and web development. Inlining styles is now so commonplace for email developers, it’s become a bit fuzzy on why styles had to be inlined in the first place.

Outlook has never had a problem with style in the head of the email. On the other hand, Gmail did. Gmail has literally been the biggest reason (with a market share of 16% as of September 2016) as to why email developers inline their CSS.

At the end of September, Gmail began supporting style in the head. So do we need to inline all styles anymore?

If your subscribers mostly use Gmail, iOS, or even Outlook, we can confidently say now is the time to move your styles to the head. However, if the majority of your subscribers use obscure email clients or international email clients (Yandex, Libero, Terra) that rely on inline styles, you may have to continue using them. As always we advocate testing your email whenever you make any major changes to it.

MYTH #6: DON’T USE BACKGROUND IMAGES IN EMAILS.
Background images have been notoriously hard to get right in email. Email developers use complicated VML code for them to render in many versions of Outlook, and there’s been a lack of support for background images in other email clients too.

Here’s the thing: background images can and do work in email, but it’s how they’re incorporated into the design of your email. With limited support, you shouldn’t use background images as a key element in your email’s design, because that makes or breaks the experience for your subscriber. But you can use them in your email similar to how you’d use web fonts—as a progressive enhancement.

One of the biggest reasons for not using background images in email was Gmail’s lack of support for the CSS properties background-size and background-position. These CSS properties are important for high pixel density screens and hybrid/fluid/responsive email, where a certain amount of control needs to be placed on how the background images are sized and placed. Both are now supported in Gmail and Inbox by Gmail, so there’s even less of a reason to not try out using background images in email.

Kristian Robinson, Lead Email Developer at TWO Digital marketing, and The Email Design Conference 2016 speaker, digs deeper into background images in email, if you’re feeling inspired to tackle them.

MYTH #7: EMAILS MUST LOOK IDENTICAL ACROSS ALL EMAIL CLIENTS.
Email clients all have slightly different ways of rendering HTML emails. Rather than accepting this, email developers have tried to hack their way to identical emails across a multitude of email clients. A very honorable task to undertake, but it can result in bloated and hacky HTML code which can be a nightmare to manage and keep up to date.

It might not be the email developer searching for email perfection, but the client or other stakeholders. However, it is the email developer’s responsibility to educate those around them to understand the pitfalls of email development—why email clients render differently and why it doesn’t matter if something’s 1 pixel higher in one email client compared to another.

This myth is especially harmful when trying to employ new techniques in email, which may not render across 100% of email clients, for example web fonts and background images. Both of which are fantastic ways to enhance your email. And where would we be as an industry if we didn’t try to adopt and experiment with new techniques in our emails?

Just because something has been done a particular way for years doesn’t mean there’s no better way to do it. Now is the time to question the rules and best practices the email marketing industry have been working with for decades.

Close Project