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.

Online tax receipt portal scores for AmeriCares

AMC Tax Portal Receipt PageThe AmeriCares Online Tax Receipt Portal was a multichannel donor-centric campaign, anchored by a custom tax receipt microsite designed to engage donors by allowing easy and free access to their tax receipts for their online and offline donations.

The campaign was launched in December 2013, with an email to donors to notify them that they could download their year-end tax receipt. The email contained their login information and a link to the tax receipt portal. AmeriCares provided this value-added service to their donors to make getting the tax benefits from their support as easy as possible.  Donors log in to access their printable donation receipt(s).  Once inside the Tax Receipt Portal, they are also shown the impact of their gift and the ability to make an additional donation.

Once the donor enters the portal, they are greeted with a “Thank You for Donating” message which includes three main accomplishments that AmeriCares achieved in 2013 thanks to their support, coupled with a donate button which spurred additional year-end giving.

The campaign is designed to increase donor engagement, and improve both retention and the long-term value of the donor to AmeriCares.  Rating systems on sites that use this tool have revealed that donors truly view this  as a value added service.

At Donordigital, we encourage all our organizational clients to deploy an online tax receipt portal to improve their year-round fundraising performance.

photo-thumbnail-nick-garciaNick Garcia is an Account Executive at Donordigital, the online fundraising, marketing, and advertising company.

How to Customize Blackbaud TeamRaiser to Run Successful Events

I just finished building out another instance of a Blackbaud TeamRaiser event with one of our amazing clients, Children’s Health Fund. If you are a seasoned veteran of using TeamRaiser, you may notice something different about this TeamRaiser event: it doesn’t look like a regular Blackbaud TeamRaiser event because we implemented some complex redesigns of the user-experience and the functionality.

Let me explain.

We had some objectives for this event that the TeamRaiser tool doesn’t offer out of the box. TeamRaiser is a great system that enables organizations to raise money for worthy causes. We had a few additional requirements, such as:

  • Reduce the number of registration steps for participants
  • Ensure that the full site is mobile responsive
  • Enable participants to easily create shortcut urls during registration, and
  • Make dynamic social sharing easily available throughout.

In addition, we wanted the focus of this event to be directed more toward enlisting constituents in the cause of providing health care to vulnerable children rather than subjecting fundraisers to the limitations of TeamRaiser.

Here is a closer look at a handful of items that helped us to meet our objectives:

Multiple Steps for Blackbaud, One Giant Leap for Fundraisers

We all fill out forms online. There’s nothing too exciting about that process. Many good sites have realized (through testing and good ol’ common sense) that users want to get from point A to point B in as few steps as possible. Amazon “1-Click Ordering” is one example.

It is well-established that having fewer pages, fewer form fields, and fewer clicks when a web visitor is making a transaction will increase conversion rates. And we all want more conversions.

Thus, one of our objectives in building this TeamRaiser event was to decrease the number of things that our prospective fundraisers need to do in order to participate in our event.

Below is a quick breakdown of a typical TeamRaiser registration process compared with a Children’s Health Fund TeamRaiser registration process. (Both of these registrations are examples of an individual registration.)

Standard TeamRaiser Reg. Process* Children’s Health Fund TeamRaiser Reg. Process
  1. Greeting Page
  2. Register as an Individual
  3. New/Returning User
  4. Participation Options
  5. Registration Page (20+ fields)
  6. Registration Summary
  7. Thanks for Registering
  1. Landing Page
  2. Get Started (3 fields + 2 checkboxes)
  3. Details
  4. Thank You (doubles as donation form)

*NOTE: this example does not cover for the user making a donation during registration, which adds a couple of steps.

Hopefully it’s clear, from the comparison above, how conversions will improve.

A Search for Every Occasion

We made extensive use of the TeamRaiser API in this TeamRaiser build. This facilitated many of our objectives, such as reducing the number of registration steps, ensuring that responsive code worked more seamlessly to make the site look better on smartphones, etc.

One of the uses, which is an easier method to get started on when developing with the API (getParticipants), helped us accomplish a variety of things: customize our TeamRaiser search page; account for some conditional uses, such as changing how the search page functions if a participant is looking to join a team vs. looking to donate; and generally simplify the user experience.


