From something that was just a glimmer on the horizon just a few years ago, mobile email design has become the de facto standard in the creation of any marketing email template. The entire paradigm of designing for your mobile customers has been effectively turned on its head as we all move towards a mobile ecosystem which is device agnostic and seamlessly fluid. Responsive Web Design (RWD) is at the heart of this revolution but when it comes to email design, the transition to this new standard has not been as smooth as for webpage design. Email designers are handcuffed by a combination of lack of standards and Jurassic email client technology, but there is still no excuse to keep from taking the RWD plunge. Apply these top seven techniques to make your RWD rock!

    1. Contrast is your best friend. Given the fact that most of your mobile customers literally live on their devices, the tricks and tactics used to maximize battery life such as automatic screen dimming can play havoc with any layout which is not designed for extra high contrast. Ensure that your design features huge gamma range between text and background and always opt for the dark text on light background rather than the other way around.
    2. Avoid zoom-reliant legibility. Sure, all the major smartphone and tablet interfaces facilitate zooming into a particular area of any layout but if you’re relying on that aspect to make your designs legible, you’re missing the point of zooming altogether. Don’t use tiny font sizes which can’t be read unless the display is magnified to 3x and create a layout where your user zooms into visual items of interest because they want to, not onto text because they have to.
    3. Multicolumn is a historical relic. Consider the optimal layout for your mobile device displays to be that of a conventional book rather than a magazine. When you rely on a single column design you can assure that when the user zooms into your content none of it will be lost outside of the viewport area.
    4. Accommodate fat fingers. We are all well aware that Apple’s iOS human interface guidelines specify that the minimum area which can be readily tapped by the human finger is 44 pixels square. What we may not realize is that there are many people who find that uncomfortably small, especially if they have thick fingers or long fingernails. Going with approximately 60 pixels square can help those users efficiently navigate your layouts.
    5. The fold is the rule. As screen real estate has gotten smaller and smaller, the necessity to place your important content such as your Call To Action above the fold has become absolutely imperative. Analyze every single element in your layout and rank it according to priority. The elements which score the highest must be placed right at the very top of the layout, otherwise they may never be scrolled down to and seen! Line forms to the left – While you’re placing priority elements at the top, you may want to scoot them over to the left as well. In the Western world we read from left to right, therefore the items which are furthest to the left will tend to be read to a greater extent by our short attention span readers than the ones on the far right. This factor is especially critical when it comes to operating systems such as Android which stubbornly resist scaling content to fit the screen in many cases and therefore will only display the left side of an overly wide email.
    6. Don’t try to recreate the wheel. Accept the fact that many email clients will disregard any section style declarations, your CSS must be set up inline, and that your layouts must be arranged with tables due to the archaic nature of the HTML rendering engines. You’re going to be better off living with the rules than breaking them… while breaking your layouts.

RWD is here to stay… or at least until such time as we all have Google Glass-like implants into our corneas!