This document discusses lessons learned from implementing responsive web design (RWD) for various nonprofit organizations. It provides four key lessons: 1) Assess website designs and objectives through annual post-season reviews; 2) Engage audiences by building for their attention spans, simplifying calls-to-action, and facilitating sharing; 3) Focus on creating and optimizing content; 4) "Open your (web) horizons" by prioritizing mobile access, using techniques like media queries and fluid designs, and testing across environments. Case studies are presented on how the American Diabetes Association, National Kidney Foundation, World Wildlife Fund, and Be The Match applied these lessons in their RWD implementations.

1. QUESTION:
What separates a design
that is trendy compared
to a design that is useful?

2. It’s a RWD DUEL, Y’ALL!
TEAM
LORETTA
TEAM
BRAD
TEAM
LORETTA
TEAM
DOLLY
DOLLYPARTONENTERTAINMENT.COM
BRADPAISLEY.COM

3. • 61% they will leave if they can’t find what
they need
• 48% feel the company doesn’t care for
their business
61%
will leave if they can’t find what they need
48%
feel the company doesn’t care for their business
BUT…
• 67% will CONTINUE ON if they have a
positive experience

4. 67%
will CONTINUE ON if they have
a positive experience

5. QUESTION:
ANSWER:
What separates a design
Responsive Web Design,
that is trendy compared
y’all!
to a design that is useful?

6. RWD LESSONS LEARNED
AS told THROUGH Country
MUSIC!
Matthew Mielcarek, VP, Strategy & UX Design
Brenda Miele, Creative Director
charitydynamics.com

7. LESSON #1
“Forever and Ever, Amen”

8. Lesson #1: Assess Your Designs