Screenshots of the customized search page on an iPhone.

Screenshots of the customized search page on an iPhone.


Freshen Up and Simplify the Participant Center

Below are two examples of how a Participant Center may appear to a newly-converted participant to your organization’s TeamRaiser event:


"Out-of-the-box" Blackbaud TeamRaiser Participant Center

“Out-of-the-box” Blackbaud TeamRaiser Participant Center




Blackbaud TeamRaiser Participant Center with some front-end design polish

Blackbaud TeamRaiser Participant Center with some front-end design polish


I encourage anyone embarking on a new TeamRaiser development project to stand back and become a participant first. Participants want to help your cause. Thinking about how the process can be simplified for your willing participants will result in stronger recruitment and more money raised.

C is for Cookie: Convio Platform Townhall (part one of two)

Share Our Strength Cooking Matters Quiz

Author’s Note: this post is part one in a two-part series, adapted from a session by Jesse Kelsey (Donordigital) and Jason Wilson (Share Our Strength), first presented at the 2013 Nonprofit Technology Conference in Minneapolis, Minnesota. We explored unconventional solutions to work with, and around, a familiar platform, Convio (a.k.a. Blackbaud’s Luminate product).

I’ll explore two of these examples, in depth, during this short series, by highlighting some front-end coding tricks.

PART ONE: Cooking Matters Quiz

Our main goal for this quiz was to drive awareness to a study called It’s Dinnertime that Share Our Strength conducted about how low-income families plan, cook, and shop for healthy meals. The full report can be found at nokidhungry.org/itsdinnertime. The report included the full study, press events, and an infographic in addition to the quiz.

This is the “recipe” that we used as a guide for the quiz, which is a standard Convio survey with some front-end bells and whistles:

  • Turn a Convio survey into a quiz
  • Give feedback to users on quiz score
  • Make dynamic score sharing possible
  • Implement a more visually engaging design

Some of the secret ingredients used in this recipe:

  • Cookies
  • JavaScript/jQuery
  • HTML/CSS
  • HTML Captions in the Convio survey

In essence, we combined the recipe and ingredients above in order to make the Convio survey more visually engaging, and to make the survey-turned-quiz into a more interactive experience, such that visitors could take the quiz and be provided with a score, as well as dynamic sharing tools to help increase awareness around the It’s Dinnertime study.

Web browser cookies played a key role in allowing for the quiz to be scored and for the score information to be used within javascript functions on the survey confirmation page. We borrowed a javascript function, called createCookie() from Quirksmode that lives on the first page of the Cooking Matters Quiz, as well as a function called readCookie(), which resides on the thank you/confirmation page of the quiz. Quirksmode provides a great, general, tutorial on how to implement and use cookies here.

Each question on the Cooking Matters Quiz is a set of radio buttons. In order to create and update the cookies on page one of the quiz, we needed to call the createCookie() function during an onclick event. Since the Convio survey module writes the survey question HTML from the server, meaning that we didn’t have direct access to edit or rewrite the HTML, I chose to hide some sections of the HTML written by the survey module with javascript, and to rewrite the HTML inputs (radio buttons) within HTML caption sections on the survey. This allowed for the addition of inline onclick events for each question, like these: onclick=”createCookie(‘Question1′,’True’,0)” and onclick=”createCookie(‘Quesion1′,’False’,0).”

Dynamic Facebook Post

On the thank you page for the quiz, using the readCookie() function, I grabbed the current cookie information from the browser and created javascript variables, like this: var q4 = readCookie(‘Question4’);. Then, still using javascript, created some if/else statements that did the scoring. The logic worked like this: if the cookie value for question four is “Price of healthy grocery items,” score 1, else score 0. After a quick tally, a variable called “totalscore” was created and used throughout the thank you page, for dynamic Facebook and Twitter links, and feedback to the quiz takers, etc.

In the end, Share Our Strength attracted 1,138 new advocates to the cause through the quiz alone, and through a small Facebook ad campaign, had over 11 million impressions and just shy of 3,000 clicks (2,860). The quiz was a key engagement factor that helped people not only understand the content of the report without having to read it, but also gave us a way to capture more names of individuals interested in cooking skills education — a core component of Share Our Strength work.

