Examples Needed

Josiah Crum

Hi all.  I am hoping some of you out there could share some examples of team riser pages you have set up.  I want to see what the UX is and want to walk through a few examples.  Could you please shoot me some links to the team raiser campaigns you have set up.  Thanks so much!

Brian Mucha

Here's our most recent ones...

 

http://foundation.luriechildrens.org/circleoffriends

 

http://foundation.luriechildrens.org/dancemarathon

 

 

Josiah Crum

Brian Mucha:

Here's our most recent ones...

 

http://foundation.luriechildrens.org/circleoffriends

 

http://foundation.luriechildrens.org/dancemarathon

 

 

Thanks Brian.  Was there much development you had to do on the back-end to make this more appealing for the donor?  We have found that the most basic TeamRaiser platform is not very nice to look at and doesn't offer much customization. 

Brian Mucha

Josiah Crum:

Thanks Brian.  Was there much development you had to do on the back-end to make this more appealing for the donor?  We have found that the most basic TeamRaiser platform is not very nice to look at and doesn't offer much customization. 

Yes, tons.

 

We've been working with TeamRaiser since 2009, and it took me quite a while to work it to this point.

 

However, the majority of what you see is simply the PageWrapper - which includes the header navigation and footers. A decent responsive wrapper does wonders.

 

There is also a significant amount of CSS to override the default Convio stylesheets in order to style in-page elements such as the scrollers, thermometers, and so on. There's also tons of JQuery tomfoolery to add ajax login, contact us, etc.

 

The new responsive layouts with their (more or less) modern html have really helped there. I just did a complete overhaul to incorporate them. (Run for Gus is the most current.)

 

I start with a reset file (http://foundation.luriechildrens.org/_wrappers/yab/runforgus/2014/css/convio-overrides.css), that overrides most of the look-and-feel styles from Convio.

 

Then the default file (http://foundation.luriechildrens.org/_wrappers/yab/runforgus/2014/css/default.css) sets the overall/general styles.

 

And finally I use a series of STag conditionals in the pagewrapper which key on the current URL to load 'tweak.css' files that are specific to certain areas, such as donations (http://foundation.luriechildrens.org/_wrappers/yab/runforgus/2014/css/layout-tweaks-donate.css) or the participant page.

 

 

 

Daniel Hartanto

Hi 

 

Here are some other examples of our upcoming events here at the American Diabetes Association.

 

 2014 Tour de Cure - Northern Virginia

 

 

2014 Father of the Year - Philadelphia

 

Attached are screengrabs of our customized 2014 Tour de Cure Participant Center 2

 

For the responsiveness of the overall site, we are actively experimenting with the use of Bootstrap framework (http://getboostrap.com)  and use both the version 2.3.2  (to allow backward compatibility with our older browser notably IE audiences) as well as the new v 3 (which drops supports for older browsers).

 

The above examples are using v 2.3.2   

 

Participant Center RWD currently achieved through the heavy use of jQuery (we are also working on prototyping a Bootstrap version until Convio is officially releasing their version of responsive PC2 -- but that will requires manually changing the DOCTYPE and adding bootstrap external libraries onto your dashboard.html of your PC2 instances on the FTP alongside adding the media queries and some javascripts on the custom.js and custom.css)

 

We also let the field staff populate their contents specifically (e.g. sponsor logo, news content, event details) through the use of custom TeamRaiser page  that we embedded as "block" / "region" within the overall page.  

 

Just like Brian has already stated for this kind of customization there will be plenty of works in regards of authoring our own CSS, Javascripts, as well as the use of Convio Tags (we also use Convio API e.g. display a Team Red listing allowing one to join quickly) to pass along session data / information that are otherwise not possible to do without. But that's where the 'satisfaction' are at least for us web developer being able to further advance / improve things that you are currently given.

 

Hope all of these would open up further ideas of what we could do with.

 

Christina Relacion

These are great examples and are really helpful. We're in the process of updating our "Stepping Out to Cure Scleroderma" walk/run event websites for 2014. Thanks for sharing!

Brian Mucha

Christina Relacion:

These are great examples and are really helpful. We're in the process of updating our "Stepping Out to Cure Scleroderma" walk/run event websites for 2014. Thanks for sharing!

Try searching Google like this:

 

https://www.google.com/webhp?q=%22fr_id%3D*pg%3Dentry%22

 

This will return results with "fr_id=*pg=entry" in the url. (That's the home page of TeamRaiser.)