Upload
shana-masterson
View
70
Download
5
Tags:
Embed Size (px)
Citation preview
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? [email protected]
Interested to learn more?
Thank you!