Event Information
WHEN
ON DEMAND
You have the bones of your RunSignup Race Website V2 created. Congratulations! Now it’s time to dive into the full range of design possibilities available to you with your new website builder.
This webinar will cover:
- Image sizes and types
- Accessibility Best Practices
- Dynamic components for a more interactive website
- Building out menu structures and submenus
- Making mobile responsiveness work for you
- Style best practices
- New & overlooked components
Summary of Webinar
Overview
This “201-level” webinar builds on the basics of Website V2 and focuses on design details, advanced components, and best practices that elevate a race website from functional to professional. The session dives into image handling, layout decisions, accessibility considerations, and newer components like FAQs, cards, leaderboards, and image groups. A recurring theme is intentional design—making sure every visual and component serves clarity, usability, and engagement, especially on mobile. The webinar also highlights how a well-built FAQ is now foundational for both runners and the RunSignup AI Chatbot.
Website V2 Setup & Planning Considerations
Copying websites
You cannot copy a website directly from one race to another.
Workaround: copy an entire race (for new events only), which also copies the website.
Do not restart an existing race just to copy a site—this risks losing year-over-year data.
If time is limited, consider waiting for templates rather than rushing a partial V2 migration.
Image Best Practices & Accessibility
Image sizing
Each image type has:
a full size (actual image dimensions)
a safe area where text/logos won’t be cropped on different screens
Mobile and desktop crop differently—critical text must stay in the safe zone.
Canva templates (strongly recommended)
Prebuilt templates ensure correct sizing
Useful for banners, headers, and cards
Simplifies consistency and reduces guesswork
Alt text (important for accessibility & SEO)
Alt text is:
read by screen readers
indexed by search engines
Use alt text when images convey important information (dates, text, race details)
Skip alt text for purely decorative images
Image gallery limitation: alt text must be added at upload—cannot be edited later
Header Options (Homepage & Pages)
Homepage header styles (desktop-focused choice)
All three look the same on mobile.
Default
Text overlays image
Image is automatically darkened for readability
Stacked
Image on top, text below
No automatic dark overlay
Best for high-quality photography
Full Height
Full-screen visual impact
Text overlays image
More modern, “premium” feel
Best practice: If you hide race name/date/location in the header, ensure they appear clearly elsewhere.
Page headers (non-home pages)
On or off for all interior pages (no per-page toggle)
Options:
Large image header (similar to homepage)
Narrow banner header
Solid color header
No header (build your own using components)
Using Images Throughout Your Site
Image component
Supports 1–4 columns
Limited styling at the image level
Styling (rounding, borders, padding) applies to the section, not the image
Always test on mobile (majority of traffic)
Circular images
Turn square images into circles
Adjustable alignment and zoom
Adds dimension and visual variety
Background images (section-level)
Use an image as a section background instead of an image component
Enables:
rounded corners
borders
padding
Important: enable section height, or the image may collapse on mobile
Slideshows
Up to 10 images
All images should be the same dimensions
Different sizes cause awkward padding
Current limitation: slideshow images do not pull from image gallery (manual uploads required)
Cards Component (Advanced Use)
Why cards are powerful
Clickable, interactive content
Clear visual cue (hover “lift” effect)
Good for:
sponsors
event breakdowns
featured links
visual navigation
Why cards are tricky
Image crops change based on:
number of columns (2, 3, or 4)
device size (mobile vs desktop)
The visible portion of the image varies
Best practice
Use the Canva card template
Keep all critical content within the “always visible” safe area
Design cards with mobile layouts in mind (they stack vertically)
FAQ Component (and AI Readiness)
Why FAQs matter more than ever
Reduce participant emails
Improve Google and AI accuracy
Required for the RunSignup AI Chatbot
FAQ component features
Accordion-style display
Preset question suggestions + unlimited custom questions
Drag-and-drop reordering
Clean, mobile-friendly layout
Structuring large FAQs
Use multiple FAQ components grouped by topic
Add text headers (e.g., Registration, Packet Pickup, Race Day)
Improves usability without affecting chatbot training
AI chatbot connection
Website V2 + FAQ component required
FAQ updates are re-read by the chatbot
Admins can manually train or correct chatbot responses
Style & Layout Enhancements
Section styling options
Rounded corners
Borders
Padding
Restricted width vs full width
Background colors or images
Automatic text color handling for readability
Column layouts
New 3- and 4-column layouts
Stack automatically on mobile
Great for visual variety and scannability
Image groups
Up to 6 images in a row
Stack neatly on mobile
Best with same-sized images
Button groups
Up to 3 buttons in a row
Ideal for multiple calls-to-action
Familiar feel for former cover page users
Font styles
Select heading + body font pairings
Subtle way to add personality
Impacts event tiles and headers consistently
Divider component
Simple but effective
Multiple thickness options
Helps visually separate content without heavy backgrounds
New & Notable Components
PDF uploads
Useful for athlete guides
Note: website text is better for SEO and AI readability
PDFs still helpful for printable resources
Social links
Centralized social handle management
New platforms added (e.g., BlueSky, Strava)
Icons only appear if handles are filled in
Contact forms (enhanced)
Can route to different emails
volunteers
sponsors
general inquiries
Reduces internal forwarding
Leaderboards
Fundraisers (highly recommended for fundraising events)
Charities (multi-charity events)
Top teams (participation-based motivation)
Strava component
Interactive course map
Directly links to Strava for training and previews
Playlist component
Encourages participant interaction
Can spark community-created playlists
Unexpected engagement driver
Event lists
Useful for organizers with multiple events
Only public events appear
Private/non-findable events won’t show
Real-World Website Examples (Key Takeaways)
Consistent styling creates polish
Transparent PNGs over color backgrounds add depth
Subtle background images add dimension without clutter
Strong imagery drives FOMO and emotional connection
Website V2 allows sites to look distinct, not cookie-cutter
Q&A Highlights
FAQ updates and chatbot: Updates are reflected; chatbot retrains continuously and can be manually adjusted.
Temporary banner messaging: Not dynamic; requires swapping banners manually.
Membership websites: Most Website V2 updates apply across products (with data-specific exceptions).
Old content carryover: Always review migrated content—dates and packet pickup info may still reference prior years.
PDFs in FAQs: Not directly supported; better to link to a page hosting the PDF.
Instagram feeds: Not currently supported due to API changes.
Key Takeaways
Website V2 rewards intentional design choices, especially around images and mobile behavior.
Canva templates are one of the most underutilized tools for clean, consistent visuals.
Cards and background images add polish but require planning.
A strong FAQ improves runner experience, SEO, and AI chatbot performance.
Website V2 enables truly unique race sites—without external hosting.