In part two, I’ll cover one more in-depth example, which was a dynamic Twitter landing page, called “Hunger Knows No Party,” and built into the Convio Pagebuilder module.

Download the full presentation slides here, from C is for Cookie: Convio Platform Townhall, a presentation from the 2013 Nonprofit Technology Conference.

Bonus: view, dissect, and use a simple, cookied quiz recipe here.

Share Our Strength crowdsources School Breakfast Week

Last month, Donordigital worked with Share our Strength to raise national awareness about childhood hunger during School Breakfast Week (March 4-8).

The No Kid Hungry Starts with Breakfast Campaign reminded us all 21 million kids in the US receive free or reduced-price school lunch, but only half of those kids get school breakfast, even though they are eligible. School breakfast provides significant immediate and long-term impact on children in need: for example, kids who eat school breakfast miss less school and do better in math, and they earn $10,000 more annually as adults.

Through a unique crowdsourcing tool, the campaign gathered data about schools throughout the country serving school breakfast, inviting local residents to call their school to ask three questions, and then input the information online.

Donordigital developed a Web page to allow visitors to download and share the infographic, which included an integrated donation widget to easily accept online gifts.

Wendy Marinaccio is a Senior Account Executive at Donordigital, the online fundraising, marketing, and advertising company.  Contact: wendy@donordigital.com

Convio Quiz Cookie Recipe

Yum, it's a cookie

With some creativity and the use of standard front-end code, a bland online survey can be sweetened and transformed into an engaging, interactive, and shareable quiz that keeps advocates energized around a cause.

Our client Share Our Strength engages constituents online using Convio fundraising software in service of their mission to end childhood hunger in America.

Convio has a handy set of tools and can wrangle lots of data in meaningful ways on the backend, but creating a default survey experience for constituents can leave nonprofit advocates and donors hungry for a little bit more. We at Donordigital worked with Share Our Strength to create a quiz experience that would offer all the bells and whistles to deeply engage people with Share Our Strength’s mission.

When Share Our Strength released It’s Dinnertime: A Report on Low-Income Families’ Efforts to Plan, Shop for and Cook Healthy Meals, we worked together to create this short “Cooking Matters” quiz with the goal of increasing mission awareness and promoting the report.

During the implementation for this quiz, which is a survey that is built on top of the Convio platform, we encountered several desired features that we couldn’t quite make happen with the features in Convio. One example is the lack of a straightforward way to score the quiz in order to give the constituent immediate feedback.

So we turned to a more front-end approach and created a few cookies on the quiz page, in order to read those cookies and do more fun stuff with them on the thank you page. Then, on the survey thank-you page, we were able to score the quiz, highlight the answers, create some dynamic sharing features, and, generally, sweeten up the user experience.

Here is a quick cookie recipe, if you’d like to try this yourself at home:

Convio Quiz Cookie Recipe:

  • Include a javascript function to createCookie() on the quiz page (this is the best resource I’ve found to date on implementing cookies).
  • Call the createCookie() function to set a cookie when a quiz answer is selected. It looks kind of like this on a survey question in Convio:
  • Include a javascript function to readCookie() on the thank you page of the quiz.
  • Define some variables on the thank you page and read the cookies. That looks like this:
  • Use the javascript variables to add up scores, display answers, create dynamic share descriptions, etc.
  • To view the code (you can—since it’s front-end code), take the quiz and see what’s happening when you view > source in any web browser.
  • Enjoy!

Jesse Kelsey is a Web Developer at Donordigital, and will be speaking at NTEN’s upcoming (April 2013) Nonprofit Technology Conference in Minneapolis, MN. Look for his session, called “C is for Cookie: Convio Platform Townhall.”

WordPress as a flexible development platform

WordPress.org logoIt’s an understatement to say that there are many ways to build a website in 2011. The tools available to web developers for building websites, web tools, apps, sitelets, widgets, etc. are plentiful. In many cases, we are not limited by the tools used for hammering out ones and zeros, but by the platforms and applications in use by our clients.

