Martech: Martech is Marketing Logo
  • Topics
    Digital Transformation
    Marketing Operations
    Data
    Customer & Digital Experience
    Performance Marketing
    Marketing Management
    Special Reports
    MarTech Topics
  • Conference
  • Webinars
  • Intelligence Reports
  • White Papers
  • What is MarTech
    Mission
    Staff
    Newsletter
    Search Engine Land
    Third Door Media

Processing...Please wait.

MarTech » Performance Marketing » 5 Emails Pushing The Boundaries Of HTML & CSS

5 Emails Pushing The Boundaries Of HTML & CSS

Columnist Andrew King explores some of the most innovatively designed brand emails of 2014.

Andrew King on November 19, 2014 at 10:36 am

mobile-email-ss-1920

I recently participated on a panel of email designers, hackers and entrepreneurs that discussed the many difficulties that email designers face with poor CSS support in various email clients and what developers could do to fix that issue.

Despite the limitations of many email clients these days (even the new Inbox by Gmail app doesn’t support media queries!), I’ve still seen some absolutely amazing emails this year that really push the boundaries of what is possible within the inbox.

So, I’d like to say a big Thank You to all of the email designers and companies out there that are innovating in our space. Below is just a small selection of some great emails I received this year.

B&Q: Sliding Carousel With Interactive Hot Spots

This email by home improvement retailer B&Q is probably one of the most innovative emails of 2014!

Firstly, there is a sliding carousel which is timed to automatically slide every five seconds; the timer in the top right corner lets you know how much time you have on a particular slide. You can also pause the carousel if something catches your eye.

BQ

In addition, there are big orange buttons on each slide, and tapping on these hotspots allows you to see products and prices up close.

This type of functionality is fairly common on any e-commerce website, but takes a whole lot more work and some clever hacks to make it work in the email environment.

Luckily, it seems to work perfectly on my iPhone and iPad and degrades nicely in less sophisticated clients such as Outlook.

Movember: Hamburger Button

The Movember team decided to incorporate one of the most familiar icons and features used in mobile web design into their email: the “hamburger” button. It’s not as delicious as it sounds, but it is functional!

Movember

When you view this email on your mobile device, you’ll see that it’s been optimized using responsive design. Certain buttons are hidden, images scale down and font sizes increase, as you would expect with a regular responsive email.

The key difference is that in the top right corner of the mobile version, there is a hamburger button which drops down three navigation links when tapped.

Although this might not sound super exciting, it uses a fairly advanced bit of coding called progressive disclosure, which I hope to see used in a variety of other ways in future emails.

Burberry: Video In Email

Burberry has recently been embedding some beautiful video clips within their emails using the HTML5 video tag. This allows it to showcase its latest products via videos which it presumably already created for its website and YouTube.

Burberry

HTML5 videos for email aren’t new, but they haven’t exactly been widely adopted, either, due to most email clients not supporting them. In fact, they only really work in some Apple devices.

However, I’m fairly certain that a large percentage of Burberry’s subscribers are reading their emails on Apple devices, so it should be worth the extra effort for Burberry. The videos also degrades very nicely to a jpg image for non-Apple users.

Litmus: Video Background

Speaking of video in email, one of the most talked about emails in the email design community this year was this campaign from Litmus, which incorporated a video background.

This is a super impressive feat considering all of the hacks that were required to get it to work and degrade gracefully across all of the main email clients.

2014-11-19_07-32-40
You can read all about the process here. I look forward to seeing how Litmus tops this next year!

NFL: Scrolling Text & Live Content

This email from the NFL has a lot going on! For starters, there is scrolling HTML text at the top of the email, showing the latest news stories.

This text is contained within an iframe, which isn’t something you would usually expect to see within an email, but it seems to degrade nicely and can be seen with images turned off.

NFL

Secondly, the team logo at the top of the email — next to “Nearest Stadium”– is using live content, based on your location at the time of open. (I know this because I opened the email in Oakland and got the Raiders logo, then opened it again in San Francisco and got the 49ers logo.)

Finally, this email also seems to involve some dynamic advertising, courtesy of LiveIntent.

Are You Innovating?

After seeing all these amazing emails, you may be wondering, “How can I create these types of emails for my company?” Next month, I’ll discuss tips and tricks on how to take risks and create successful and innovative email campaigns.


Opinions expressed in this article are those of the guest author and not necessarily MarTech. Staff authors are listed here.


New on MarTech

    How clean, organized and actionable is your data?
    Replacement Survey: The top 5 solutions replaced
    What’s the biggest hidden secret in Google Ads?
    Native video tops social media in brand awareness study
    Worsening economy has more shoppers getting online info before making in-store purchases

About The Author

Andrew King
Andrew is an email marketer and Solutions Engineer at Campaign Monitor. He has designed, coded and deployed hundreds of emails (to millions of people) and most recently consulted on email strategy for some of the world's largest retailers, non-profits, financial institutions and publishers. He regularly speaks at industry events and can often be found pondering the future of email.

Related Topics

Performance Marketing

Get the daily newsletter digital marketers rely on.

Processing...Please wait.

See terms.

ATTEND OUR EVENTS The MarTech Conference logo.

September 28-29, 2022: Fall

Start Training Now: Master Classes

Start Discovering Now: Spring



The SMX Conference logo.

Start Training Now:: SMX Advanced

November 14-15, 2022: SMX Next

March 8-9, 2022: Master Classes

Webinars

Agencies: Grow Revenue Streams Through Web Accessibility & Compliance

Protect Your Paid Advertising Spend Against Ad Fraud and Invalid Traffic

Build an Integrated Search Strategy Across Google, Amazon and YouTube

See More Webinars
Intelligence Reports

Enterprise SEO Platforms: A Marketer’s Guide

Enterprise Identity Resolution Platforms

Email Marketing Platforms: A Marketer’s Guide

See More Intelligence Reports
Featured White Paper

Site Search 101

See More Whitepapers

Receive daily marketing news & analysis.

Processing...Please wait.

Topics

  • Transformation
  • Operations
  • Data
  • Experience
  • Performance
  • Management
  • All Topics
  • Home

Our Events

  • MarTech
  • Search Marketing Expo - SMX

About

  • What is MarTech
  • Contact
  • Privacy
  • Terms Of Use
  • Marketing Opportunities
  • Staff

Follow Us

  • Facebook
  • Twitter
  • LinkedIn
  • Newsletters
  • RSS

© 2022 Third Door Media, Inc. All rights reserved.