Responsive email design
What is responsive email?
Responsive design is a set of techniques in web design and development used to adapt a website to be readable on any screen and/or platform on which it's displayed. These techniques are being repurposed for emails. A responsive layout uses a piece of CSS3 code called a media query to detect the pixel size of the screen on which that email is opened. Based on the screen size detected, multiple stylesheets may be triggered to alter the layout and best respond to a particular screen size. Efficiently implemented, a responsive message allows a single set of content of be presented in the most usable format for the screen upon which the message is viewed. In email, we generalize this to include two states: large screens (desktop) and small screens (mobile).
How wide should I make emails?
Emails are opened on a variety of devices, so they will need to be easily read on many screens. We approach it this way: if designing for a larger tablet or desktop initially, we chose one breakpoint, around 480px (this is the general size of an iPhone turned sideways), where we note that devices this size or smaller are likely mobile. As a general guideline, keep the initial layout around 500-600px to design a format that works well on all screens, and then modifications can be made further with responsive techniques if a screen size of 480px or smaller is detected.
Where are media queries supported?
Responsive email is supported on many devices, but not all. Approximately 98.5% of opens on a mobile device occur in environments that support media queries. If the responsive code is not supported, a subscriber will see the standard (desktop) view of the email.
Will email click-through rates increase?
It depends. Using responsive techniques is a long term investment in the user experience. Little information has been publicly released regarding metric improvements based on implementing a responsive email solution, but we are starting to see great results. Our customers are starting to share that they have seen minor to significant increases in clicks following the introduction of a responsive email solution.
What about Android devices?
Android's operating system marketshare is actually larger than Apple's, but Android devices block images by default, so you'll likely see higher open rates for iPhone. Use design tactics similar to Outlook best practices to optimize for image blocking and the preview pane / viewport on Android devices.
Feel free to contact us using our contact form.
Posted on 2013 Apr 17 by dlstudio