Responsive Newsletters
Where details can make a difference
In my goal to make every newsletter up to today’s standards, I created a lot of responsive newsletters for various clients. All tested in over 15 different e-mail clients, both web (i.e. gmail, yahoo, outlook.com), mobile (i.e. iphone, android, Windows phone) and desktop (i.e. Outlook ’07 ’10 ’13, mail). Using Litmus, a robust email testing tool, as my brother in arms.
The fun thing about building newsletters is the challenge in making it look good on all devices and e-mail clients, and pushing the boundaries where you can. This means creating tons of fallbacks for old email clients relying on old-school code, while using new techniques for modern devices.
Some examples for optimising your newsletter
Gif animation on modern devices
Creating that wow effect
A lot of email clients don’t support many techniques. But popular modern devices actually do. This gives you a opportunity to be creative and create an email experience which most people aren’t used to. a simple GIF or a interactive email can make you look cool in the inbox. Just make sure to create fallbacks
Good: A fluid email deisgn which scales proportionally with the preview pane
Wrong: Snaps to a small version after a certain point
Wrong: Doesn't respond until really small screen size
Don’t underestimate the preview pane
A lot of newsletters I receive look weird in the preview pane. All thought I view almost all my incoming mail in that window, and I’m not the only one. It’s because these newsletters get optimised for either big viewports or really small (like mobile devices). That’s why I always try to make a newsletter fluid, so it will look good on every device or screen size.