A GUIDE TO MOBILE EMAIL UNDERSTANDING THE WHAT, HOW & WHY
TABLE OF CONTENTS EMAILS OPENED ON MOBILE? 1 Email open market share 2011-2013 WHAT DOES THIS MEAN? 2 FIRST THINGS FIRST 2 From and Subject Lines Pre Header Text DECIDING ON AN EMAIL DESIGN APPROACH? 4 1. Mobile Aware/Scalable/Mobile First 2. Fluid Design 3. Responsive/Adaptive MEDIA QUERY SUPPORT 7 A RECAP ON THE DESIGN APPROACHES 8 WHICH APPROACH IS RIGHT FOR YOU? 9 How mobile friendly is your current email design? THE VERDICT 10 Best case scenario IN THE MEANTIME 10 Mobile Email Design Principles
EMAILS OPENED ON MOBILE? If you send email newsletters, it s likely that a growing percentage of your subscribers are reading your messages on an iphone, tablet or similar. The explosive growth of mobile email opens is really astonishing. According to email market share statistics while mobile opens are holding steady around 43% in Q1 this year, two years ago (in Q1 of 2011), mobile opens were just a blip at barely 10%. That s an incredible 330% change over two years! And that massive growth had to come from somewhere: desktop clients have seen a 44% decrease and webmail share has shrunk about 22%. (Litmus, April 2013) EMAIL OPEN MARKET SHARE 2011-2013 According to recent email analytic statistics conducted by Litmus, the mobile open rate was at 43%. This means that both business and consumer audiences are reading more email on their phones and tablets and using their fingers and thumbs to navigate. Mobile 43% Webmail 25% Desktop 32% Email Opens: March 2013 Mobile: Smartphones (iphone, Android) and tablets Desktop: Installed email programs (Outlook, Apple Mail) Webmail: Email accessed through a web browser (Gmail, Hotmail, Yahoo) 1
WHAT DOES THIS MEAN? So what does this explosive growth of mobile mean for your email designs? What this means for designers is that getting your email newsletter to display optimally on mobile devices is just as important as ensuring it can be read in long-standing email clients like Outlook and Gmail. In this guide, we ll look at ways you can improve the mobile email experience and cover design considerations when planning your newsletter. FIRST THINGS FIRST We live in a society where first impressions count...and this theory applies too when considering email. There was a recent survey done on consumer views on email marketing and the question asked was If you get a mobile email that doesn t look good, what do you do?. Almost 70% of consumers surveyed said they would delete it. Therefore it s clear that the user experience matters. Mobile users are interacting on a touch screen, on a small screen and more than likely don t have your full attention. Whatever we can do to create a better user experience for these consumers is going to positively effect their perception of your brand, increase the usability of your email and create an overall more fulfilling experience. From and Subject Lines From Name The first thing clients will come across is your From name. This is undoubtedly one of the most important aspects to consider when planning your email. You only have about 25 Characters on the iphone for this From name to display. Make sure it is familiar, recognisable and clear. Subject line On most phones an email Subject Line will only display the first 35 characters. Therefore you need to make this clear, concise and to the point if you want to help get your email opened. Pre Header This is the first bit of text in the top of your email which gets pulled out and then displayed in your mobile inbox preview pane. It is becoming more common to try and customise what appears here by placing your call to action or most important text at the top of the email. 2
Pre Header Text An example of how pre header text can help the mobile user experience is shown below. If you employ the steps above, you will be giving your email campaign the best possible start in getting your client s attention and getting your email opened. TIPS ON THE SENDER Choose a regular From Address and From Name to use for your emails; this will usually be your name and/or your organisation s name. This will ensure that these details become familiar to readers so they easily identify the emails relevance and ideally will add you to their address book. TIPS ON SUBJECT LINE Ensure the subject line accurately communicates to the recipient what the email is about whilst also providing an incentive where possible to open the email and read more. Ensure the subject line does not create friction and anxiety for the reader that might ultimately discourage the recipient from opening the email. 3
DECIDING ON AN EMAIL DESIGN APPROACH? There are several design methods which could be used when trying to make your emails more mobile friendly. However there is no one best method and it is something that may also need to be revaluated over time depending on time, resources and knowledge of the process. 1. Mobile Aware/Scalable/Mobile First This is the first step in mobile email design and probably the best place to start. There is no additional coding required in this process, no multiple versions, but is simply an email that has been intended to render well on a mobile first and then it will also look good on all other devices. When taking a Mobile Aware approach things to consider are: Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. They re easier to read, and if they fall apart, they ll do so more gracefully. Links and buttons should be large and have a minimum target area of 44 44 pixels. thing is more unusable than clouds of tiny links on touchscreen devices. The minimum font size displayed on iphones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behaviour in your style sheet (do so with care). More than ever, keep your message concise, and place all important design elements in the upper portion of the email, if possible. Scrolling for miles is much harder on a touchscreen than with a mouse. 4
2. Fluid Design A Fluid design email is one that is always viewed at 100% width on whatever device it is seen on. When taking a Fluid approach things to consider are: Technically it s fairly simple to set up. All the containers and tables need to be set with a percentage width. Works well with simple designs that are mostly text based and use limited imagery. Complex designs with lots of imagery and multi column layouts will not work as well with a fluid design as it s harder to control how the layout renders on smaller devices. You loose some of the control when it comes to design with this approach however it offers some of the most flexibility in adapting to the device it s viewed on. This type of design can work well with automated email campaigns where the content is streamed in from a data source. With automated campaigns you need the design to be flexible to allow for possible changes in content amount and therefore having the design adapt accordingly. 5
3. Responsive/Adaptive Responsive email designs use CSS and media queries to render two different layouts depending on the size of the screen the email is opened on. CSS media queries can auto-adjust the layout, content and text size of an email depending on the screen size of the device it is being read on. In addition, images can be swapped out or completely disabled, images & buttons can be resized, and colors can be changed. While responsive design requires two designs and extensive coding, they are they only truly mobile first strategy; however, not all mobile environments support media queries. When taking a Responsive approach things to consider are: Allows for the greatest flexibility when viewing emails on mobile. Detailed planning needs to be given to the creation of the desktop design incorporating flexible grid based layouts, flexible imagery and content which can then be altered easily in the mobile state. In effect, you need to consider two completely separate designs when creating a responsive email. Requires extensive and complex coding. Media Queries are similar to conditional statements that enable alternate states in your email. t all environments support media queries. A TIP ON PLANNING THE EMAIL DESIGN Once you have an email design figured out, believe it or not, we suggest going back to pen and paper to do some quick sketches of how the framework could be created. Sketch out the newsletter, dicing up the design into simple rows and columns. This short exercise could save you a lot of valuable time when it comes to coding up the template, because you know where each design element would live within the table structure. 6
Media Query Support When using media queries in your design it s important to consider that to date, there are no mobile email standards and compatibility varies across devices. You should therefore plan for an images off environment, use the preheader/snippet text to your advantage and remember that clear concise content is key. Here is a chart showing compatibility across some of the most popular mobile devices: DEVICE iphone ipad ipod Touch Android 2.1 Eclair native client Android 2.2 Froyo native client Android 2.3 Gingerbread native client Android 4.0 Ice Creme Sandwich native client Android 4.1 Jelly bean native client Android Outlook Exchange via native client Android Gmail app ios Gmail app Yahoo Mail 1.4.6 & 2.0 Android app Microsoft Surface tablet (Hotmail) Windows Mobile 6.1 Windows Phone 7 Windows Phone 7.5 (Mango) BlackBerry OS 5 BlackBerry OS 7 BlackBerry Z10 Palm webos 4.5 COMPATIBLE 7
A RECAP ON THE DESIGN APPROACHES With all the possible design approaches for mobile email, lets take a quick recap on your options and what s involved. Mobile Aware / Scalable Key Points Best For t For Skills Needed One Layout Single column 320px - 500px Large text and buttons Generous white space Clear calls to action Short, concise body copy ü When you re ready for a change ü Don t have high resources Fluid û A complete mobile responsive solution additional coding required Standard email editing skills within a WYSIWYG editor Key Points Best For t For Skills Needed Use percentages for widths Adapts to fill the screen it s viewed on; text wraps automatically Most effective for simple layouts ü Emails with lots of texts and just a few images ü Automated campaigns ü Emails that need moderate flexibility with layout and mobile rendering û Complex designs û Emails that require a lot of design control Responsive / Adaptive Some HTML coding required to adjust table widths within the design Key Points Best For t For Skills Needed Requires detailed planning Uses CSS and media queries Detects screen size and enables alternate states accordingly ü Emails that require the greatest flexibility when viewing on mobile ü Heavy mobile audience ü Travel alerts, mobile apps, tech companies û The fainthearted. Requires complex coding û The resource poor. Time consuming and requires rigorous testing Extensive CSS and HTML coding skills The ability to test and view emails in multiple environments 8
WHICH APPROACH IS RIGHT FOR YOU? Before making a decision, it s important to understand your audience and what devices they are using to read your emails. Your audience is the best guide when it comes to your email marketing strategy. Finding out which devices people read your emails on is now really easy to do in EzyMsg. Just check out the Device Split in the new reports. If the number of people reading your email on mobile devices is low then you probably don t need to change anything with your current email design at least for now anyway. Just remember that more and more people are reading their email on mobile devices so keep an eye on your Device Split with future campaigns. On the other hand, if the mobile number is high (or is showing signs of an upwards trend) then some further action is probably required. What that action is can be determined by looking at this next question. How mobile friendly is your current email design? When testing your email across multiple email clients and devices, pay close attention to how the email renders. Does the text look too small and difficult to read? Do you need to scroll sideways in order to see the main offer and call to action? Are the links grouped too closely together so that the reader can t easily touch them? If the answer to any of the above questions is yes then a redesign is probably a good idea. At the very least you should tweak your email design to make it mobile friendly. Furthermore, you need to weigh the effort needed to redesign with a realistic view of your content and production timeline, and pick an approach that makes sense for your brand. For example, certain emails in a program might be just fine with an aware approach, but a higher traffic welcome message or special offer could benefit from a few responsive elements. 9
THE VERDICT Whatever approach you decide to use, make sure you plan for the long term. It isn t simply tweaking the code of a single email, it s optimizing your entire email marketing framework, so make sure you plan thoroughly, code & design, and TEST TEST TEST your new approaches to see what resonates with your audience best. Best case scenario Use both options together (mobile aware + responsive) so that if the media query isn t supported in a specific client, it ll still look great no matter what device it s opened on! IN THE MEANTIME Start employing these best practices for mobile email design when creating your next mobile-friendly email and you ll be off to a good start. Mobile Email Design Principles Support the subject line with a creative, useful or helpful preheader. - Call to action - Special offer - Reminder - Clickable/measurable Create touch-friendly links and buttons Include a clear CTA Use short, direct copy Increase font sizes - Body copy 16px+ - Headlines 22px - Buttons 44px by 44px Create content hierarchy Use a one-column layout Optimise the left hand side for Android - Pertinent information - Call to action - Links Tappable touch targets Bullet proof buttons that don t rely on an image Test, test, test DON T: Group links closely together DON T: Forget to make landing pages mobile-friendly too! 10
For further information please contact: support@ezymsg.com Unit 1B, 27 Sinclair Street, Arundel 4214 Australia +61 1300 399 674 +61 07 55 030 651