The use of smartphones to access emails is souring. According to a recent survey carried out by Return Path between 2010 and 2012 the use of mobiles to access emails has increased by 300%, and now nearly half of all emails received are read on mobile devices. According to Google 62% of smartphone users that use the internet on their phone use it to access their email; this accounts for more than those that use their mobiles for social networking or search engines (source: Google: Our Mobile Planet).
With these sorts of statistics you can see why optimising emails for mobile devices is crucial for email marketing. In this article I will take you through some of the aspects we consider when we produce email campaigns for both desktop and mobile; we call this responsive email design.
Email for mobile and desktop
When putting together an email you have to consider how it is going to appear on both the desktop and the mobile, how it is going to render across different email clients, and which elements and call-to-actions you wish to capture the audience. If an email does not display correctly 69.7% will delete it immediately. (Source: BlueHornet ‘Consumer Views of Email Marketing’ (2012))
Below is an example of one of our responsive emails for the London Review of Books. It shows how the email appears on the desktop in comparison to the iPhone. When designing for the smaller screen it is best practice to eliminate horizontal scrolling. We develop the email to rearrange different elements into an easy to scroll format, in addition we are able to change the text size and spacing so that it is easier to read on smaller screens.
There are also other things we need to take into consideration, such as the size of the call-to-action buttons and linked text. It is very difficult to select small buttons and links with your fingers accurately when compared to using a cursor, therefore we ensure the spacing and positioning of elements are ideal for both desktop and mobile.
Hiding Items / Navigation
We are also able to remove elements from the mobile version that may make it too cluttered and/or force the user to scroll unnecessarily and consequently distracting your audience from the main call to action. In the example above we remove the ribbon pattern in the mobile version to keep the size and quality of the logo. In the example below we remove the navigation and change the layout of the headline to remove any need to scroll horizontally.
Another new development in technology is retina display. If your email is not designed with retina display in mind, your customers with the iPhone 4S, iPhone 5 and any future Apple devices will see your images displayed at a low resolution. We take this in mind and code in higher resolution images that appear crystal clear on your retina device.
When compared to other forms of digital marketing email is more lucrative. Email outperforms social-media advertising three to one, according to the Direct Marketing Association (source: Business Week Article), and with mobile use growing at its current rate marketers should not ignore the potential for responsive email campaigns.
People receive their email in a wide variety of ways. Some through desktop email applications such as Outlook, some through their browsers on websites such as Gmail and Hotmail, and more and more often through their phones and tablet devices. That is why when we design and code emails it is important to ensure that they work and format correctly across a wide selection of email clients.
Previously that meant having a huge number of email accounts, desktop applications and a selection of devices, and spending a lot of time. Not anymore! Thanks to Litmus we can test our emails across a wide range of email clients with a few clicks. Litmus allows you to preview what your email will look like in all the major (and minor) browsers, websites and devices.
Each email client renders HTML emails differently, so with Litmus we can quickly see any differences and adjust the code accordingly. Therefore we can assure our clients that their email will display correctly across all the major email clients and a wide range of devices.
It used to be the case that the internet was pretty dull when it came to typography. System fonts such as Arial, Times New Roman, Verdana and Comic Sans (for those with a bad sense of humour) being commonplace, but not anymore! Web typography has come leaps and bounds in recent years, mainly because of the development of new browsers, new standards in CSS and standardised font file formats.
A number of foundries old and new have begun to provide web fonts in a variety of formats at a cost, but a few have also started to provide open source typefaces.
Google Web Fonts has a selection of hundreds of fonts stored on its servers which can be added to a website using its API, these fonts even function on earlier browsers such as IE6.
Font Squirrel is another service which offers a wide selection of free fonts for commercial use which can be embedded onto a website in a number of different formats.
With the introduction of CSS3 and cross browser standards, type can also be formatted in a number of different ways (kerning, leading, weight etc). This is beneficial for designers as it gives you a lot more options to play around with, it is also beneficial for search engine optimisation, because previously copy with a nice typeface would have needed to be converted to an image.
Typography is an important aspect in web and graphic design, and at By The Scruff we have also started to incorporate these new web fonts into our designs, for a recent example check out: http://myarchitect.net/
Check out these links for more interesting online typography:
My name is Andy and I am the newest recruit to the By The Scruff team. I have been working for By The Scruff for three months now and despite being the worst player of table football in the studio, I have thoroughly enjoyed my time here so far.
A very short bit about me: My background is in graphic and communications design with a special fondness for digital, interactive and web design. My passions apart from design include electronic music, art and good beer. I dislike smelly cheese!
In the time that I have worked for By The Scruff I have been involved in a variety of projects, mainly website design, email design and creating flash banners. In addition to these, I have been part of the creative process in developing ideas and concepts for a number of brands.
One of the most recent projects I worked on was creating a Christmas flash banner campaign for Classic FM Magazine. This consisted of creating a flash banner promoting the magazine’s free CD offer over the Christmas period. It was important to maintain a good quality design with a small file size. See one of the results below.
I have also recently worked on a range of digital promotions / E-marketing and HTML email campaigns. These included another flash banner for SHL promoting their new iPQ career planner iPhone app, a digital invitation (or eInvite) for The WhatCar? Car of the year 2011 Awards, a marketing email for Optimax, and a Christmas eCard for The Wimbledon School of English sent through our email marketing platform (BTS Mail). See below for some examples from these projects.
I look forward to working on future projects with our current and any future clients.
Designer and new proud member of By The Scruff