Every morning, my day starts off a little something like this:
I wake up, roll over, and before I even get out of bed, I reach for my iPhone and check my email. Then I check it again while eating breakfast, and again while waiting in line to get a coffee on my way to work.
On an average morning, I’ve checked my email three or four times before I’ve even turned on my computer.
Does this routine sound familiar?
Smartphone usage is sky-rocketing, and with it, so is the number of people that are reading email on a mobile device. According to Litmus, 43% of email is now opened on a mobile device. That number is up 138% from 2010, and I think it’s a pretty safe bet that it’s going to continue to grow.
This means that you need to be creating emails that are mobile friendly. A mobile-friendly email is an email that displays optimally between a desktop/laptop and a mobile device, ensuring that it will look great regardless of where your customers and prospects read it.
Sound complicated? It’s not. It’s actually pretty easy.
Here are five simple things you can do now to ensure that your emails are mobile-friendly:
1. Be as concise as possible in both design and content
Having a clear and concise message should be a staple of any email, but it’s even more important when designing for mobile. Screen real estate is very valuable on mobile (this is going to be a common theme), so keep the design very clean and simple and focus on the essentials.
2. Use a single column template
Because of the limited real estate you get with a mobile device, it’s generally better to use simple layouts. Often times with multi-column layouts (2 columns and more) your readers will have to zoom or scroll on their smartphone to see everything. This can make it difficult for them to navigate the content of your email and the call to action. Using a single column template will make your content much more flexible for all screen sizes.
3. Use a single, clear call to action
Make sure to include a clear call to action, and put it near the top of your email. Multiple calls to action often make things a little complicated on mobile (remember—you want to be as concise as possible!) Tell your readers what you want them to do, and make it really easy for them to do so. Want them to visit your website or buy now? Make sure that link or button is easy to find and click. Whatever the action you want them to take, just make sure it’s loud and clear. And remember—with mobile, the finger is the new mouse, so make sure it’s really easy to click.
4. Avoid tiny fonts
Make sure your text can be read easily. Use a minimum of size 11pt font for body text and 22pt for headlines. We also recommend using a strong contrast of colors, like dark text on a light background. Many people turn down the brightness level on the mobile device to help conserve battery—and they are often reading on the go outside in the sunlight—so a strong contrast of colors will be easier to read.
5. Take it easy on images
Only use the images that are essential to your email. Here’s why: Apple’s iOS automatically enables images to display by default, but many other mobile device platforms—like Android—turn images off by default. You can’t assume your images will be displayed. If your email has a bunch of images in it, they might just look like chunks of white space. Because of this, we always recommend including image descriptions (also known as alt text) to let people know what the image is even when it’s not being displayed. A good tip is to always preview your email and make sure it still looks great, even if none of the images are displayed.
Look great everywhere!
A little work on your email design can go a long way to make sure emails look great no matter where people are reading them. So what are you waiting for? Now’s the time to give your email a re-design and make sure that it’s mobile-friendly!
You’ll get: Free, award-winning coaching that’s just a call, email, or online chat away. Templates that ensure your emails are beautiful, professional, and sync with your organization’s colors and logo. Real business results with a tool that reaches your customers where they are everyday: their inbox. |
Find out more » |
Thanks Dave, that was interesting. I am curious as to why so many templates that are offered use small fonts and non-contrasting colors for backgrounds and fonts. I am always changing them for contrast and size.
Thanks for reading Kathy. Glad to hear that you are changing things to make things easy for your readers!
Thanks for the tips. I like getting information which will help make my emails more readable to my easily turned off younger readers. This is a church so I really want them to find out or be reminded of what’s going on through my emails!
No problem – thanks for reading Kay!
Does Constant Contact have a way to preview emails in a mobile view?
Not currently, but these tips are very helpful to give your email the best shot of looking great everywhere.
I love changing the colors and fonts when I have time, but if some are immediately ready, maybe they can be labeled as the go to for fast emailing. I am guilty of loading my emails with enticing images to attract attention, much like my blog. But a simple idea really is a good plan for mobile devices. I’ll work on it
That’s a good suggestion – thanks!
Has anyone else had any problems with images being upside down only on apple? I just sent out a CC and on iphones/ipads the image showed up upside down but on android phones and pc’s the image was fine.
Is there some kind of glitch?
Hi there – that’s not an issue that I’m familiar with but I’ll have the dev folks check into it. Thanks for reading.
yes, i have had the same problem, but figured it was something i was doing wriong.
Thanks Mary – we will look into it.
Is Constant Contact planning to offer mobile-ready templates?
Hey Chuck – yes we are. More to come on that soon.
Mobile ready templates pls or at least mobile viewing.
Mobile preview would be great. Helpful story, thanks.
Thanks for reading Larry!
It would be awesome if you could offer some responsive designs for your templates, eg: templates that have 2+ columns respond to the viewing device to display as single column on top of each other when shown on smaller devices. I know I would rather do 1 email knowing it will display nicely on a range of devices than have to create my desktop and mobile versions separately. Cheers!
Hey Deb – yep – and we agree
we are working on it. nothing to share right now, but you’ll know more soon! Thanks for reading.
Great article – but I’m confused about one thing: You mention “Take it easy on images”, yet we’re finding consistently that people click on images far more than any other part of our email (reading other posts this seems to be the same for others). We’ve tested this in our emails and the click-through rate on images is literally 5 – 6 times what it is on text to the same links.
Kenneth – first off, thanks for the kind words!
Re: “take it easy on images.” It’s just a suggestion since not all email clients automatically display images, so say you put a bunch of images in there, there’s a chance it could just look blank. But like anything with email, do what works for you – and test! Obviously you guys haven’t had any challenge there and are seeing some awesome results.
Great short, concise and very useful article. Thank you!
That was the goal! Thanks for sharing the feedback.
We have recently gone from multiple emails each month each telling about a single event coming up, to two regular emails each month that tell about multiple events coming up. How can I best communicate multiple options with a single column approach? Will people really scroll down to see all of them?
Barb – one thing you might be able to do is just add blocks to the single column email. The single column approach is really just to make a “skinny” email – it helps make it so your readers won’t have to scroll horizontally (often times the left and right sidebars get cut off, for example).
Another idea: we just added a new feature that allows you to easily create a table. That’s a great way to showcase multiple products/services or in your case, events. Here’s some more information – hope this is helpful: http://blogs.constantcontact.com/product-blogs/email-marketing/product-update-insert-a-table/.
Here’s a general note to everyone: When discussing text size, it’s called “point size” not font size. The font refers to the name of the text design (Arial, Monaco, Calibri, etc.).
I’m a bit confused by this topic as a blog post since CC has been so far behind it’s competition to develop mobile friends solutions – and I say this a long time, and very frustrated heavy user of ConstantContact. We’ve made a substantial investment in time and resources to integrate CC with our CRM and now find ourselves not able to offer the mobile friendly communication OUR competition can because of your limits. I’ve even tried investing in custom templates to be made for us since your offering is so limited – only to find that you actively block responsive design coding when inserted in the advanced editor and your forced footer coding is a problem as well.
How can you promote anything around the idea of mobile when you aren’t offering us the resources to take advantage of it.
Melissa – sorry to hear your frustrations. These tips are simply to reinforce the changing landscape of email consumption and to help readers design for the mobile inbox. Recently we launched some new mobile-friendly templates. These templates were specifically developed to look great on popular mobile devices, and they are live right now (you can find them by searching for mobile in the template picker). We’re working hard to make sure your communications to your contacts work great, no matter what device they’re using.
I have the same problem as Melissa. We use Constant Contact several times a week and are quite invested. However, we are considering switching to a company that provides the ability to design one email that can be optimally viewed in both mobile and desk top computers. Is Constant Contact moving quickly or slowly in this direction?
Ditto…we are anxiously awaiting the very slow movement (is there any?) toward a responsive type design. We too are considering switching if this doesn’t happen very soon. 43% opens on smart phones – that says it all.
Hey Susan – yes, definitely movement.. we’ll have more to share soon on responsive.
Thanks, Dave – I hope so!
Hey, Dave, great article. I have been putting off going “mobile” with my newsletter. Checked out the new templates and I’m hooked; ready to change! Question: I publish a monthly newsletter for emergency responders. I usually feature 3-5 articles, a few sentences with a “read more” link. I also highlight past articles and resources with clickable images in the left-hand column. Since I will be doing a one column template, should I scale back on the number of articles AND other resources? Using the image description is another good piece of advice.
Thanks,
Peggy
http://bit.ly/BadgeBlog
Hey Peggy! Thanks for reading. Very happy to hear you took the leap! No so hard right?
That’s a great format you are following – much better than copying an article article. Give them enough to want more and a link to find it!’
I actually think you might not have to compromise – take a look at the mobile-friendly newsletter for example. You can add “content with image” blocks so you can follow you the same approach. The multiple column advice is more about table of contents, links on the side, etc. Having an image next to text doesn’t always make it multi-column.
Just keep in mind that the goal is be short and concise so your content is scannable – scrolling is OK – as long as it’s not a ton of information to read through.
Would you mind if I reached out to you and asked a few questions about the mobile-friendly templates?
Hey, Dave, happy to help in any way that I can. Ask away/
Very good article with useful tips. What I liked most is reply to almost every comment
Hi Dave,
Here’s a tip we use that gets around the platform compatibility issues your blog raises: We design all our marketing materials in a design program (can be PowerPoint, InDesign, Publisher or even Word), convert it to a jpg and upload the image to Constant Contacts Image Gallery. It loads across the platform spectrum as a single image despite being full of graphics and content.
Here’s a question: Converting to a jpg works for flyers or announcements, but my question is how can we upload PDFs with embedded links for newsletters and other marketing collateral in which we want clickable links? Right now, we’re building our monthly newsletters using Constant Contact templates and boxes, with the loading issues you describe, but wonder if there’s another way.
Thanks – Melanie
Hi Melanie,
One thing to be careful of if you’re using an image for your email is that a lot of times people may not even see your message because a lot of people have images turned off. This is way we don’t recommend going down that road. Here’s some more info on that: http://blogs.constantcontact.com/product-blogs/email-marketing/email-template/
As for a PDFs, here’s a post that shows you how to upload them: http://blogs.constantcontact.com/product-blogs/email-marketing/how-to-upload-a-pdf-document-to-your-constant-contact-email/
Hope that helps!
Hi Dave, great article. I love your team at CC. You always resolve my issues and are just a great resource. I wish web service providers were as helpful as your company. :} Anyway, I have always read that images add interest to your newsletter, the more the better. I link the images and the “read more” to our paragraph on articles and news items leading them to the online article archives so I understand the dilemma with reading on a smart phone. The other issue is I sell banners on my e-newsletter in my right column (2 column format). How can I still sell ad space in my newsletter AND be readable on mobile? Looking forward to your reply!
Hey Karen – first off, wow – thanks for the kind words!
That’s a good question – and one that there’s not an easy answer to. One suggestion though: you can use our awesome new insert a table feature to create sections within a column. This way, you could create multiple spaces for ads, but have them still in the one column layout – check out this blog post (it does a better job showing you than I can explain here!) http://blogs.constantcontact.com/product-blogs/email-marketing/product-update-insert-a-table/
Like a lot of things with email though, I would test, test, test. No harm in trying something and seeing what works/what doesn’t.
Dave