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

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!