Tag: css

Email Marketing

10 typographical effects to prettify your emails

5 minute read
Adrian Young Adrian Young

10 typographical effects to prettify your emails

Text needn’t be plain. Modern CSS can apply all manner of visual effects to text. That makes it possible to create some eye‑catching typography without resorting to using images.

Well, all of that is true in web design. Email on the other hand has inconsistent support for CSS from one application to another. But don’t worry – that’s nothing a bit of graceful degradation can’t handle.

1. Letter spacing

CSS property: letter-spacing

Kerning is typographical lingo for the gap between letters. Increasing the kerning is a neat way to bump up the visual impact of a text banner or heading.

Before:

After:

And the good news? It works everywhere.

2. Drop shadow

CSS property: text-shadow

A drop shadow can add a subtle illusion of depth. Unlike letter spacing, this CSS property isn’t so widely supported in email. But it works in Apple Mail on iPhones and Macs, and that alone makes it worthwhile. With no particular fallback considerations, text shadow is a perfectly viable design option.

3. Outline

CSS property: text-stroke / -webkit-text-stroke

An outline can accentuate a heading or call‑to‑action. Just like drop shadows, support is not universal. So consider it a progressive enhancement and don’t rely on it for contrast!

4. Pseudo 3D

CSS property: text-shadow (again, but fancier)

Masterful coders can wield CSS like a paintbrush. Code‑based reproduction of the Mona Lisa, anyone? To create something like this, you only need bucketloads of artistic talent, abstract thinking, coding prowess and mathematical aptitude!.

These works, incredible as they are, are the endeavors of hobbyists. But the point is that CSS can do a lot more than basic styling. You can combine effects with limitless potential for creativity.

For example: you can apply as many text shadows as you like. How about layering a few to create a 3D text effect?

5. Gradient fill

CSS properties: linear-gradient / background-clip / -webkit-background-clip

Colour gradients, a once‑beloved staple of web design, can be easily applied to a background in CSS. But with just one extra property, they can also be applied directly to text. Nice.

Beware if using this technique – some email clients will recognise the gradient, but not the clipping mask – thus leaving you with a coloured block and no text. These are essentially experimental techniques in email, so some degree of fallback content may be necessary.

6. Texture fill

CSS properties: background-image / background-clip / -webkit-background-clip

Gradients aren’t the only thing that can be applied as a text background. You can use an image. I guess you could call it a texture.

7. Web fonts

HTML element and CSS properties: <link> / font-family / @font-face

So far we’ve only looked at effects to be applied to existing text. But we’re missing a trick. A major part of typography is of course the choice of fonts.

Once upon a time, web designers were limited to a small pool of web‑safe fonts. Arial, Times New Roman and the like. The advent of web fonts meant that developers could remotely load any font under the sun onto the user’s computer… thus opening up a new world of typographical creativity.

Do web fonts work in email? The answer – as is so often the case with this medium – is sort of. Compatibility is all over the place. This article isn’t a how‑to on web fonts, so let’s note only the most important points regarding support. They work fully in Apple Mail, in an extremely limited form in Gmail, and not at all in Outlook.

Here’s a comparison of web fonts and their more prosaic fallbacks. When they work, they undoubtedly enhance an email. They also make it possible to produce designs that are more on‑brand. But the downside is that the fancier the web font, the bigger the fall! Perhaps one day all major email services will cater for them.

8. Rotation