For the brand new Donordigital website and blog, we had an opportunity to choose a platform at the outset of the project. We took advantage of WordPress to build out our company site, for a handful of reasons:

  • Fosters Collaboration: We wanted to build out our site with the intent of making it easy to collaborate, not just for our production team, but for everyone in the company. WordPress combines a great content management system with top-notch blogging software which allows for anyone to contribute.
  • Enables Dynamic Content: Our site pages are built to pull content from the blog posts that we write. This helps us to keep the site content relevant and dynamic, while focusing mostly on blog post content. We categorize and tag our posts so that they’re distributed in various locations on the site.
  • Welcomes 3rd Party Tools: We use the power of widgets and plugins, such as the AddThis Social Bookmarking Widget, List Category Posts, and FeedBurner FeedSmith plugins. These tools do some of the heavy lifting for us, in order to connect via social media channels or to keep information better organized.
  • Develops Quickly: Through modifying some themes available, building the site in a dynamic fashion, and utilizing powerful third party tools, we are able to build out sites and applications quickly on the WordPress platform.
  • Leverages Open Source: There is no cost to use WordPress. It’s an Open Source project with a very active community of supporters and developers. There are many online resources available to the community— forums, documentation, example sites, plugins, etc.

Donordigital regularly develops websites for its clients using the WordPress platform. At year-end 2010, we built a Gift Catalog for Catholic Relief Services using WordPress that showcased giving opportunities for its supporters. We connected the Gift Catalog via the Convio API to allow for full donation functionality. PETA Presents is another good example of a client site that we built recently using the WordPress platform.

Jesse Kelsey is a Web Developer at Donordigital, the online fundraising, marketing, and advertising company. Contact: jesse@donordigital.com.

8 good online fundraising resources that help us learn

While the basic principles of online fundraising aren’t changing fast, the tools and tests of the ways that work are.  So it’s really worthwhile to keep up with the cleverest people in the world who are writing about them.  Here are 10 sources that can help you raise more money (and avoid some big mistakes).  Most are available as email newsletters, RSS feeds, or apps.

  1. The Agitator.  If your organization is cutting its budget and you can only afford one daily email, this is the one!  (Just kidding, it’s free.) Tom Belford and Roger Craver consistently find the most important research and campaigns and write passionately about them.
  2. Mashable, the indispensable mega-site covering social media, includes substantial coverage of nonprofit issues in the “social good” section.
  3. Beth Kanter.  Whether she’s in Beirut or Boston, Beth manages to turn out a daily post which usually contains at least one nugget, if not a complete how-to on a new trend in social networking. Sample: “I had the pleasure of experimenting with a text polling app to find out the composition of the audience and their experience with…how to integrate the use of mobile technology into multi-channel campaigns with an emphasis on social…    So, while we were waiting,  I asked the panelists to take bets….”
  4. Katya’s Non-Profit Marketing Blog.  Katya Andresen, COO of Network for Good, always has useful and provocative ideas on online marketing.
  5. Kira Marchenese’s Online Communications for Nonprofits. Insights on social media and web usability for nonprofits always has news you can use.  In recent posts, Kira, director of Internet communications at Environmental Defense Fund, writes about RFPs and “why most Facebook marketing doesn’t work.”
  6. Chronicle of Philanthropy’s daily “Philanthropy Today” newsletter.  Indispensible coverage of the sector based on the Chronicle’s own excellent stories as well as major media coverage.
  7. Mark Phillips’ “Queer Ideas.” The head of London’s Bluefrog agency explores what’s working and what’s not from the UK point of view.  From a recent post: “Choice is becoming a buzzword in fundraising. But just how important is it? …organisations like Kiva, DonorsChoose and CRUK (with MyProjects) have done rather well by offering people a chance to decide how their donations are used. …But is choice the key factor that lies behind this level of fundraising success?”
  8. UK Fundraising.  A UK version of the Chronicle, this weekly newsletter includes news you can use even if you’ve never heard of the organizations making it. Sample: “As part of its annual Cards for a Cure™ campaign, Hallmark Cards is asking adults and children to declare their love for their mother on an online ‘Mums Wall’, with the most ‘liked’ messages turned into…”

Nick Allen is co-founder and chief strategy officer of Donordigital, the online fundraising, marketing, and advertising company.  Contact: nick@donordigital.com or phone (510) 473-0366.