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! 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 is to find the icon you want on some Dingbats font somewhere and use it instead It will render beautifully and look super sharp 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 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 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 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 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! [...]... 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... 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...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... 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... 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! .. .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! Many responsive email designs require... 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! ... 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/