Websites V2 201: Tips & Tricks to Improve Your Race Website

Event Information

You’ve upgraded your website to V2. Now, you just want it to look…better? We’ll review best practices for images, options for formatting and styling, and tips to creating a more functional, more attractive V2 website.

This webinar Covers:

• How to build a Homepage
• Building out a Full Website
• Choosing Your Styles
• Image Recommendations
• Hierarchy & Separation on Website Pages

View Slides

Webinar Summary: Building Out Your Race Website

Homepage structure

• For some events the homepage is the only page. Even with more pages, it’s where most visitors land, so the key information has to be there.
• The recommended order is a guideline, not a rule. Once you understand why it works, you’ll know when to change it. Examples:
  • Put more information above registration if people must read something before signing up.
  • Move fundraising higher if it matters more than registration.
• The questions the page should answer, in order:
  1. What is the event? Name, date and location, shown in the header.
  2. How do I join? Registration, placed high so people don’t have to scroll to find it.
  3. What do I need to know? Details, what to expect and how the event works.
  4. Why should I care? Fun, a cause, the race-day experience. Images and video do a lot of the work here.
  5. Anything else I should know? Swag, the referral program and other enticing extras.
  6. How can I get help? An easy way to ask questions the site doesn’t answer.
  7. More connections: sponsors and social media.
• The general flow is orient → act → understand → get excited → explore more.

Section 1: Header

• The header does two jobs: visual appeal that gets people excited, and the basic details everyone needs to know. It’s technically optional, since you can pick “no header.”
• Default fields come from the race wizard: race name, date and location.
• You can customize these fields, for example to add a sponsor to the race name or show a weekend-long date range.
• You can hide them, but do it deliberately. If you do, put that information directly below the banner.
• If your image contains text (race name, date), fill in the alt text so screen-reader users still get that information.
• Header styles:
  • Default: text sits on top of the image, which is slightly darkened for legibility. On mobile it stacks, with the image above and the text below.
  • Stacked: best when the image has important text. The full image shows the same on every device, the text sits below the image even on desktop, and the photo isn’t shaded, so it suits vibrant imagery.
  • Full height: the image runs all the way to the top of the page for an immersive feel. It’s shaded slightly and stacks on mobile.
  • Video banner: new and very eye-catching, especially for course overviews. It needs a Vimeo account to host the video, currently about $41/month. You can add a backup image for low-bandwidth visitors.
  • All styles look essentially the same on mobile, so the real choice is how the site looks on a laptop.
• Page banners (on pages other than the homepage):
  • Many events now use no banner or a text-only banner (a colored bar with the race information).
  • A stacked image banner looks consistent across devices, but it’s as large as the homepage banner and pushes page content down.
  • A default image banner shrinks noticeably on mobile. Keep the important parts inside the visible area and test on both devices.
• How the builder works: sites are made of sections (1, 2, 3 or 4 columns), and each section holds components, the individual pieces of content.

Section 2: Registration

• Event tiles are the recommended component.
  • They look good and are a recognizable way to sign up.
  • They’re tied to your live data, so price increases and sold-out events update automatically with no manual edits.
  • They’re edited outside the builder (follow the “click here to edit” link), where you can:
    • add background images or solid colors
    • add highlight labels such as “Most Popular”
    • customize the automatically pulled text
• Buttons are the alternative. They’re useful for fundraising-focused events that want Donate and Sign Up to carry equal weight.

Section 3: Event details

• Race description component:
  • Pulls straight from the race wizard, so you edit it there, not in the builder.
  • Stays consistent on every page it appears on, and you update it only once.
• Text component:
  • For custom copy written for one specific page.
  • It isn’t dynamic, so remember to update it manually when details change.
• Location (most races need only one):
  • Race location: shows the address with a Google Maps link.
  • Map location: shows a map image with a link, but no written address.

Section 4: Getting people excited

• Countdown clock: counts down to registration opening, race day, registration closing or any date you choose, and builds urgency.
• Participant count: shows how many people have signed up. Avoid turning it on at launch unless registrations are selling fast. It works well with a hard cap.
• Leaderboards: for top fundraisers, top donors or top teams. They create friendly competition and encourage people to build bigger teams.
• Donation thermometers: show progress toward a fundraising goal.
• Visual components: image (listed as “Image,” not “Photos”), image groups, slideshows and YouTube videos.
  • Use good imagery throughout the site, not only in this section, to break up drier information.
  • Show people how much fun they’ll miss if they don’t register.

Section 5: Promotions

• Use this section to show off swag, medals, fundraising incentives or referral program rewards.
• Text: use headers, paragraphs, bold and centering like any editor.
• Images and image groups: up to 6 images in a row.
• Cards:
  • Recommended less often now, because images plus text can achieve the same look with less hassle.
  • Still available if you want the true “raised” card style.
