Online Help

 Help Table of Contents

Creating Responsive TeamRaiser Events for Mobile Users

When you create TeamRaiser events, you can configure them to use responsive web design so the pages adapt the layout to user screen sizes. Responsive layouts  provide quality display on laptops, smart phones, and tablets because they use web technologies such as HTML5 and CSS3. You can select a responsive layout when you configure registration, personal, and list pages.

Note: For detailed information about responsive web design, see http://en.wikipedia.org/wiki/Responsive_Web_Design.

Before you use responsive layouts, consider the following:

  • Page Wrappers and page customizations you use for event websites must be CSS compliant. In Page Wrapper Editor, make a page wrapper responsive to mobile layouts by creating a HTML 5.0 wrapper and using responsive attributes.
  • If you use custom HTML in your event web pages, the customizations may break the responsiveness of the pages. Verify the customization work with responsive web design.
  • To use responsive layouts, you must create a new TeamRaiser. The responsive options are not available if you copy or update an event that was created prior to the availability of responsive layouts.
    Note: If you associate the new responsive event with a previous event so returning users can login with their previous credentials, the participant pages in the new event will use the layout selections you identify for the new event.
  • We recommend you enable Participant Center 2 to ensure participants use responsive personal page layouts. If you use Participant Center Classic, participants have the option to update their page to use a non-responsive layout.
  • The default Billing Information page is not responsive. To include the responsive Payment Page on your site, enable Donation 2 payment types (PayPal and Amazon Payments).
    Note: The default Confirmation page is also not responsive. However, it does not appear in the registration flow for responsive events.

You can select the responsive layout for theses pages:

  • Team Selection
  • Team Password
  • Participation Options
  • Returning Participant Login
  • Registration Information
  • Secondary Registration Information
  • Waiver
  • Registration Summary
  • Thank You
  • Default Personal
  • Company List
  • Default Company
  • Team List
  • Default Team
  • Top Participants List
  • National Company
  • Custom

[Back to Top]

Create a responsive TeamRaiser event for mobile users

To create a responsive TeamRaiser event, complete the following high level steps:

  1. Make a page wrapper responsive to mobile layouts
  2. Create a TeamRaiser event
  3. Enable Participant Center 2
  4. Enable Donation 2 payment types
  5. Select the responsive layout option on the event pages
  6. Override the default wrappers with the responsive wrapper
  7. Select the payment options to accept on the website

[Back to Top]

Make a page wrapper responsive to mobile layouts

  1. Select Setup, Page Wrapper Editor. The Page Wrapper Editor page appears.
  2. Click Create a new Page Wrapper. The Name page appears.
  3. In the Name field, enter a descriptive label that will help other administrators identify the purpose of this page wrapper from the list of page wrappers.
  4. In the Version Name field, enter a descriptive label to identify how to use this version of the page wrapper if multiple versions exist (for example, ReleaseWithV10).
  5. In the Security Category field, click the appropriate option to determine who can view a site page associated with this page wrapper. Note that you can have multiple active page wrappers in the same Security Category.
  6. Click Next. The Meta Tags page appears.
  7. In the Document Type Declaration section, select HTML 5.0. This allows the program to recognize the tagging required to adjust to different sizes of mobile device displays (such as tablets and smart phones).
  8. In the Additional HTML Tags for HEAD Element section:
    • To control the width scaling that must occur for size adjustment, enter: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    • To control the styling and element placement, enter the CSS rules (for example, define the space allowed in the top margin, whether the header has a background color or border, the appearance of a list of links typically found in the header or left navigation, where the user login component displays, and so on).
      You can also define screen widths for tablet and smart phone displays using media statements (like @media only screen and (max-width: 76 px)).
  9. Click Next. The Body Tag Attributes page appears.
  10. In the Additional attributes for the BODY tag section, insert class="mobile" as the mobile class tag.
    Note: You can remove or change this class name to implement your own mobile CSS without having to worry about overriding existing rules.

[Back to Top]

Enable Participant Center 2

  1. From the TeamRaisers list, click Edit from the Actions column of the appropriate TeamRaiser event. The Identify TeamRaiser Details page appears with the configuration task list.
  2. Click Select Event Options. The Event Options page appears.
  3. For Participant Center for this TeamRaiser, click the appropriate selection from the drop-down list.
    Note: You must pre-configure multiple Participant Centers to make them available in this list. For information, see Managing Participant Centers.
  4. Click Save.

[Back to Top]

Enable Donation 2 payment types

  1. From the TeamRaisers list, click Edit from the Actions column of the appropriate TeamRaiser event. The Identify TeamRaiser Details page appears with the configuration task list.
  2. Click Select Event Options. The Event Options page appears.
  3. Under Related Actions, click Edit Advanced Options.
  4. In the Donations 2 Registration Transaction Processing field, select the Yes checkbox.
  5. Click Save.

[Back to Top]

Select the responsive layout option on the event pages

  1. From the TeamRaisers list, click Edit from the Actions column of the appropriate TeamRaiser event. The Identify TeamRaiser Details page appears with the configuration task list.
  2. Click Customize Pages. The TeamRaiser pages list appears.
  3. Click Configure from the Actions column for the appropriate page. The edit page appears.
  4. In the Layout field, select Responsive.
  5. Click Finish.
  6. Repeat steps 3-5 for each page in which the responsive layout option is available. For a list of available pages, see Creating responsive TeamRaiser events for mobile users.

[Back to Top]

Override the default wrappers with the responsive wrapper

  1. From the TeamRaisers list, click Edit from the Actions column of the appropriate TeamRaiser event. The Identify TeamRaiser Details page appears with the configuration task list.
  2. Click Customize Pages.  The TeamRaiser pages list appears.
  3. Under Related Actions, click Customize Wrapper and Styles. The Wrapper and Styles page appears.
  4. In the Page Wrapper field, select Override the default Page Wrapper and then select the responsive wrapper you previously created.
  5. In the Registration Page Wrapper field, select Override the default Page Wrapper and then select the responsive wrapper you previously created.
  6. Click Finish.

[Back to Top]

Select the payment options to accept on the website

  1. From the TeamRaisers list, click Edit from the Actions column of the appropriate TeamRaiser event. The Identify TeamRaiser Details page appears with the configuration task list.
  2. Click Customize Pages. The TeamRaiser pages list appears.
  3. Click Configure from the Actions column for the Payment Page. The edit page appears.
  4. In the Payment Options section, select the checkboxes for the payment options to appear on the website. 
  5. Click Finish.

[Back to Top]