Responsive email design is a mixture of mindset and mechanics. Creating emails which are equally accessible on any device means adapting both how they are conceived and how they are built.
Scalable and responsive design
First, a quick word about responsive and scalable email design. Scalable design essentially shrinks content designed for desktop viewing to a smaller screen size (the example on the left below). It’s the same content just smaller. This means readers will typically need to pinch and zoom in order to read and interact with the content. Responsive design (the example on the right) intelligently adapts content to optimally adapt to a mobile device. There are other aspects too but collapsing more complex and multiple column content to a single column is one of the most obvious results of responsive. Readers are then able to view and thumb-scroll the email content with ease.
Scalable design is not all bad. If you are coding HTML emails from first principles then scalability is relatively easy to incorporate – responsive design requires some more advanced HTML techniques. Scalable design is also generally applicable across all email clients – the lack of standards across different device manufacturers means responsive design rules are not universally applicable or may be interpreted in slightly different ways. However, responsive design presents considerably more options for mobile styling and ultimately it’s the only way to ensure an optimised user experience for the mobile user.
It’s worth taking the trouble. Our latest benchmark figures show that, at around 55%, email open rates have now overtaken desktop viewings and for many email consumers mobile is simply the default device choice.
Behind the scenes responsive design uses a couple of coding techniques.
The first is Media Queries. Media Queries automatically detect the screen size of a viewing device and then activate specific style rules based on the available screen area of that device. The style sheet is overwritten with the new instruction to ensure that the content is correctly displayed. Style sheets can be used to do things like adapt the layout and navigation logic, change (typically enlarge for mobile) font sizes, change colours, adapt images and control which other content is displayed.
Which leads to CSS. Cascading Style Sheets is a coding technique used for describing how a document written in a markup language (for example HTML) is presented. Think of it as a layering process which essentially separates coding of the document content from the way that content is presented. The result is that the same content can be presented in different ways for different rendering applications – on screen and print are common examples, but it also applies to different types of on screen device.
Fluid grids and fluid images are two other common responsive design techniques, often associated with web design. The principle of fluid design is page sizing is determined in percentages of a maximum width with any table or image content being proportionately scaled in relative units. For email, fluid design and Media Queries can be used together in order to adapt design styling for specific page sizing where proportional scaling might otherwise break down.
The good news is that you don’t really need to know any of this!
Just look for a responsive email template, or in the case of Sign-Up.to a ‘from the ground-up’ responsive email editor, and all of this is taken care of for you. Select a starting point from one of the sample layouts, then build out your structure using the various options in the ‘components’ library (check my last blog post for details). Any content which is subsequently added into these components will behave accordingly depending on the screen size of the recipient. In Sign-Up.to you can use the ‘preview’ option at any time to see how these rules are being applied.
In Sign-Up.to email automatically switch to ‘responsive’ mode when the screen size drops below the default screen width of 720 pixels (Sign-Up.to has a default width of 720 pixels with a single column content width of 680). Opinion varies as to the optimum width for an email. You’ll see anything from slim 320 to super wide 2000 pixels. 600 pixels is common, but with higher device resolutions (and of course effective responsive design) 720 pixels and wider are increasingly used to give more design options.
Below 720 pixels a number of things happen. Firstly the side margins are reduced. This allows the maximum amount of content to still be displayed as the screen size reduces.
Perhaps the most noticeable change is that multiple columns are collapsed into a single linear layout. Multiple columns in the same horizontal row are collapsed vertically in left to right order. This has important implications as to the context of your message, especially if you are a fan of alternating the left and right placement of text and images in 2 column desktop layout (by the way, there are custom ‘left’ and ‘right’ components which intelligently deal with this).
Another layout adaption is the setting of all components to full width (the component width is scaled to 100% of their container). This ensures that any small columns are always visible.
The final adaption is the automatic re-scaling of images. In some campaigns, images are scaled down when displayed on desktop. In responsive mode, we set the images back to their natural sizes (respecting the size of their container) to ensure that they’re visible on small screens.
Sign-Up.to doesn’t responsively scale font sizes. Mobile devices typically enlarge font sizes anyway so providing a reasonable size is being used for desktop then mobile viewing should be OK. For mobile viewing 16 pixels body text with 1.5 x line spacing, and 18-20 pixels for headings generally works well.
The result of all of this is that with no knowledge of Media Queries, CSS or other responsive programming techniques, and just a sprinkling of design consideration, it’s easy to create email campaigns that will always look good and be effective on a wide range of mobile devices.
I mentioned above that different email clients display HTML differently so after previewing the different device views in the Sign-Up.to editor we’d always recommend an additional in-box testing of any new campaign concepts.
Most of us don’t use a tablet or smart phone to design our email campaigns. Sat in front of one (or possibly two) desktop monitors it’s easy to get carried away with the design possibilities of a widescreen format. Although it’s true that Sign-Up.to takes care of the mechanics of responsive design we’d still recommend designing email campaigns from a ‘mobile first’ perspective, rather than as an after consideration. Here are a couple of things to think about.
It sounds obvious but mobile devices (especially smart phones) have a small viewing area, and email consumers (especially mobile audiences) have a short attention span. This has important implications for condensing the key elements of your message into the smallest, shortest format possible. Remove anything which isn’t contributing or is distracting from your main objective.
Call to action is another key design consideration for mobile. Make it easy to find with a large interaction area. A call to action button is generally better than a text link or an image – text links can be fiddly and images may not always be displayed.
Finally check your website too. Delivering the perfect mobile email but then directing readers through to a non-responsive website will break the continuity of your readers’ experience.
For more information on email design download our coffee break guide – ‘The Anatomy of an Email‘