Thank God Its Responsive - The Top 10 Responsive Email Design Tips

Responsive design has taken over today’s email layouts so implement these top ten tips and prove to your users that you are a layout master!

It will render beautifully and look super sharp.

Many responsive email designs require some form of icon somewhere in the layout & since Retina Displays and

most other high density pixel devices scale fonts with far greater sharpness than an

image, all you need to do is to find the icon you want on

some Dingbats font somewhere and use it instead.

In the famous words of Steve Jobs “nobody wants a stylus” and that’s why today’s mobile screens

are designed for fingers and even (gasp!) thumbs.

Unfortunately most human digits are not capable of pixel accurate selections so you have no choice but to adhere to the Apple standard of minimum

44 px square for any link or button.

You can risk turning your well thought out layout into a dog’s breakfast if you use any smaller text as iOS will upscale it regardless of the fact that it won’t fit into your design.

It seems a paradox that while Apple’s Retina Displays are among the most pixel dense, highest

resolution screens in the industry, the iPhone limits any fonts displayed on it to a minimum of 13 points.

Limit the single column layouts to no more than about 500 px in width for the best display on mobile screens.

The extra added advantage to this width limitation is that if there is a display problem it will be less catastrophic than if you had a much wider layout of 800 px or more.

You don’t have to limit yourself into designing your responsive emails around a specific pixel range of

heights and widths when you can also design for the actual orientation of the screen as well as pixel ratios.

Note: You can go crazy and spend hours figuring each one out or you can select the

lowest common denominators and call it a day.

One of the biggest headaches with iOS is that special characters can be difficult to find but if you use input type=”email” on your email address

form the standard keyboard will give way to a special one that features the special characters you want most, including that all important @.

When you use display:none to hide the images that don’t fit on the screen you’re actually telling the

mobile device to download the image but not display it which is a total waste of bandwidth.

You’re far better off implementing one of the CSS or Java based image loading techniques which key the

display to where the user scrolls on the layout.

Even the most code-adept responsive web designers can’t possibly divine every feasible display and that’s

where great testing sites such as the one on quirktools.com/screenfly/ are absolutely indispensable.

All you need to do is to place your design onto any URL (even a non-public one) and see the

results on width only and device sizes as well.

Daan Jobsis is a designer who discovered a very weird effect during image compressions in Photoshop:

Take any image, resize it to 200%, compress it to 25% of the original quality, resize it back to 100% in the browser and the resulting image file size will be smaller and fully

optimized for high DPI displays because it retains its doubled pixel density. Strange, but handy!

Responsive email design continues to evolve and the brands riding the wave’s crest will be the ones obtaining the best metrics!