Making Your Emails Royally Mobile-Friendly

By Anthony / On / In Design, Tutorials

By Anthony Blair-Borders and Jesse Kelsey
Originally posted on the Mal Warwick | Donordigital blog 

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.

blackbackground8

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/

.

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. You can view some his mobile-responsive designs here.

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.

Five Fundamentals of Graphic Design

By Anthony / On / In Design, Tutorials

The most successful layouts are both stylish and functional; a marriage often achieved by following certain, often unspoken guidelines. Following these rules makes the difference between something that will either draw the attention of a viewer but be such a mess that they won’t understand (or care to understand) what you’re trying to say, or something so practical and bland that it has as much visual impact as assembly instructions for an IKEA bookshelf.

These guidelines aren’t new; they’ve been used by great painters since the Renaissance. The problem is that with the advent of the digital age, many of these rules are largely unknown by a majority of people with access to page layout software or by web designers who know all about code, but have little background in the design process. The thing is, however, that just a little bit of compositional know-how can go a long way; making the difference between an amateurish layout and professional, eye-catching communication.

So here, for the compositional layman and digital dilettante, are some basic guidelines for making successful design:

1) Hierarchy — The first step when creating a new page layout is to size up all your different elements and decide upon a visual hierarchy. Ideally, you’ll have one visually striking “hero” image; a short, 5 to 10-word headline; an even shorter subhead; an easily scanned call-to-action; a paragraph or two of light copy, and a logo. You’ll want to assemble your layout so that the most important element is the most prominent element, just above the second most important element, which is just above the third, and so on. In most instances this hierarchy will be in the same order: hero image, headline, call-to-action, subhead, copy, logo. When laid out properly, these elements will create a natural flow that will grab the viewer’s attention and then quickly lead them to the call to action, with copy and logo providing a final “epilogue” of information.

Hierarchy of Elements Example

2) Flow — The human brain likes what is familiar. After determining your visual hierarchy, it’s time to lay those elements out in a way that seems natural. For most, that generally means a “linear” flow from top to bottom, left to right. As a rule of thumb, your primary image should be on the left, your headline to the right of it, toward the top with the subhead below that, copy below that (the eye will skip usually skip over the copy and come back to it later if the viewer is interested), the call to action below this and the logo at the very bottom. Of course, this is a general rule-of-thumb, later I’ll blog about how to creatively assemble your elements to make the eye and brain of the viewer play across a “non-linear” design using techniques developed by classical artists.
Flow Example
3) Simplicity — A common design rule is the K.I.S.S. principle—that doesn’t mean you rock and roll all night and party everyday (though depending upon your design process, maybe it does)—it stands for “Keep It Simple, Stupid”. The ultimate purpose of design is to convey information and that information is lost if it is swallowed by too many colors, too much copy, overuse of font styles, or just being crowded by too many elements. The best, and most often sited, example of simplicity in design is Apple‘s brand. Everything they create is simple; from the design of their products, to their packaging, advertising, and websites — it’s all very crisp and clean and yet still visually striking.

So Keep It Simple! Use color sparingly; choose one or two bright colors as accents with neutral tones taking precedence. Pick one “decorative” font for your headline, and use one simple font for the rest of the copy. Most of all, make sure there’s plenty of Open Space (see rule 4). When laying out your design, ask yourself “Am I screaming at my audience, or whispering to them?” As a designer, you don’t want to be a screamer. Yelling at people makes them uncomfortable and usually puts off an audience. As a designer, you want to be seductive, mysterious, and sly. Subtlety will always win out over blows to the head.

Simplicity Sample

4) Open Space — Most professional designers call it negative space, but I’ve found that some clients tend to think of the term “negative space” as, well… negative. Therefore, I tend toward referring to the use of large, blank areas as “open space”, “relief space” or “air”. Open space is a vital, maybe even the most important (and often underused), element in graphic design. To have impact, your other elements need to be striking. They need to stand out as separate individuals in order to grab the viewer’s attention and then keep it. A striking image surrounded by large swaths of neutral space is always more interesting, eye-catching and comfortable to an audience than an extreme close-up that fills a page. You’re also going to loose your audience if everything’s all jumbled together and crammed into a tiny space. It’s the difference between walking into the cluttered room of a teenager or the sparse, wide-open spaces of a museum; will your audience be overwhelmed and confused and vaguely angry or will they be put at ease and relaxed, focused on what you’re presenting to them?

Keep in mind that open space is often the hardest thing to sell to clients. Many clients feel like unused real estate in a piece is somehow a waste of valuable resources. It’s important to covey that the open space is NOT going unused, but rather being used to emphasize the other elements as an element unto itself.

Open Space Sample

5) Balance — All great design utilizes symmetry. Elements (including Open Space) should have an anchoring, or opposing, element directly across from it. If you have a colored bar in your design’s header, you should have one at the bottom of the page too. If you have a large block of text on the right side of the design, try placing an image to the left of it. Open Space can also be used to creatively make anchor points (however, this is a much more advanced technique). Balancing your design’s elements will comfort your viewers and add to the visual impact of your communications

Balance Sample

So remember, great design has visual impact and makes it easy for your audience to be informed and act. This is achieved by creating a hierarchy of elements, a natural flow from one element to the next, utilizing simplicity and wide open spaces, and creating balance. By keeping these rules in mind, even the least artistic of us can create powerful, successful, emotionally moving, and beautiful media with impact, proffesionalism and poise.