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!

2. 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!

4. 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.
It will render beautifully and look super sharp.

6. 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.

8. 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.
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.

10. 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.

12. 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.

14. 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 @.

16. 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.

18. 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.

22. 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!

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