• Price increase component: automatically shows when the next price increase happens, which adds urgency without manual updates.

Section 6: Contact & help

• Contact Us form:
  • Every race should have one. It’s included by default, so if you remove it, add it somewhere else.
  • It sends to the race email by default, but you can create multiple forms that route to different people, for example a volunteer coordinator.
  • With AI enabled, people get an “instant answer” option before sending. If the AI can’t answer, it suggests sending the message, and people can always send it anyway, so a human stays reachable.
• AI Chatbot V2 (released this week):
  • Existing V1 users were upgraded automatically, with no action needed.
  • It learns from your FAQs and website content.
  • It also understands your race setup: price increases, registration deadlines, sold-out options and results.
  • It’s about more than reducing support emails. It answers questions people feel awkward asking. For example, a race ending at a brewery at 9 am got many chatbot questions about whether beer would be served, a question it had never received by email.
  • You can review chat sessions to see what people ask and:
    • add frequent questions to your FAQ or emails
    • retrain answers you don’t like
• FAQ:
  • Required for both AI features.
  • Recommended even without the AI features, as the main source of detailed information.

Bonus & bottom of page

• Testimonials from past runners are a strong proof point.
  • You can build them with text plus dividers, images or cards.
  • Add alt text to image testimonials so Google can read them.
• Sponsors:
  • The built-in component can group sponsors by level.
  • The new scrolling sponsor display rotates a set number of logos at a time, which helps when there are too many sponsors to show at once.
• Social media links go at the bottom if they aren’t already at the top.

Additional pages

• Needs vary. Some events need no extra pages, many need one or two, and some need 20.
• Group your information. Only about 5–6 top-level links fit in the navigation, depending on word length. Beyond that, items collapse into a vague “More” menu.
• Use dropdown submenus to organize related pages.
• Add pages at the top or bottom of the page list. Create a dropdown to hold a group, and move existing pages into a dropdown through Settings.
• Useful components for these pages:
  • Strava maps: a visual course display that links to Strava. Creating one needs a Strava account with a paid subscription, but embedding it doesn’t, so a teammate’s map link works.
  • Event lists: cross-promote your organization’s other events. Upcoming events show sign-up buttons and past events show results buttons.
    • Event list V2 is easier to set up, lets you choose which payment accounts and events to show, and is reusable across the site.
    • Existing V1 lists still work.
  • FAQs: collapsible question-and-answer dropdowns.
    • If you have many questions, split them into multiple FAQ components by topic, each with its own header.
    • FAQs also feed the AI chatbot and the AI contact form.
  • Video and playlists: YouTube videos, YouTube playlists and Spotify playlists. Some races make recommended race playlists to engage runners.

Style recommendations

• Fonts: try the font style options. They make the site look less like a template, and they’re easy to switch back.
• Headings:
  • Use real heading levels, not resized paragraph text. Google and AI read the heading hierarchy to judge what’s important.
  • Use only one Heading A per page, then B for subcategories and C for sub-subcategories. D and E are rarely needed.
  • Keep body copy as paragraph text.
  • You can still adjust size and bold after you set the heading level.
• Keep these consistent site-wide:
  • Width: restricted or full. Don’t mix them.
  • Borders and corner rounding: available only with restricted width. Use the same level throughout.
  • Padding between sections.
  • Dividers, including the new squiggly divider. Use the same style throughout.
• Vary these to keep pages engaging:
  • Column counts: mix 1-, 2-, 3- and 4-column sections. A page that’s one column all the way down is hard to scan.
  • Column widths: a new option lets columns have different widths instead of equal splits.
  • Background colors and images: use them judiciously to separate sections, alternating with blank space.

Working with images

• Canva templates (search “Canva” on the RunSignup blog):
  • Opening one creates your own copy, so you can’t break the original.
  • Each template shows the correct dimensions and which areas display on desktop vs. mobile.
  • Key sizes are listed in the templates.
• Alt text:
  • Add it to any image that contains information. It helps SEO and screen-reader users.
  • Skip it for purely decorative images, because it only adds noise for screen-reader users.
  • Add it at upload. You can’t add it later without re-uploading the image.
• Image component vs. background image:
  • A component is added inside a section. It may not fill the column height, and it can’t have rounded corners.
  • A background image is set in Section Settings → Background → Image. It fills the section, matches the height of neighboring columns and can have rounded corners.
  • If a background image has nothing on top of it, enable restricted width so it doesn’t collapse on mobile.
• Other image options:
  • Circle images: a setting on the image component.
  • Image groups: up to 6 images, which stack on mobile, with size options.
  • Slideshows: crop all photos to the same dimensions first. Mixing horizontal and vertical photos adds extra padding.
• A checklist in the slides recaps everything.