Lessons Learned from Responsive Design

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


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)


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

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


• 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



• 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


• 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


But what about the Participant Center?

WE NEED MOBILE FUNDRAISING!

43 #bbcon

44 #bbcon


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

MAGIC HAPPENED!

45 #bbcon


46 #bbcon

MEDIA QUERIES


47 #bbcon

48 #bbcon

But wait….I’m not a

developer


• 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


But what about the “bad kids”

of email?

Lotus Notes 8 & 8.5, Outlook 2000 – 2003,

Gmail App, & Windows

52 #bbcon


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!


• 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

Lessons Learned from Responsive Design

Design

Transcript of Lessons Learned from Responsive Design