Mobile Friendly Email Design Guidelines

More email is read on Mobile than on desktop email clients. Stats say 55% of email is now opened on a mobile device. (Litmus “Email Analytics”, March 2016).

Savvy marketers know they need to ensure that their email marketing is mobile-friendly. So now, we’re not just worrying about overcoming spam filters, we also need to consider how and where an email will be viewed, when it will be relevant, what action will need to be taken, and on what device?

Although there is no common design template that works across all platforms or devices optimally, using common sense and best practice techniques, we can satisfy the needs of the large screen user and the mobile user in one single design.

The best advice is to create emails that all mobile users can read and act on just as easily as desktop users.

Here are 10 tips to help you produce a better-looking email creative that’s more accessible and will render for both desktop and mobile email clients:

Tip #1: Pixel Width

For average desktop computers, we recommend conventional emails to be set up with a fixed width between 550-600 pixels. Most marketing emails and newsletters are designed to that specification. However, mobile email readers are much smaller. The premium devices on the market are just under 1150 pixels, while more common mobile email readers are in a range of 320 pixels.

Screen Display stats on the top devices:

• Email for desktop viewing = 600 pixels
• iPhone 5S portrait = 640 pixels
• iPhone 5S landscape = 1136 pixels
• iPad 2 portrait = 768 pixels
• iPad 2 landscape = 1024 pixels

Apple devices resize emails to fit their screens, however, other smartphones do not, so it makes sense to design for the lowest common denominator. The benefit is not only to ensure the recipient sees as much of your email as possible but to limit the aggravation of scrolling side to side to read an email. Aim for 450 pixels if you want one template for both desktop and mobile users.

Tip #2: Using Links

You can include a mobile-friendly URL link at the very top of an email, also known as the pre-header area. This would be a link to a hosted online text version of your email that is optimized for mobile users with limited text and images. This is considered the easy and safe default option, but it doesn’t provide a rich and compelling email creative for the user. It also requires additional clicks by the user, which has been shown to hinder response rates. Also, many template-driven email service providers may not offer options to host a mobile version. There are several providers, including PGM, that are willing and able to accommodate mobile devices.

