Our latest benchmark figures show that, at around 55%, mobile email open rates have now overtaken desktop viewings and for many email consumers mobile is simply the default device choice. Failure to address the mobile needs of your email audience is now simply a failure to address the email needs of your audience.
The solution is responsive design, but 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
Scalable design essentially shrinks content designed for desktop viewing to a smaller screen size. This means readers will typically need to pinch and zoom in order to read and interact with the content. Responsive design intelligently adapts content to optimally adapt to a mobile device. There are other aspects too but collapsing multiple column content to a single column is one of the most obvious results of responsive design. Readers are then able to view and thumb-scroll the email content with ease.
If you are coding HTML emails from first principles then scalability is relatively easy to incorporate – responsive design requires some more advanced HTML techniques. 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.
The mechanics
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 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 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.
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 more modern email systems, a ‘from the ground-up’ responsive email editor, and all of this is taken care of for you. In a responsive email editor you simply select a starting point from one of the sample layouts, then build out your structure using the various options in the ‘components’ library. This creates the structure of your layout. Any content which is subsequently added into these components will behave accordingly depending on the screen size of the recipient. Look for a preview option so you can see at any time to see how these rules are being applied.
Opinion varies as to the optimum width for an email. 600 pixels is common, but with higher device resolutions 720 pixels and wider are increasingly used to give more design options.
So assuming 720px as the desktop to mobile threshold, below 720 pixels a number of things typically 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 especially if you are a fan of alternating the left and right placement of text and images in 2 column desktop layout – look for specialised ‘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, images can be set back to their natural sizes (respecting the size of their container) to ensure that they’re visible on small screens.
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 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.
The mindset
Most of us don’t use a tablet or smartphone 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 a responsive email editor will take 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.
By Tony Kent, marketing manager at Sign-Up.to
You can find Tony's presentation on this subject in the Social, Video & Mobile Theatre at 3pm at Integrated Live on 16 November, but you'll have to register for your free ticket first:
PrivSec Conferences will bring together leading speakers and experts from privacy and security to deliver compelling content via solo presentations, panel discussions, debates, roundtables and workshops.
For more information on upcoming events, visit the website.
comments powered by Disqus