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!
- Don’t icon, font it. Many responsive email designs require some form of icon somewhere in the layout and 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.
- Fingers not styluses. 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.
- Mind the font gap. 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.
- Keep it narrow. 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.
- Focus your media queries. 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.
- Input type your forms. 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 @.
- None display:none. 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.
- Test everything all the time. 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 mattkersley.com 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.
- The Jobsis Phenomenon. 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!