We are in the midst of a massive shift in the way we access information. People are mobile and have less time – we get inundated with so much content every day that we’re often forced to make quick decisions. It’s easy to see, just by looking at how the information world has transformed over the past few years. Major news outlets have punchier headlines, your online bank account shows you your balance first, and weather apps prominently display the temperature on top, and little more. The people who need to see your content are hard wired to respond to punchy, quick, and clear content. You've got one shot to get their attention.
The days of desktop dominance have given way to mobile devices. This is especially true for email. With each passing month, more and more people are accessing their email on their phones and tablets. If your emails are not designed to accommodate smaller screen sizes, your readers will become frustrated with your emails and discontinue reading.
Q: What is Responsive Design?
A: Responsive Design is a coding method used for dealing with the wide variety of devices that people use to view their content. Responsive Design uses the functionality of CSS3 media queries (a special type of code) to provide an optimal viewing experience across multiple viewing platforms (desktop monitors, laptops, tablets, and mobile phones) for websites, blogs, and email.
Q: What is the downside of Responsive Design for email?
A: Responsive Design for email is not going to be the solution for everyone. First, to use Responsive Design for email, you have to know how to write CSS code that will scale and re-arrange your emails to fit on mobile devices. This is a specialized skill set that not everyone has; in fact, most people don’t.
Second, Responsive Design for email will only display properly on iPhones, with the built-in Apple mail client. Responsive Design currently won’t work with email apps like Gmail or Yahoo Mail. For people viewing their email on a mobile device, which pulls the content from a hosted mail server like Exchange or Lotus Notes, Responsive Design elements will not work.
Third, Responsive Design is about making sure emails and websites are aesthetically pleasing. Responsive Design doesn't improve your content, or the comprehension of your content. It’s imperative to refine and reduce the actual content you deliver and be concise.
Q: How can I improve my email content today?
A: Here are some tips and best practices you can start using right now, that will help your organization drive the most action with your emails:
When you put together your emails, a single column is going to work the best. Classic web design prescribes keeping as much as possible “above the fold” to catch a person’s eye. The result was web pages that got wider and wider so that more information could be at the top of the page. With mobile, wide is bad, because mobile devices aren't the same size as a computer monitor. For mobile devices, skinny and vertical is better. It’s much easier to read and scroll up and down than it is to go right and left (or worse, to zoom in and out).
Speaking of skinny and vertical, you should reduce the width of your emails to allow for the smaller screens of mobile phones. We suggest you keep your email width to 450px and definitely less than 600px. This will allow your email to fit nicely on most devices.
Leverage the Top of Your Email
Place your most compelling content at the top. Make sure readers can understand the point of your email and that all of the most important information (and links) are at the top. That way, they won't need to scroll. Also, avoid using a Table of Contents with anchor tags, as they take up valuable space and don't work in many email clients.
Now that you have a skinny, single column email, you will need to compensate for the smaller dimensions by increasing the size of the font. We suggest you go with 14 - 16px for body copy and 20 - 26px for headers. The larger font will allow people to read your content without having to squint or zooming in and out.
Shorten Content and Be Concise
It might be easier to scroll up and down on a mobile device, but there's limits to this. If people have to scroll for 17 minutes to get to the bottom of your email, it's simply too long. Try writing shorter teaser summaries to your stories and then link to the full story on a landing page of your website. This helps people get right to the content they want and will drive up your engagement rate. It will also help improve search engine optimization (or SEO) of your site and keep your readers happy by getting them exactly what they are interested in.
Call Out Clickable Elements with an Image
While you are linking to landing pages, get rid of simple text links and go with touch-friendly arrows or buttons instead. For most people it takes pinpoint accuracy to actually click on linked text and many times we hit the wrong things if we are a little clumsy or have large fingers. Replacing those links with clickable buttons can help solve that problem; 50 x 50px to 75 x 75px should be enough to get the job done.
When you're turning the visuals in your bulletins into links, make sure you are putting alt tags in place for people who have images turned off. Also, make sure the alt tags make sense to people viewing your message. Instead of subscribers seeing outline of your button image with the file name “mobile_button_2.png” in place of the image, why not try an alt tag that displays something like, “Click here to go to the full article. Please allow images from Central City to improve your reading experience.”
Remember to place ample white space between text, paragraphs, images, buttons, etc. This will help make your emails easier to read and provide more forgiveness so people don’t click the wrong thing. It's also a clearer and more enjoyable experience for your subscribers.
Keep your email subject lines short and sweet. Subject lines that are too long will get truncated on smaller screen sizes. We suggest 60 characters or less for your subject lines. Most iPhones only display the first 35 characters, so it's best to keep subject lines as short as possible.
Preheader text is the snippet of text that you see in many email clients before you actually open the email. This text is typically pulled from the first few lines from the top of your email and is meant to build on the subject line. If you use the Advanced Bulletin Editor, there is a separate field for entering your preheader text (see Constructing Your Advanced Bulletin). Often times the first line of an email contains the VIEW_THIS macro, so be sure to place your preheader text before your macro, banner or any other content. You can also update your preheader text for each email and use that area to build on the subject line and entice the reader to open your bulletin.
Just like a pool, it pays to test the waters before diving right in. Send a test email to several different email clients and look at them on several different devices of varying sizes. You will be amazed at how different one email can look in different places. Try to find a design that looks good for all devices and email clients. Not all email clients or devices are alike, and sometimes bulletins will have a different look between them, but it's a best practice to test and attempt to create a similar experience across all clients.
Make it Visual
Visual elements, like images and videos, help grab your reader's attention. When you insert an image, you can select it and hyperlink that image, driving more traffic to your website. Because most email clients don't display video, rather than trying to embed your video in a message, we recommend linking to it. Take a screenshot of the video and then add the image to your message. Select the image of your video, and hyperlink it to your video on its hosting site, like YouTube or Vimeo.
Q: What's next for email design?
A: Granicus has been updating our mobile functionalities for subscribing, digesting, and more. While Granicus does not currently honor @CSS coding elements in our email bulletins, we are working to make major improvements to our bulletin sending functionality, and Responsive Design is being taken into consideration for every new feature we build. To see immediate benefits in your bulletins, use the above tips to help your organization get a head start on making a shift towards more effective email design.