Optimize Emails and Newsletters with Responsive Design
With the abundance of handheld devices, transitioning from a static email design to a mobile responsive design is important. Subscribers should not need to do any extra work to read your emails and get your message. Making the reader stretch, scroll or squint means more effort, and decreases response and interaction rates on subsequent mailings. Another consequence of a non-responsive design is that subscribers can push sidebars off the viewing area, mitigating the impact of embedded marketing messages and ads.
When considering a responsive email design, the correct layout approach must be considered depending on the content of the email. Traditional email designs tend to have fixed widths, having multiple columns of contents and are usually image heavy. With the right use of CSS media queries on tables and images, these designs can adapt and work seamlessly across multiple devices.
If your email template includes multiple columns, you would need to consider replacing them for a one column design. Although responsive design can be made used to make two or more columns adapt to mobile, it would require extra work because of how emails are processed on some popular email clients (specifically Outlook).
Another responsive layout design technique is to use a fluid format. This can be done by removing all fixed width requirements and making images no larger than 300px width.
With fluid format, your email adjusts to the screen size with little to no help from media queries. The format accommodates to fit wide screens, and narrow screens will push down images, text and titles, while keeping optimal view for different orientations. The best application of this format is for newsletters, alerts or single article commentaries.
Image Scaling and Positioning
For banner sized images (more than 650px), it is best to apply techniques using media queries to ensure that banner images scale accordingly to the device. This can be done by adding a 100% width on the image when the email is viewed on a smaller screen.
For rectangular images (width around 200px-300px with similar height), apply re-positioning techniques to move the image above the text by giving it a 100% width on mobile. This would ensure that text beside the image is not squished and the rectangle image’s proportions are retained.
Skyscraper images would have to work a bit differently. For best results, make sure that the image is wrapped in a table with an alignment left or right set (depending on where your image is) and resize the image by a certain proportion on mobile. This would make the text wrap around your image with enough space to read the text while keeping the image visible.
Font Scaling per Device
What might look readable on a desktop email client would not mean it is readable on mobile. It is best practice for responsive designs to make fonts on mobile larger than desktop. Your email would be better received by your subscribers if they can read it without pinching or zooming.
With the correct application of proper responsive design, subscribers would be more likely to read and be engaged in your content. This would result in higher interaction and better value for them and your brand.