Azure Monitor & Application Insight to monitor Infrastructure & Application
Responsive Website Design in TeamRaiser
1. Responsive Web Design Webinar
Featuring Shana Masterson of
American Diabetes Association
2. 2
• We’ll be starting at 12:00 pm Central Time.
• ReadyTalk Dial-In Number:
• 866.740.1260
• Access Code: 2411922
Welcome!
3. 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. 4
Shana Masterson
National Associate Director
for Interactive Fundraising
and Engagement
- American Diabetes Association
Meet Your Presenters
Brenda Miele
Creative Director
- Charity Dynamics
5. 5
• What is Responsive Web Design (RWD)?
• Thinking Through RWD on TeamRaiser
• Benefits of Having a Responsive Event
• Discussion / Q&A
Today’s Agenda
11. 11
• 58% of all US consumers already own a
smartphone.
Why Should We Care?
Source: comScore
12. 12
• Global mobile traffic now accounts for
15% of all Internet traffic.
Why Should We Care?
Source: Internet Trends 2013
13. 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. 14
• Mobile devices to overtake desktop PCs
as a dominant global internet platform.
Why Should We Care?
Source: TechCrunch Survey, 2012
19. 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 site
wasn’t fulfilling
ANYONE’S needs
How’d RWD Fit into the Equation?
21. 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. 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. 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. 24
Return on Investment
$
Mobile usage
increase
Mobile Pageview
increase
Mobile visit
duration increase
430%
75%
183%
April 2013-June 2013
26. 26
• Wireframes:
• Made us prioritize
content
• Helped us envision
breakpoints from
mobile to desktop
• Pushed us to keep a
simple grid – focus on
need v. want!
Restructuring Step Out…Responsively
34. 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. 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.
Emphasizing Functionality: API
36. 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. 37
• Feeds on homepage utilize RSS feed from:
• Step Out Community
• Posts AND photography from Facebook
Emphasizing Functionality: Social Media
39. 39
• Helped refine calls to
action and clean up
page
• Completely custom –
not a TeamRaiser
responsive template
National Teams Revamped!
40. 40
• Feeds on homepage utilize RSS feed from:
• Step Out Community
• Posts AND photography from Facebook
Emphasizing Functionality: Social Media
41. 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. 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. 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. 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. 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
47. 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
49. 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
Prior to RWD, there was a ‘mobilized’ site. This was done by saying, if it’s this size, show this. But now, with so many different phones on the market and the birth of the mini-ipad, kindle fire, you name it – you’d have to have a different set of code to maintain a specific look on this site on the multiple phones. So if we are looking at this photo – imagine the amount of code that would be necessary to make your one website work on all of this!
Another frustration of mobile was going to a site on your phone and not being able to find what you KNOW you saw on your laptop a few hours ago. No one wants to be frustrated because you decided for the visitor what is import either are removing content and serving up a or ‘dumbed down’ website for a mobile phone or it’s completely unusable. Responsive web design is smart – it recognizes the width of the device and ‘snaps’ the website to fit within those parameters.
Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
Key features of a responsive design is that you don’t have to have multiple URLs, you have one set of content to manage and the code that is used is ‘smart code’ meaning it’s css3 media queries that helps adapt the page to whatever your visitor is using to see the site! The code uses ‘break points’ to determine how much space is available and how it should display the website. Breakpoints allow us to target ranges that define specific display types, so for example, you would have one breakpoint for phone, tablets and possibly desktops.
2012 has been a very unusual year in the PC market. For the first time since 2001, PC sales are projected to be lower than they were in the previous year. *
Tablet sales are expected to exceed 100 million this year. *
By 2015, mobile internet users are expected to be 1.9 billion . In 2009, it was 800 million.
So easy to say, mobile devices….
*Courtesy of Mashable
Happier Folks – all around
Your site visitors will be able to access all of your information at anytime, any device. No need to try and “figure out” what they want – they get to choose themselves!
Your staff – they don’t have to maintain multiple content pages or instances – everything can be kept in one place, one page. Happy to not deal with multiple different pages and worry about the next big thing that is coming out for the web.
Saving time!
A streamlined, simple navigation, message and overall site will result in people finishing calls to action from emails. No more maintaining a website for mobile v. PC. You just need to review your content to see how it will work for everyone no matter what device.
Better Performance
# mobile users have visited your site over the last six months; compare that number to last year. You will see an uptick in mobile usage and the time on your site should increase…while mobile bounce rate decreasing.
Saving money!
No duplicate content, designs and staff needed every time a new gadget comes out.
Google can discover content more efficiently too with one streamlined website.
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.
