What Is It? Responsive Design is an HTML layout (in this case, email; however, websites can be designed to be responsive too) that will adapt to whatever size/proportions to the device it is rendered on. To do this, it uses a secondary code called a Media Query (@Media). This code is a specific set of CSS styles that act like dynamic tags. The Media Queries detect the screen size of a device.
Should I Consider Using It? Responsive Design helps to make your emails more readable on different screen sizes. No enlarging or reducing, no scrolling, etc. And the less the subscriber has to modify your design, the more likely they are to interact with your email communications. The need to move towards responsive design is steadily increasing as today, 47 percent of all emails are opened on mobile devices! And 80 percent of all mobile users delete an email if it doesn't look right on their phone.
Here are some of the major factors why email marketers use Responsive Design:
Higher Read Rates
Better Click-thru Rates
Before you rush right out and hire a designer to create responsive emails for you, have you checked to see what types of devices your subscribers are using to view your emails? There are several mobile applications that don't yet support responsive design: iphone (Gmail, Mailbox and Yahoo Mail apps), Android (Gmail and Yahoo apps), Blackberry OS5, Windows Mobile 6.1, Windows Phone 7 & 8.
Also, Responsive Design can be a little tricky to create, and takes quite a bit of testing to get it 'just right.' Determine whether the majority of your audience utilizes responsive devices before rushing to use Responsive Design.
What Features Are Changed In The Layout? Here are some of the major items in an html layout that you should consider making responsive:
Content (change or hide)
If you don't want to go to all the trouble to make your html layout responsive to all screen sizes, you might consider an Adaptive Layout. This would consist of two different layouts: one for mobile, and one for desktops. A desktop version might contain two or three columns, and a mobile version might be just one column. Just keep in mind that adaptive/scalable designs may not display correctly on all devices and in all email clients.
No matter which way you go, keep one thing in mind for mobile devices: Keep it easy to navigate with a finger!
If you're delving into this for the first time, there are a few responsive email templates out there on the web, however, most that we found were not responsive on all devices in all email clients. Don't trust what you're downloading is responsive until you've tested it.
How Does AMS Support Responsive Design? Once you've created a responsive design email and want to send it through KM's email marketing platform, utilize the Plain HTML upload option for your content. Using the WYSIWYG editor will causes changes in the design and may alter the responsive elements, so please utilize the Plain HTML upload. If you come up with a great design, let us know and we'll showcase it on this page.
Want to try Responsive Design? Here's a sample of a Responsive Design email that our design staff created. Feel free to use it as a template for your own email program. Upload into KM's Email Marketing tool using the Plain HTML upload option to keep the HTML intact.