9. Lesson #1: Assess Your Designs
Traffic Sources
What’s This Mean?
• Direct traffic is high
meaning you have a lot of
visitors coming from
email, social media or
other places that mention
the URL clearly
• Over 40% of referral is
from Facebook – social
media love!
Top Traffic Source Cities:
1. Chicago
2. New York
3. Deerfield
4. Houston
5. Alexandria
Top Visitors, but
not necessarily
top performers
(Boston missing,
NYC is #14)

10. Lesson #1: Assess Your Designs
REMAIN FOCUSED ON
DESIGN OBJECTIVES

11. Annual Post Season Assessment:
American Diabetes Association
Year 1
Year 2
Year 3

12. 2012 Assessment
1
2
3
4
5
6
7
8
10 9 30 12 11

13. • At the time, only 12% of
visitors were using mobile
devices
• ADA had a mobile site –
not responsive – the #1 link
that was clicked was to
show the full site
• Urgent priority to launch a
responsive site for the next
event season
2012 Assessment

14. 2013 Assessment

15. 2013 Assessment

16. 2013 Assessment

17. 2014 Assessment
• Post event
assessment
highlighted relatively
high registration
abandonment rate
• Attributed to overly
complicated search
process
• Plan to refine and
simplify search for
subsequent event
season

18. Lesson #1: Assess Your Designs
• Remain Focused on Objectives
• Build Assessment in to your
Organizational Process
• Refine and Optimize when Appropriate

19. LESSON #2
“I Like It, I Love It!”

20. Lesson #2: Engage Your
Audience
Ever Hear of A.D.D.?
Think your audience might have it?

21. Lesson #2: Engage Your
Audience
21 #bbcon

22. Lesson #2: Engage Your
Audience
• We’ve increased our reach
• No more barriers of multiple sites
• Consolidated analytics
• We are on trend!
22 #bbcon

23. I Like It, I Love It, I Want Some
More of It!
BLAH
Case in Point…
I LIKE IT, I LOVE IT!
National Kidney Foundation!
BLAH
BLAH BLAH

24. HOW DO WE KEEP THEM
FOCUSED & LOVING US?

25. Lesson #2: Engage Your
Audience
• RWD Lead us to:
• Recognizing
our Audience
• Improving
Engagement
Paths
• Designing for
emotion

26. LESSON #3
ENGAGE
YOUR AUDIENCE

27. • Up front:
“When,
Where,
Who”
• Simplified
CTAs.
• Hello Social
share!

28. Lesson #2: Engaging Your
Audience
• Build a platform for your AUDIENCE
• Remember who you are serving
• Know Your Action Paths and keep it
simple
• No one wants to wait around like we
did for Dolly’s site!
• Take it to the Next Step: Build
personas to keep you on track, focused
and prioritizing

29. LESSON #3
“You’re Still the One”

30. Traffic Originating on Homepage
(and falling)

31. Lesson #3: Focus on Content
Attracts audiences through SEO
Engages audiences to stay
Connects, builds trust and
creates moments of truth

33. Lesson #3: Focus on Content
• Complex, diverse
organization
• Align tone to
mission
• Create local
connection with
more frequently
updated content

34. Lesson #3: Focus on Content

35. Lesson #3: Focus on Content
• Original content attracts website visitors to your site
and organization
• Your homepage is the most popular but not primary
entry point
• Create tools that facilitate content creation and
contribution

36. LESSON #4
“WIDE OPEN SPACES”
RWD = OPENS YOUR (WEB) HORIZONS

37. 37 #bbcon

38. 38 #bbcon

39. 39 #bbcon

40. Lesson #4: Open Your (Web)
Horizons
• Prioritize your need
• Get buy in from your
stakeholders
• Don’t ever say NEVER!
40 #bbcon

41. Lesson #4: Open Your (Web)
Horizons
• Case in Point: World Wildlife
Fund
• Rebranding New IFE
Program
• Decided to use
TeamRaiser as platform
• Needed everything to be
Responsive
• BIGGEST PRIORITY:
Allow large % of mobile
fundraisers to log in on
41 #bbcon
mobile / tablet

42. Lesson #4: Opening Up Your (Web)
Horizons
42 #bbcon

43. Lesson #4: Open Your (Web)
Horizons
But what about the Participant Center?
WE NEED MOBILE
FUNDRAISING!
43 #bbcon

44. 44 #bbcon

45. Lesson #4: Open Your (Web)
Horizons
With a bit of:
• Patience (and a great developer)
• CSS
• Media Queries
MAGIC HAPPENED!
45 #bbcon

46. Lesson #4: Opening Up Your (Web)
Horizons
MEDIA QUERIES
46 #bbcon

47. Lesson #4: Opening Up Your (Web)
Horizons
47 #bbcon

48. 48 #bbcon
But wait….
I’m not a
developer


49. Lesson #4: Open Your (Web)
Horizons
• Case in Point: Be the Match
• Campaign to target
Hispanic marrow donors
• Nearly three out of four
Hispanics (72%) already
owned smartphones as of
Q3 20131
• BIGGEST PRIORITY:
Emails must be mobile
ready and work in a
1Nielsen U.S. Digital Consumers Report, 2/2014
number http://www.nielsen.com/us/en/insights/reports/2014/the-us-digital-consumer-report.
html
of email clients
49 #bbcon

50. 50 #bbcon

51. Lesson #4: Open Your (Web)
Horizons

52. Lesson #4: Open Your (Web)
Horizons
But what about the “bad kids”
of email?
Lotus Notes 8 & 8.5,
Outlook 2000 – 2003,
Gmail App, & Windows
52 #bbcon

53. Lesson #4: Open Your (Web)
Horizons
We had to get “nerdy”:
• Coded to have a centered, responsive design
without media queries.
• Fluid design that utilizes display: inline-block &
text-align: center.
• BONUS: There are only 6 images so even if they
don’t “download” they get the full gist of the email
MAGIC HAPPENED AGAIN!
53 #bbcon

54. 54 #bbcon
Test tip: Use
Litmus!


55. Lesson #4: Open Your (Web)
Horizons
• Remember:
• RWD allows you room to grow:
• Your audience
• Your website
• Your knowledge
• NEVER GIVE UP
(or take no for an answer )
55 #bbcon

56. Q&A
56 #bbcon

57. What Have We Learned?
Assess Your Design
Engage Your Audience
Focus on Content
Open Your (Web) Horizons
57 #bbcon

58. So Many More Lessons to be
Learned

59. Don’t forget to complete
a session survey!
Each completed survey enters you into a drawing to win a
complimentary registration to bbcon 2015 in Austin, Texas*.
*Blackbaud reserves the right to change or withdraw this promotion at any time, without advance notice. Promotion has no cash value and may not be
exchanged, applied to, or combined with any other offer.
59 #bbcon
Thank You