News flash - the desk is not the only place where your audience will view emails. You only have to look at this infograph below from Return Path to appreciate the rise of daily email use on mobiles. To view more interesting mobile stats click here.
Whether you’re a working professional, a full-time parent or a nomadic traveller, the most accessible way to access our emails when we’re on the run is via portable devices. If you’re not considering your mobile users when creating your email campaigns, then user experience will be compromised. Let’s be honest, how many times have you abandoned a page that’s not optimised for your device?
So how can you get your email campaign looking good on all devices?
Check out our introduction to key trends in mobile EDM design as well as some tips from the experts:
- Mobile first
- Multiple designs for devices using media queries and responsive
- Expert tips
A ‘mobile first’ approach is where it’s at. In simple terms, this means considering the user experience for mobiles as the top priority. The difference between viewing a desktop design and a mobile first design on your mobile is demonstrated in the example below.
If your email looks like the one on the left then consider mobile first for your next campaign. Of course, we do encourage you to look at your email open rates and stats first to determine how many users are actively viewing your email marketing on a mobile device.
One way to approach designing ‘mobile first’ is to start with one or two columns then simply scale up. The Butterfly quarterly email newsletter was designed using this technique; the mobile layout was established first and then all components were scaled up to fit the desktop resolution.
Multiple designs for devices using media queries and responsive
Getting the experience right on mobile doesn’t mean compromising tablet and desktop users. If anything, all users will have an enhanced experience by taking this approach. Mobile first typically results in a one column design however you don’t have to be restricted to one column across all devices, CSS media queries allow you to write rules that will display different styles for different screen sizes! Media queries do not detect specific mobile devices; rather they determine the screen size in pixels.
The latest digital obsession is responsive design.
Creating an email template using responsive techniques will ensure that your email template displays nicely no matter what device the user is viewing it on. While not as advanced as website responsive design (due to the lack of support on older email clients) there are still some things that can be considered to allow your emails to adapt to multiple resolutions.
- Mobile devices will generally show 1 column layouts so it’s a good idea to keep it simple
- The aspect ratio of images must be the same across breakpoints (simple example: if an image starts out portrait, it can’t then change to be landscape)
- There are some touch limitations to think about
- This approach works well if you design with ‘mobile first’ in mind
Below is a great example of a responsive email campaign from Design modo
Getting it right on mobile
A good place to start is by sending your email newsletter or campaign to yourself on your mobile for review, and consider:
- Legibility: do you have to pinch and zoom to read your content on mobile?
- Button tactility: can you accurately touch the buttons or links?
- Text on images: do any of your images have text that cannot be read?
- Template defects: does your template break from its intended layout?
Think of your mobile content as an introduction to your site or business, this will help keep you on track when it comes to pitching your organisation. Start at the top with your headline - less is always more to maximise the use of space. Don’t feel like you have to fit the whole story in, ‘read more’ buttons and ‘find out more’ calls-to-action play an important role. Entice with engaging imagery that creates a strong connection to the topic and get creative with a headline ‘hook’ to encourage users to keep reading.
When designing your email campaign just keep it simple. Legibility is the key. Embrace the opportunity to make a headline stand out using interesting typography and play with contrasting colours that lift the words off the screen. Always check that your paragraph spacing isn’t too tight, unless your aim is to give your audience a headache! Don’t go slack on the details. A lack of hyperlink styling is the pits: please, don’t leave your links in the default bright blue, try a button or style your link with a colour from your branding palette. It’s the attention to detail that will make your design sing.
Keep the fingertips happy by sticking to the recommended size guide, which is approximately 44px high by 44px wide for buttons. If you’re not sure whether the sizing is correct then you’re in luck because there’s a few ways you can check:
- Ask your developer/designer to confirm the dimensions
- Open your email in Google Chrome, right click on the button and look at the dimensions through ‘Inspect Element’
- Use rulers in Photoshop or Paint to check the dimensions
- For the perfectionists, we wouldn’t “rule-out” printing it out and measuring the dimensions by hand
For text legibility a white background is fail safe because it is easy on the eye. At the end of the day, the objective of email marketing is to promote content and key messages; white space is always your friend.
I’m sure after reading this article you now feel inspired to review your email marketing and look at ways that you can improve the experience for your mobile users. If you have any questions or enquiries about email marketing for mobile please feel free to drop us a line and we’ll be sure to get in touch.