Austin Caldwell was a Bronto power user for five years before transitioning to the Bronto Professional Services team. He brings extensive knowledge in email, paid search, SEO, affiliate, social media, marketplace and display advertising from his management of online marketing channels for two IR 500 companies. At Bronto, Austin spearheads the Managed Services team, which handles ongoing marketing campaigns, custom integrations and special engineering projects for Bronto clients. In 2013, he received the Retail TouchPoints Channel Innovation Award for successful email, social and mobile synergy. He was previously the Marketing Director at Heels.com and Interactive Marketing Manager at eCampus.com.
During the holidays last year, over 66% of emails were opened on a smartphone or tablet (58% Apple and 8% Android). This comes as no surprise to email marketers who have been living in a mobile first world for some time. They know that in order to deliver the right message at the right time, they must also design that message for delivery in the right format.
These days, the best way to ensure optimal email experience is to incorporate responsive design. Creating responsive emails can seem overwhelming—designers have to consider multiple operating systems, browsers, screen sizes, devices and email clients. Since there are no consistent content rendering standards, this exercise ultimately results in finding the lowest common denominator coding that works across all platforms.
Today, I want to highlight some developer best practices to help you and your team avoid common pitfalls and design a successful responsive template.
When crafting a responsive template, email designers should approach the mobile layout first. Start simply with a one-column layout and work your way up to a more complex two or four-column desktop design. It’s much easier to add content than remove it. Embrace the white space to distinguish content sections; you can use padding or borders to achieve this differentiation. This welcome message from Incoco does an excellent job stacking a two-column desktop layout into a one-column mobile layout.
Responsive CSS media queries take advantage of fixed browser window widths; they differentiate desktop and mobile layout behavior. Until the latest generation of iPhone 6 smartphones, the most popular iPhone and Android models used the gold standard 640 pixel desktop, 320 pixel mobile responsive layout.