responsive website design in teamraiser

Responsive Web Design WebinarFeaturing Shana Masterson of American Diabetes Association

2

• We’ll be starting at 12:00 pm Central Time. • ReadyTalk Dial-In Number: • 866.740.1260• Access Code: 2411922

Welcome!

3

• To keep noise down we will mute all phones.

• Please chat your questions in, we have a monitor who will review and respond.

• Recording will be posted on Charity Dynamics website: www.charitydynamics.com/home/news-events/recorded-webinars

Housekeeping

4

Shana MastersonNational Associate Director for Interactive Fundraising and Engagement - American Diabetes Association

Meet Your Presenters

Brenda MieleCreative Director- Charity Dynamics

5

• What is Responsive Web Design (RWD)?

• Thinking Through RWD on TeamRaiser

• Benefits of Having a Responsive Event

• Discussion / Q&A

Today’s Agenda

6

First things first:A Quiz!

7

What is Responsive

Web Design?

8

How Many Smart Phones are There?!

9

What is Responsive Design?

One URL

OneContent

Set

One code Set

Multiple Devices

10

Why Should We Care?A few stats…

11

• 58% of all US consumers already own a smartphone.

Why Should We Care?

Source: comScore

12

• Global mobile traffic now accounts for 15% of all Internet traffic.

Why Should We Care?

Source: Internet Trends 2013

13

• 90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV.

Why Should We Care?

Source: Google

14

• Mobile devices to overtake desktop PCs as a dominant global internet platform.

Why Should We Care?

Source: TechCrunch Survey, 2012

2013

15

Nice stats, but why should I switch?

16

Four Reasons

$

17

Thinking Through RWD on TeamRaiser

18

The Beginning – Why a Redesign?

19

• Knew visitors were coming in from social media

• Email is still a priority for Step Out and how a majority of participants are coming to site

• Existing mobile sitewasn’t fulfilling ANYONE’S needs

How’d RWD Fit into the Equation?

20

Four Reasons

$

21

• Technology audit• Blackbaud reports on usage,

fundraising and house file growth over the years

• Existing analysis/surveys from the past

• Google analytics

Digging Through the Details

22

• Needed a better way to allow for event management: • Better infrastructure• Smart site architecture for

entire site• Easy templates to get

information out and not sweating code or layout

Saving Both Time & Sanity

23

• Hello new templates!• New templates removed

barriers to mobile registrations

• Fluid grid design and media queries helped with the rest

Saving Both Time & Sanity

24

Return on Investment

$

Mobile usage increase

Mobile Pageview increase

Mobile visit duration increase

430%

75%

183%April 2013-June 2013

25

Restructuring Step Out

26

• Wireframes:• Made us prioritize

content • Helped us envision

breakpoints frommobile to desktop

• Pushed us to keep a simple grid – focus on need v. want!

Restructuring Step Out…Responsively

27

Establishing Style & Grace

28

29

Content Priority

30

The Building Blocks Of Content

31

Content PriorityDesktop Tablet Mobile

1

1

2

2

1

2

32

Content Priority

33

Emphasizing Responsive Event Functionality

34

• Turn on Responsive Templates in TeamRaiser!

• Understanding content priority

• You’ll need code, of course, too: • Viewport meta tag!• Flexible grid• Define image flexibility• CSS3 Media queries

The Magic That Makes It Happen

35

• National and event pages will have consistent navigation structure to help keep site organized and less confusing as you navigate between the two.

• Incorporate a “Local Event Home” section to the navigation. Once on an event Greeting Page, it will highlight that event’s local information.

• Content: • Incororate compelling graphics, content and stories to focus on sense or urgency and convey emotion. “Warm up” the site.

• Introduce priority audiences (Team Captain, Champion, Red Strider) on the landing page and carry throughout site. • • Conditionized content when in a “logged in” state recognizing their relationship to Step Out.

• Simplify event home page (Greeting Page) with clean layout with links to pages with more content.

• Revamp registration process to add compelling calls to form a team, become a Champion or self-select as Red Strider.• • Provide comprehensive fundraising tips and tools to help “Step up Fundraising” • • Keep important calls to action highlighted on every page in a consistent area: register, donate, log-in.

• • Audience Interaction: • Make an interactive, fun site that anyone has access to and is emphasized with more personalized content if they are logged in. This will prompt them to join Step Out and see how their own personal journey with diabetes has helped others in their

community.

• Champion of the Week and Recognized Red Strider stories. Consider options for participants to share their own stores.• • Use of lighbox technology to promote campaign priorities/campaigns.• • Highly conditionalized PC that takes through a Step-by-Step process based on actions already taken.• • Share features during registration, donation and PC that allow to incorporate participation into Social Media. • • Add a way to highlight important calls to action ‘above the fold’ with the great photography ADA has available to them. Show the faces of Step Out prominently to make it more about the people being helped by the program.

• Highlight fundraising and behavior badges and milestones on PC and web content.• • Use social media to allow for site visitors to comment and share pages on the site. This opens the site up to being more collaborative with those that are part of the ADA community and those who are interested to learn more about the programs

themselves.

• Ability to highlight important initiatives through the homepage through the use of a rotator or some tool that will allow for easy maintenance and sharing mechanisms.

Emphasizing Functionality: API

36

• Benefits of API: • Enhanced look and feel – can make layout

look the way you want• Search is within one page rather than a

multiple step, multiple page search• Allows you to add a ‘get directions’ to help

Emphasizing Functionality: API

37

• Feeds on homepage utilize RSS feed from:• Step Out Community• Posts AND photography from Facebook

Emphasizing Functionality: Social Media

38

National Teams Revamped!

39

• Helped refine calls to action and clean up page

• Completely custom – not a TeamRaiser responsive template

National Teams Revamped!

40

• Feeds on homepage utilize RSS feed from:• Step Out Community• Posts AND photography from Facebook

Emphasizing Functionality: Social Media

41

• Page is responsive with some ‘fun’ coding!• Include important

items like Facebook commenting; social media share buttons

• NOTE: Will be a responsive template in summer release!

Fast & Friendly Personal Pages

42

• Page is responsive with some ‘fun’ coding!• Include important

items like Facebook commenting; social media share buttons

• NOTE: Will be a responsive template in summer release!

Fast and Friendly Personal Pages

43

• This is a TeamRaiser template• Cleans up entire

registration process• All styles are editable

by you so you can make the colors match YOUR branding

Registration Pages

44

• Page is responsive with some ‘fun’ coding!• Include important

items like Facebook commenting; social media share buttons

• NOTE: Will be a responsive template in summer release!

Fast and Friendly Personal Pages

45

• Must be enabled in TeamRaiser• Cleans up entire

donation process• All styles are editable

by you so you can make the colors match YOUR branding

Donation Pages

46

47

• You MUST be on PC2• Super important to think

about content priority.• Think of the greatness of

having registration AND fundraising in the palm of participant’s hand!

Responsive Walk Center

48

We could go on & on…

49

• More comfortable promoting through Facebook, Twitter and texting messages!

• Email views on a smartphone lead them to a responsive site where they can take action!

• Autoresponders and coaching emails that send participants to Walk Center actually work!

• No more worrying about ‘how will this page render?’ Know all pages – even new ones – will work.

Best Marketing Benefits

50

Time for Q&A

51

Want to learn about our Responsive Web Design

strategy, design and development packages? info@charitydynamics.com

Interested to learn more?

Thank you!