Email Design and Technical Development in the Age of Mobile

By Jesse Kelsey and Anthony Blair-Borders

It is an often used trope among the digerati that “mobile is now king,” but only because it’s the new reality. Recent data from Blackbaud shows that in 2015 more email messages were opened on small mobile devices than on larger desktop and laptop computers or even larger tablets. This means that web designers and technical developers need to focus their efforts to ensure that the assets we craft for their clients are “mobile-first” and fully responsive — meaning they display correctly on screens and devices of all sizes.

This evolving trend should be fully embraced, as it gives us clear and unequivocal directives for design and technical development. Mobile-first means using single column layouts with no sidebars and fewer multi-column layouts. Designs should be “flat,” with no fake textures (skeuomorphism), gradients, drop shadows, or jewel tones. Mobile-first web designs mean assets that are simple, clean, and sophisticated.

Flat designs are not only more mobile-friendly and more likely to look the same in browsers and mobile Apps across the board, but also reduce clutter in an increasingly busy medium where dozens of elements are constantly trying to vie for our attention. By cutting back on unnecessary design elements, the eye-catching appeal and “stickiness” of a layout is actually increased; headlines and calls-to-action are easier to read; buttons are easier to spot; content has to spend less time competing with banner ads and alerts for attention.

Here are our top design recommendations for flat, mobile-responsive email designs:

  1. Create visual hierarchy (especially in the top third of the email): A viewer should be visually guided from the most important element in a layout to the call-to-action as quickly and yet gently as possible. This hierarchy usually begins with a hero image (photos draw more attention than text), then a headline, followed by a call-to-action, and finally a button, with everything else being of least visual importance.
  2. Make spacing consistent: All the disparate elements in a layout need to have their own room to breathe and the space between them should be consistent. This not only makes a design look more sophisticated and professional looking, it makes it much easier for a viewer to digest the information provided.
  3. Utilize relief space: The more content that is crammed into a design, the more difficult it gets to decipher information from it. Additionally, all that cluttered content creates emotional tension for users. By opening up a design with larger spaces between elements, a comfortable, wide-open environment is created that welcomes exploration and encourages action.
  4. Avoid multiple action items and complex menus in email communications: Too many calls-to-action confuse a reader, and the menus don’t translate well to mobile. Messaging should be kept simple and direct.
  5. Use larger fonts in the body copy: Don’t be afraid to go big. We recommend about 16 pixels high with at least 24 pixels of leading (the space between lines). Users are more likely to take time to read something that’s easy on the eyes. Larger fonts are especially important when considering going mobile-first, since they are easier to read on smaller screens. Besides, some mobile devices will just increase the font size anyway.
  6. Go flat: Drop shadows, skeuomorphism, glow effects, gradients, rounded corners, and jewel effects look dated and break on a lot of mobile devices.
  7. Be consistent with font usage and color styling: A major part of building a brand and creating a dialogue with an audience is consistency. For example, button and text links (and all action items, really) should all be the same color. Using styling that remains largely consistent across all communications builds supporter trust and creates a feeling that the organization is also consistent in the work they do elsewhere.
  8. Avoid putting headlines and calls-to-action over images: When you put copy on top of an image, that copy needs to be flattened as part of the image. This means that it may not always be seen, depending upon the email client and its settings. You copy may also be shrunk down on a mobile device to the point where it’s illegible. Copy should stand alone, or be placed in a solid color background.

In addition to design, here are our responsive recommendations for the technical development of email messages. Designing with the following recommendations in mind make it possible to code messages so that they display well across devices and operating systems:

  1. Use a mobile-first design strategy: This means designing for mobile devices and thinking about how the email looks for mobile devices first, then building the “desktop” version around those constraints. This involves considering how a masthead graphic, for example, will look with desktop dimensions, generally about 600px wide, and resized for mobile devices to 320px wide. Different-sized graphics can be shown/hidden for each screen size, but this technique requires more maintenance and testing, creating duplicate content in some cases, and generally slows down email implementation time. Additionally this technique will not work with Gmail and Android clients. Therefore, it’s best to make single graphical elements that look good at any size.
  2. Use a one-column layout: This will more naturally happen if a mobile-first design strategy is adopted. It makes for cross-compatible templates, with fewer workarounds needed for mobile devices and vice versa.
  3. No gradients or background images: There are exceptions, of course, but these two items can be very difficult to code in a cross-browser compatible way. Some email browsers/clients recognize CSS gradients and background images, but many old ones do not.
  4. Use standard dimensions: Most desktop email clients generally render emails in panes that are around 600 pixels wide or less, and most mobile devices render widths at somewhere between 320 pixels and 480 pixels. It’s generally best to aim for 320 pixels wide on mobile devices, as it is the smallest width for mobile devices, and still very common for iPhones that are vertically oriented.
  5. Web-safe fonts: It’s enticing to use uncommon fonts in email designs, but there is a short list of fonts considered to be “web safe” that render similarly across all systems. Part of how a mobile-responsive template is built allows for quick text customizations and keeps the overall file size down, so by using a CSS font-family such as “arial, helvetica, sans-serif;” ensures your email easy to read and will render the same everywhere. Ideally, all of the text in your email layouts should be “live”, ensuring that it renders, even if image blocking is enabled. If you need to use a more decorative font, it should be converted to a flat graphic (keeping in mind that it needs to be legible when resized for a mobile screen). Therefore, the majority of text should use a web-safe font family. Here’s a quick reference guide of web-safe fonts: http://templates.mailchimp.com/design/typography/

Jesse Kelsey is the Senior Web Developer at Donordigital. His web development experience spans the for- and nonprofit sectors, including work in e-commerce, lead generation, digital signage, and community economic development.

Anthony Blair-Borders is a freelance art director, digital designer and illustrator, and the former Senior Web Designer at Donordigital. He has over 20 years experience working for the for- and non-profit sectors and believes web design should be fluid, stylish, clean, and functional.