QUESTION: What separates a

design that is trendy compared to a design

that is useful?

Let’s find out!!

It’s a RWD DUEL, Y’ALL!

TEAM LORETTA

TEAM BRAD

TEAM LORETTATEAM DOLLY

DOLLYPARTONENTERTAINMENT.COM

BRADPAISLEY.COM

• 61% they 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

61% will leave if they can’t find what they need

48% feel the company doesn’t care for their business

67% will CONTINUE ON if they have

a positive experience

QUESTION: What separates a

design that is trendy compared to a design

that is useful?

ANSWER: Responsive Web

Design, y’all!

RWD LESSONS LEARNED AS told THROUGH Country

MUSIC!Matthew Mielcarek, VP, Strategy & UX DesignBrenda Miele, Creative Directorcharitydynamics.com

LESSON #1“Forever and Ever, Amen”

Lesson #1: Assess Your Designs

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. Chicago2. New York3. Deerfield4. Houston5. Alexandria

Top Visitors, but not necessarily top performers (Boston missing, NYC is #14)

Lesson #1: Assess Your Designs

REMAIN FOCUSED ON DESIGN OBJECTIVES

Annual Post Season Assessment:American Diabetes Association

Year 1

Year 2

Year 3

2012 Assessment

1

2

3

4

5

6

7

8

910 111230

• 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

2013 Assessment

2013 Assessment

2013 Assessment

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

Lesson #1: Assess Your Designs

• Remain Focused on Objectives

• Build Assessment in to your Organizational Process

• Refine and Optimize when Appropriate

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

Lesson #2: Engage Your AudienceEver Hear of A.D.D.?

Think your audience might have it?

Lesson #2: Engage Your Audience

21 #bbcon

Lesson #2: Engage Your Audience

22 #bbcon

• We’ve increased our reach • No more barriers of multiple sites• Consolidated analytics• We are on trend!

I Like It, I Love It, I Want Some More of It!Case in Point…

National Kidney Foundation!

BLAHBLAHBLAH

BLAH

I LIKE IT, I LOVE IT!

HOW DO WE KEEP THEM FOCUSED & LOVING US?

Lesson #2: Engage Your Audience• RWD Lead us to:

• Recognizing our Audience

• Improving Engagement Paths

• Designing for emotion

YOUR AUDIENCE

LESSON #3ENGAGE

• Up front: “When, Where, Who”

• Simplified CTAs.

• Hello Social share!

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

LESSON #3“You’re Still the One”

Traffic Originating on Homepage

30%(and falling)

Lesson #3: Focus on Content

Attracts audiences through SEO

Engages audiences to stay

Connects, builds trust and creates moments of truth

• Complex, diverse organization

• Align tone to mission

• Create local connection with more frequently updated content

Lesson #3: Focus on Content

Lesson #3: Focus on Content

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

LESSON #4“WIDE OPEN SPACES”

RWD = OPENS YOUR (WEB) HORIZONS

37 #bbcon

38 #bbcon

39 #bbcon

Lesson #4: Open Your (Web) Horizons

• Prioritize your need• Get buy in from your

stakeholders• Don’t ever say NEVER!

40 #bbcon

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 mobile / tablet

41 #bbcon

Lesson #4: Opening Up Your (Web) Horizons

42 #bbcon

Lesson #4: Open Your (Web) Horizons

But what about the Participant Center?

WE NEED MOBILE FUNDRAISING!

43 #bbcon

44 #bbcon

Lesson #4: Open Your (Web) Horizons

With a bit of: • Patience (and a great developer)• CSS • Media Queries

MAGIC HAPPENED!

45 #bbcon

Lesson #4: Opening Up Your (Web) Horizons

46 #bbcon

MEDIA QUERIES

Lesson #4: Opening Up Your (Web) Horizons

47 #bbcon

48 #bbcon

But wait….I’m not a

developer

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 number of email clients

49 #bbcon

1Nielsen U.S. Digital Consumers Report, 2/2014

http://www.nielsen.com/us/en/insights/reports/2014/the-us-digital-consumer-report.html

50 #bbcon

Lesson #4: Open Your (Web) Horizons

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

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 #bbcon

Test tip: Use Litmus!

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

Q&A

56 #bbcon

What Have We Learned?

57 #bbcon

Assess Your Design

Engage Your Audience

Focus on Content

Open Your (Web) Horizons

So Many More Lessons to be Learned

59 #bbcon

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.

Thank You