Responsive Design for Peer-to-Peer Fundraising

When we design a nonprofit site, creating a responsive design is almost always a requirement. Going responsive just makes sense! It allows you to maintain a single website that renders appropriately on any device – from desktop computers to handheld devices.

Not only does responsive design make sense for your org’s main web presence, it makes sense for your peer-to-peer fundraising (P2P) websites too. Potential registrants and donors are very likely to visit your P2P site from a mobile device to find information about your event or campaign, register and donate. So what does responsive design for P2P look like?

Cystic Fibrosis Foundation’s recently redesigned Great Strides website is a great example of a fully responsive peer-to-peer fundraising site, powered by TeamRaiser™.

As we worked with this terrific organization to create the site, we integrated the responsive design requirement throughout our entire process:

1. Wireframes

Even in the earliest stages of design, we were planning for responsive. We developed the wireframes using the Foundation HTML framework to show how the content and navigation should adapt at various screen widths.

2. Designs for each Break-point

During visual design, we treated each breakpoint individually to ensure we articulated the ideal look and feel for each screen size.

3. Search Results

To maximize event participation, we ensured the find-a-walk and find-a-team search forms and search results were displayed appropriately on any device.

4. Registration and Donation Forms

Utilizing TeamRaiser’s responsive layout features, we styled the mission-critical event signup and donation forms to match the event’s new visual design.

5. Quality Assurance

During our thorough testing phase, we made sure to review the site from a variety of devices to ensure the responsive vision was achieved.

The end result is a peer-to-peer fundraising website that is beautiful, modern and best of all, usable from any device. If you’re redesigning one of your websites, be sure to think about going responsive to create an experience that is engaging on every screen.

ABOUT THE AUTHOR

Lacey Kruger

Lacey Kruger, principal information architect for Blackbaud, designs online properties for nonprofits that delight and inspire. Whether a full scale website, a campaign site or a peer to peer fundraising site, Lacey guides clients through a research-based and user-centered approach to design. In her 12+ years at Blackbaud, she has developed a deep understanding of nonprofit web presences. That knowledge, along with her years of experience in information design, have established her as an industry expert.

Lacey has written a Blackbaud eBook, “A Guide to the Nonprofit Web Design Process” and her article, “Designing Nonprofit Experiences: Building a UX Toolkit” was published in User Experience magazine. She has presented at industry conferences including bbcon, IA Summit and BIG Design.