We all know that Sir Tim Berners-Lee is the originator of today’s World Wide Web, but how many of us know who the founder of Responsive Web Design (RWD) actually is? The gentleman in question is Ethan Marcotte, and as RWD’s proud daddy his words of wisdom are well worth paying attention to by email marketers of every stripe.

Marcotte’s top ten tips on how to master his wild yet indispensable child include:

1. Calculate your formula. The foundation of every responsive email design is fluid or flexible and the formula to determine this factor is: target / context = result. The percentage derived from this formula can be applied to your stylesheets.
2. Evaluate critically. Take a good hard look at the content you’re including in your email and evaluate it critically. Width: how are you going to flex those elements to the varying widths? Hierarchy: Which modules are appearing and where are they? Density: What is the lowest (and highest) levels of detail you’re willing to display at any one point? Interaction: How are the elements of the email’s interface as perceived by the customer changing according to the resolution of the browser window (like when a horizontal image stack at 800 px gets squished into a vertical column at 480 px).
3. Simplify don’t suppress. You’re going to be far better off to simplify than suppress. So when you are down to a browser resolution where certain elements just don’t fit you shouldn’t take the easy way out and just hide them. Make a list of what is critical and what is not, and then be smart about your suppression or lack thereof.
4. Content over nav. When determining your suppression list, give priority to content over elements dealing with the navigation of your email template. Some designs even move the navigation elements right out of the main email body into the footer or header when the display size varies past a certain pre-determined point.
5. Percentages over pixels. Forget all the ol’ skool stuff about pixels and inches and start thinking in the direction of percentages only. Layouts in RWD are fully fluid so if you’re in the traditional mode of regarding a certain element as having to be such and such a size you’re endangering your entire email layout.
6. Redesign legacies. If you’re confronted with a legacy email design that you’re stuck with, you can scale it down with media queries which can help to adjust the layout itself but watch out as this is not always a foolproof solution and you may have to redesign from scratch (definitely preferable!)
7. Work up. Don’t design an email template with all the bells and whistles and then try to shoehorn those characteristics into less capable devices, as you should begin with the stripped down feature list of the smallest common mobile devices and then get into the larger ones as you go.
8. Content breakpoints. Similarly when you’re dealing with your design grids, you’re going to be facilitating both the work involved to craft the email template and the customer’s experience by designing the grids from the smallest element and working your way up from there. This policy facilitates your moving away from the breakpoints which are dictated by the mobile devices and instead concentrating on the breakpoints that are relevant to your content.
9. Don’t supersize.You never want to display a graphic element larger than its original size, so ensure that max-width 100% is always specified in your email templates and don’t just limit that to static graphics but any active media which really get messed up if you try to over magnify them.
10. Know thy viewports. You can’t even begin to design your RWD email template unless you are able to interpret the data of what kind of devices your subscribers are displaying your content on. You may want to deviate from the standard of desktop, tablet, smartphone to a finer granularity which takes into consideration the actual devices themselves.

Now get out there and RWD like the email champ you are!