Responsive emails which smoothly resize according to the display specifications of the device are absolutely obligatory to all email marketers, so show the world that you’re a top expert by applying all seven of these tricks of the trade.

1. Go fonty with your icons – Icons sometimes lose sharpness depending on what display and scale they’re being viewed on. The Retina displays are one of the most common problem-causers as what looks just tidy and neat on a conventional computer display screen can end up looking pixilated and ragged on a Retina. The solution when it comes to icons is simple and easy to implement. Retina displays will scale fonts with maximum sharpness so instead of using a graphic for an icon go find a symbol font that has the icon you want to use and apply that. High resolution displays will render fonts with much higher accuracy than any other graphic, so no matter how large or small the icon will be on various displays it will always look great.

2. Only for 13 and up – Retina or no Retina, you can run into a really messy problem with iOS devices if you use text smaller than 13 points. The iPhone limits the point size to that level for its fonts so if you’re going much smaller you’re going to have to face the prospect that breaking that limit runs the chance of breaking your layout as well.

3. Get a special keyboard – Not only does iOS limit the smallest size of your fonts, but it also is a complete pain when it comes to special characters which often seem impossible to find. All you have to do is to use input type=”email” on your email addy form and that extremely restrictive standard Apple on screen keyboard will magically morph into a keyboard that has the special characters you really want, including that critical @.

4. Don’t download non-displaying images – Many online marketers are not aware that when you use display:none to hide the graphics which aren’t squeezing onto the screen what you’re actually doing is ordering the mobile device to download the image and then not show it. That’s a complete waste of bandwidth and is going to make your email display even more slowly than it should. You’re far better off to dig up one of the Java or CSS image load techniques which display images keyed to where the user is viewing the layout.

5. Shun the dreaded horizontal scroll bar – There are so many differing widths in mobile screens that you might be tempted to opt for the tablet crowd and make your layouts much wider than they should be for optimal viewing on the majority of mobiles… which means smartphones. No matter how tempted you may be, there is never a justification to exceed about 500 pixels in width as otherwise you’re just begging for an inordinate number of your customers to have to face the dreaded horizontal scroll bar.

6. Jobsis does the job – The Jobsis effect is known by the surname of its discoverer, and it’s one that you need to be aware of in all of your responsive email design graphics creation. It sounds very weird but it really does work so bear with me: Take any image you want to place into a responsive email; resize it in Photoshop to 200%; compress it to just 25% of the original’s quality; now resize it back to 100%. What will that accomplish? It will result in an image that is fully optimized for high resolution displays as for some strange reason it retains its 200% pixel density, but the file size is much smaller. Yes, there is a scientific basis for all this, but it takes a few thousand pages to explain it all so we’ll pass.

7. Test, test, test – You have to test your responsive email layout on as many devices and emulators as you can find. Quirktools is one of the best around, but find them and use them all!

It’s not trickery, it’s wondrous to create great responsive emails!