CSS property: transform: rotate(#deg);

Text doesn’t always have to lie horizontally. A little bit of rotation can make a big visual impact.

9. Text scaling

CSS property: font-size: #vw

Huge text‑based headings can sometimes present a challenge on mobile. Multiple breakpoint‑triggered classes to resize the font can work, but it’s pretty clunky and requires some trial and error. If only there was a way to scale the text smoothly, as if in an image.

Well, there is. One of CSS’s many units of size is viewport width, or vw for short. That lets text scale relative to the screen size. It’s surprisingly well‑supported among mobile email clients.

Here’s an example, placed on a background image because, well, why not?

10. Animation

CSS properties: animation / @keyframes

CSS comes equipped with a couple of options for movement: transitions and keyframe animations. In the right hands, the latter can produce some richly complex animation. The results are far smoother than an animated GIF, and they’re not limited to that format’s paltry 256‑colour palette.

Here’s a very simple example with some skewed text. To see what can really be achieved, I recommend checking out the myriad examples on CodePen.

Note: this is a GIF-based recording of a CSS animation!

Is this really worth doing in email?

Maybe, maybe not. I’ve written in the past about the value of simple design for this somewhat fragile medium. But I’ve also written about all manner of experimental interactive content. Clearly those concepts are at odds.

But I believe there’s a time and place for both ends of the spectrum. There are accessibility and compatibility considerations for sure. Often an image with an alt tag will be the better choice than CSS text effects. But if you’re feeling adventurous and fancy producing an email that looks spectacular on the strongest email clients… then I reckon it’s an adventure worth having.

Email Design

Three experimental CSS effects to spice up your emails

2 minute read
Adrian Young Adrian Young

Three experimental CSS effects to spice up your emails

CSS is the technology that makes the web pretty. It’s also used in email, albeit in a more primitive and fragmented form. A lack of universal support for the more modern features of CSS means that email developers tend to stick to the basics.

And that’s a pity, because some fancy CSS effects could mean the difference between plain-old-email and something that truly stands out. Let’s break with convention and think outside the (in)box.

Fixed positioning

One of the primary roles of CSS is layout. On a web page, an element can be set to a fixed position. While the rest of the page scrolls, that particular element stays put. That can be handy for components of an interface in a web app, for example.

Fixed positioning doesn’t work properly in email, not even in the otherwise ever-reliable Apple Mail. But luckily the email industry is home to some bright sparks who love to push the boundaries of the medium. Email on Acid’s Halloween email features a clever workaround for fixed positioning, originally conceived by Mark Robbins.

Being able to place an element independent of scrolling opens up a host of creative options. Here’s an example we knocked together based on the same principle:

Parallax scrolling

Those who owned a Nintendo in the 90s will perhaps remember this term. Before home technology had the muscle to render true 3D graphics, programmers used a variety of clever tricks to create an illusion of depth.

One of these techniques was parallax scrolling. The concept is simple. Graphics are placed on separate layers. ‘Distant’ objects move slowly, while ‘nearer’ objects move quickly. It lends the feeling of a third dimension to an otherwise two‑dimensional environment.

That brings us to the the perspective attribute in CSS. A web page, or part of it, can be pulled into a third axis. The result is layering of content that exists in different planes, and thus scroll at their own pace. Hello illusion of depth:

3D objects

Let’s continue the theme of three dimensions. CSS isn’t only capable of layering items. It can rotate them in 3D space. That means, with a bit lot of effort, a developer can sculpt and manipulate 3D objects. Check out some examples in this YouTube video.

These are impressive feats for sure. But so too is constructing a replica of the Eiffel Tower using only matches and glue. Complex 3D in CSS is a labour of love, not something you’ll be knocking together for Tuesday’s marketing email. So let’s think about something that could realistically be implemented in an email. How about a greetings card? That’s two rectangles, pivoting around a fold.

By combining this idea with some interactive triggers (also courtesy of some experimental CSS), a subscriber could manipulate a customised greetings card:

Oh, and that laminated sheen on the cover is achieved by sliding a white gradient across the surface. Lovely!

Are these effects really useable?

Full disclosure: pushing the limits of CSS in email is going to present you with compatibility and accessibility problems. Not insurmountable ones, but ones that will take effort to overcome. You’ll need to think about fallback content and graceful degradation. You might even want to give people the option to specifically opt in or out of such mailings.

We reckon the payoff is worth the effort for visually‑driven, energetic brands. And, hey, not only do you spice up your email – you also play a role in evolving the medium of email.