Koogle d*EPiC SWYNme BITLYme EmailMarketingTipps

Articles

(Viewing source=stylecampaign.com)

tactics Small text and accessibility in email

While researching accessible emails I broke out all the WCAG 2.1 guidelines relating to typography. One priority was to track down any font size recommendations, in particular a minimum font size given that 11?px is standard for pre-header text. A reasonable minimum is important to ensure that fewer people need to zoom in to read content, or adjust their settings. Firstly though I wanted to get a feel for how much, and what type of email content falls into the category of small text. [...] [more]
stylecampaign.com    Design

tactics Grid systems for email

Modular design systems have been prevalent in the email industry for a long time. They’re made up of a series of reusable modules that can be combined in various configurations. Basically no one wants to build endless one-offs and this streamlines the email creation process. Whilst 10?–?20 modules is fairly typical the largest we designed recently had 37. These systems can run quite large and involve a lot of information that needs to be organized in a consistent way. One change to my process that [...] [more]
stylecampaign.com    Design

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
Page 1 | older