Dirty CSS Hacks for Responsive Emails

New year, new web design and development techniques and strategies. Same. Boring. Email.

Let me elaborate; JavaScript, Flash, and forms don’t work in nearly all email clients, and HTML emails offer very little CSS support. Even media queries can be a no-no for older email clients (luckily not Gmail, phew!). These limitations can often leave web designers and developers feeling uninspired — left to work in the outdated constraints that are email.

Most interestingly, Vitaly outlined two mind-blowing techniques for enhancing your HTML emails by making them responsive — without using media queries! To give you some time to wrap your head around them, we’ve rounded up the techniques below.

The Fab Four

You’re probably already using some scrappy CSS tricks to force add responsivity-esque functionality to your HTML emails. You're also probably doing it using media queries. Do any of these sound familiar?

Enabling content stacking

Allowing column switching

Allow column switching by using table-header groups and table-footer groups to define the order of content in the email.

Ordering and reordering content

Order and reorder content by defining up to five elements and specifying what content comes first, which content should always be displayed at the bottom, etc.

All of these are fine and dandy, and are definitely a welcome addition to the monotony of regular old HTML email design. But, what if you want to take this “responsiveness” to the next level by ensuring everything is constrained proportionately in the mobile version of your email? And remember, we don’t want to use media queries (like in the above examples).

The simplest way

Well, first you’ll need to open your mind to the idea that what you’re about to read may not make total sense (at a glance).

And second, you’ll need to take out your trusty CSS toolkit and use the following four elements:

min-width

max-width

width

calc()

Let’s start at the beginning. Your current CSS might already look a little something like this:

However, there are two things you should know about the above values (and this is where things get a little weird):

If width value is greater than the max-width value, max-width wins

If min-width is greater than the width or max-width values, min-width wins

Put into practice, you can use this min-width-wins logic when building a two-column email layout. You can also take advantage of using percentages in width elements to take out some of the guess work when building your responsive HTML email.

Your CSS should look something like this:

To explain:

Min-width: 50%; will essentially propagate a two-column desktop version of the email.

Max-width: 100%; will essentially create a one-column mobile version of the email.

Width: calc((480px - 100%) * 480); will determine whether max-width or min-width wins. We subtract 100 per cent from 480px because it’s the width of the parent, and multiply by 480px because that is the breaking point of the layout. The goal of this calculation is to create a value higher than our max-width, or lower than our min-width, so that either of these properties is used instead of width.

Here’s a case where min-width wins:

And another where max-width wins:

As you can see, we’ve applied two entirely different behaviors to our HTML emails, due to the breakpoint established by our calc value. So, depending on how the end-user’s email client is scaled in their browser, or whether they’re viewing the email on their phone, the email will always scale responsively.

If you’re like me and need a visual representation of how this works, you can reference Rémi's CodePen below:

Never forget to clean HTML code and double check your content before publishing an article!

The fully-functional checkout experience

Now that you’ve worked your brain a little with the Fab Four Technique, lets move on to something a teensy bit more complicated.

You’ve probably heard of the checkbox hack before. Put simply, it involves using a checkbox input and label to control a secondary element (like a div). These elements will respond differently depending on whether or not a box is checked, like the tabs in the example below.

TL;DR Mark realized that when he had finished coding an email (using the checkbox hack) and marked all the radio buttons as display, what he was left with was a grid that looked very much like a punch card. Styled, it took on a completely different form.

I mean, how else would you create an interactive ThWack-a-Vole game in an email?

You can even use punch card coding to create a fully-functional checkout experience, right in a customer’s inbox.

Photo from Vitaly's presentation

According to Mark and Vitaly, this feat requires four checkboxes, 117 radio buttons, a bunch of image overlays, and includes:

A multi-page layout

The ability to add/remove products and edit quantity, color, and size

Live value calculations

The ability to select payment and delivery

Form validation

All done in CSS and HTML, using the above mentioned technique. No JavaScript required.

If you’re looking for a quick and simple way to add live value calculations to your email, try the following CSS (paired with the checkbox hack, of course):

Truly amazing stuff. If you want to learn more about punch card coding and how you can use it to create rockin’ emails, have a look at Mark’s presentation on CodePen (click the lower right-hand corner to change slides):

Thanks for subscribing

About the Author

When she isn’t trying to wrap her mind around the expansiveness of the universe, you can find Sara catching-up on the latest web design & UX news. Oh, and reality television. She likes that a lot, too.