Don’t crowd links within the body of the email. Avoid crowding URL links too close together, which makes it difficult for fingers to press on the correct link. Use pixel padding (see Tip #5) to allow for an area around or between clickable areas. Be sure to include links to important pages that support the email promotion or content. Always use trusted links since users can’t hover on a mobile device to ensure the link is safe.

Tip #3: Effectively Use Subject Lines With Pre-Headers

Ensure that the subject line and pre-header text are working to support each other, and keep the subject line somewhere between 30 to 45 characters for mobile devices.

A pre-header is basic text that can be found at the very top of your email. There are two schools of thought regarding pre-headers and mobile devices, both of which should be tested. The first is that hand-held devices make the use of preheaders a necessity since it’s prime real estate where you want to include key information and offer specific details that entice the consumer to read on. Some marketers use text phrases (i.e. click here if you cannot see images, or add us to your safe senders list) however since this is likely the first thing a prospect reads it makes sense to highlight your offer or promotion.

The second theory is to eliminate the pre-header altogether since it pushes the email creative down the screen and less of the email is visible. Our best advice and compromise is to keep the pre-header text to one or two short lines so the email creative is visible while still highlighting your best offer copy.

Tip #4: Use a Single-Column Ladder Design

Sidebars and 2-column designs are the gold standard for desktop creative since you have 2 separate areas to feature your best offer copy so that it appears at the top of the email preview pane where it’s more likely to be noticed. This is known as the “above-the-fold” area and is commonly where your headline appears. However, a mobile device will likely shift the columns, text, images and create overlapping areas which is clearly a poor presentation. The single-column design keeps it simple with no rendering issues to contend with, no columns being pushed into text, and images aligned as you intended.

Using a ladder system allows email to scale down much more neatly. You want to avoid using tables or setting image size widths to ensure that the email is ‘elastic’ and adjusts to the size of the mobile screen. You’ll also want to group multiple items, links, and images on top of each other (like a ladder). You can then use background colors within the email itself to serve as dividers between the different sections. This stacking system allows for easy organization and alignment with limited rendering snafus. The end goal is to lead your reader down the email through the content.

Tip #5: Padding for Fingers in Motion

Point-and-click motions are fluid and precise when done on a computer mouse connected to a desktop or laptop, whereas mobile devices use touchscreen technology and the human finger becomes a factor.

Email designers need to anticipate how fingers will navigate the clickable areas of an email on a touch screen. This would mean buttons and icons need to get a little larger and the surrounding areas need to be more padded to accommodate fingertips in motion. Allow for 10 pixels (give or take) around or in-between any clickable area to leave space and make it easy for users to navigate and click to take action.

Also, allow for about 20-30 pixels around the border of the email for fingers to hold the tablet device. You don’t want key information hidden under the user’s thumb.

Tip #6: Font Sizes

Another design tip for clumsy fingers is to use a minimum font size of 12 pt for body copy and a maximum headline size around 20 pt. Any larger and you risk your email landing in the junk folder for desktop since some filters flag larger fonts used in email as spam. Keep in mind that the larger font means you’ll have to keep your content brief. You’ll most likely be able to fit 10-12 lines of text on a screen.

Tip #7: Flush Left

Set all text to the left so it appears on the left side of the mobile device where it’s easiest to read. This will prevent text from getting pushed to the center or right of the phone forcing users to scroll in order to view and read the email.

Tip #8: Calls to Action, Images and Alt Tags

Always use call to action buttons or icons because they are proven to increase response. Fingers cover about 45 pixels so design your buttons accordingly, then pad by 10 pixels. Place those call to action icons in the top 250 pixels of the email (area above-the-fold) so they are easily seen and noticed by the user.

Image-to-text ratio is another factor to contend with when dealing with spam filters so be considered because a mobile device will not load images as fast as a desktop or laptop. Try to keep the size of each of your images at 20k or less and the overall file size of the email should not exceed 50-70k. Do not use Flash or GIF animations, they will not work and just add to the overall file size of an email. Keep it simple.

Header banners are the most common image to appear in an email and they run across the very top. They illustrate a brand, an offer or theme depending on the graphics used. Ensure that the banner is set to the same size as the pixel width of the email and it will appear at 100%. Set the height of the banner to control how it will render on the mobile screen. It should be no larger than 125 pixels high. Any deeper and the text portion of the email will be pushed farther down on the screen and may not even be visible.

Alt tags are snippets of text associated with an image and are commonly used in email so that before an image loads, the user has an idea of what the image is, what the offer might be, or the overall theme of the email. Keep it short.

Tip #9: Go Back to the Basics

These tips might seem a little basic but the core principles of email marketing will still apply in order for your email to be effective, so they need repeating. No matter what the design, layout or offer, always ensure your “from line” and the subject line quickly communicate two critical points: Branding (who you are) and Offer (the value in your email). The straightforward presence and recognition of both the sender and the email’s value drive open rates and responses –  regardless of viewing device.

Tip #10: Become Mobile-Friendly from A-Z

You can’t just stop at the email. The most effective campaigns have a supporting landing page that reinforces the offer from your email promotion. So you’ve spent all this time, effort and energy creating a mobile-friendly email, which means the landing page will need to be optimized as well. In fact, many marketers have a mobile-optimized version of their entire website. This is smart given the statistics we’re seeing on the mobile front and IF you’re looking to see some serious conversion rates for your email programs.

Making it simple to click through a well-designed mobile email that leads to an easy-to-navigate landing page can help improve ROI. Many of the tips above will apply to the landing page design, but you’ll be working from a larger width for a landing page. We suggest 640 pixels wide since it’s cleanly divided by two and a good canvas to develop a mobile-friendly page that’s easy to navigate.

Importance of Landing Pages

Your email is the ‘teaser’ promotion that entices the consumer to click through to a landing page where more detailed ‘sell’ information is presented. The page will usually display content that is a logical extension of the email advertisement or click-through link. A landing page is also a great option for smaller clients who want to do email marketing but do not maintain a company website. There are two types of landing pages, reference and transactional:

• A reference landing page presents information that is relevant to the email. These can display text, images, various links to company website, etc.
• A transactional landing page persuades a user to complete a transaction (such as filling out an order form), with the end goal of closing or converting a prospect into a customer. If information is to be captured, the page will usually capture some minimal amount of information (i.e. an email address, name and telephone number) – and adds the prospect to a mailing list.

A landing page is a critical link in online communications and can go a long way to improve email campaign results and drive revenue. Some points to consider when developing an effective landing page:

• On average, 50% of responders who click through to a landing page leave the page. Make sure your page grabs attention quickly by restating the offer/call to action from the email.
• Do not direct responders to your home page. This approach does not carry through the offer/call to action from the email – losing credibility.
• Make sure your landing page has the same look and feel of the email HTML creative. This ensures there is no confusion and reinforces the brand.
• If your landing page is a form to be completed, do not ask too many questions. Three to five fields are recommended.
• Keep the copy on the landing page short and to the point, but use as much space as you need to convey your message and land the sale.
• Always test call-to-action text on landing pages to boost conversion.
• Add social media integration on landing pages to boost customer confidence in your brand.