Koogle d*EPiC SWYNme BITLYme EmailMarketingTipps


(Viewing source=stylecampaign.com)

tactics Interactive email using SVG and SMIL

SMIL is SVGs’ internal animation and interaction system. It is potentially very powerful as within the SVG viewport a different set of design rules apply. You can layout not just vector graphics but raster images and live text very freely and then apply interaction and motion. This was an experiment to see if we could create an SMIL-based interactive email, view the demo here. [...] [more]
stylecampaign.com    Design

tactics Image budgets for email

The average image weight for those same fifty retail brands has increased 98% over four years, effectively doubling to come in at 510KB vs. 257KB. This brings it more inline with the typographic study. I purposely left animated Gifs out of the two retail studies. To even things out I saved out the first frame from the three Gifs in the typographic study, then re-calculated the numbers which reduced the average image weight from 568KB down to 528KB. [...] [more]
stylecampaign.com    Design, Study

 stats Typographic patterns in email

All 50 emails needed to be responsive, have a single column of live body text with a heading. I collected stats at three widths: full-width (desktop), mid-sized (450px) and small (320px). With a sample group of 50 I’m not expecting statistical significance, I just wanted to note some trends. All the emails were deployed between Nov 2014-Jan 2015 when I carried out this work. I used tools such as WhatFont, charcounter.com and webpagetest.org. I haven’t had time to triple check it, feel free to email [...] [more]
stylecampaign.com    Design, Study

 tactics Webfont support in email

While trying to find out which webfont services are compatible with email, one type foundry mentioned that their license only covers certain font formats. I believe it was WOFF, EOT and SVG, but not TTF or OTF as they are considered desktop formats. As each format has varying browser support, they asked if this would give us enough coverage in email. [...] [more]
stylecampaign.com    Design

tactics CSS shapes in email

CSS shapes allow us to move away from boxy designs, towards organic magazine style layouts. In the photo below the text follows the contours of the image, as well as being shaped into a ball. Thanks to iOS 8, we can explore similar creative layouts in email by wrapping content around polygons, standard shapes like ‘circle‘ or an images alpha channel. [...] [more]
stylecampaign.com    Design

 tactics Video in email

Over the last eight years we’ve seen a number of video in email false starts with Certified Video, VideoGifs, base64 embedded video and even streaming JPEGs. After years of exploring hacks, I felt like we’d exhausted the subject. So a few years ago I decided to just wait it out, let HTML5 catch up making ‘real video’ freely accessible. [...] [more]
stylecampaign.com    Video

mobile Responsive email navigation [GFX]

When I first started designing responsive emails, navigation was the component that intimidated me the most. Avoiding complexity was my earliest strategy, so I’d hide the navi on mobile or shift a three tab navi. Three years on we’ve run through numerous responsive navigation patterns, though there’s a handful I tend to revisit. [...] [more]
stylecampaign.com    Design, Mobile

tactics SVG animation

Going from a static SVG to an animated SVG is a big jump, unless you want to float a balloon up the screen (even that takes a bijillion lines of code). There’s three ways to animate an SVG: CSS, native SVG animation and JavaScript. As email devs we can’t use JavaScript, so we started with the more familiar CSS. [...] [more]
stylecampaign.com    Design

 tactics Basics of SVG in email

Recently I did a bit of research into Scalable Vector Graphics (SVG). I wanted to look into the basics, such as how difficult were they to create, add to an HTML file, make fluid and what kind of email support they have. [...] [more]
stylecampaign.com    Design

mobile MapMyFitness case study

We worked closely with Jay DeFoore, who leads email and marketing automation efforts for MapMyFitness, to optimize the company’s email template suite for mobile and update the branding to coincide with a site refresh. While it’s not unusual to see clients with 50% mobile usage, MapMyFitness has the highest mobile numbers I’ve seen. [...] [more]
stylecampaign.com    Design, Mobile, Study

mobile iOS email apps: highlights and data

What with the new Gmail upgrade and Mailbox hype I’ve been wondering just how fragmented iOS has become, especially as the Gmail app doesn’t support responsive design. While I like to keep track of iOS email apps, I’ve always considered them edge cases and don’t sweat them during QA. Though lately I’ve been getting more questions about them from clients, so I thought I’d share some highlights from the more popular apps and put them in perspective regarding render testing. [...] [more]
stylecampaign.com    Mobile

 mobile Responsive email design (#RED) [VID]

My 1hr video - plus 187 slides - on responsive email design. Besides an explanation of what responsive design is; I take a look at what’s possible, going through some of the responsive layout patterns we’ve deployed. I’ve also got a section on tablets, touch, performance and techniques for dealing with clients that don’t support media queries. I finish up by looking at testing…hope you find it useful. [...] [more]
stylecampaign.com    Design, Mobile

tactics Image optimization

Over the holidays I was at my local Starbucks sucking off their WIFI along with ~10 others. It’s funny how performance becomes your top priority under those circumstances; compared to my office WIFI it was like night and day. Retail emails especially choked, with their big images taking forever to load and some just hanging. Starbucks reminded me that users aren’t always checking email under ideal “office testing” conditions, and to look into new ways to reduce the file size of desktop images. To [...] [more]
stylecampaign.com    Mobile, Tool

 mobile Table: Responsive email support

Responsive emails = fluid grids, fluid media and media queries. The idea being where @media isn’t supported, you can fallback on a fluid layout. As fluid layouts pose issues on some desktop email clients, alternatively you can fallback to a fixed-width mobile template. I tested media queries in our device lab, I’ll update the chart as I add new clients. Here’s an image, if you want to keep a copy. [more]
stylecampaign.com    Design, Mobile

mobile CSS BG support in Android

We tried it on three of our Gingerbread devices - S2, Galaxy Note and Ace - and the same thing happened. So we did more testing and confirmed that CSS background images are not supported on Android Mail 2.3. Though background images are supported if defined in the HTML. This is important as you often use background images to swap content in responsive email designs. It’s how we first came across the problem ourselves, trying to adjust the header on this template a few months back. I’d forgotten about [...] [more]
stylecampaign.com    Design, Mobile
Page 1 | older