We have created two new options for the header on your free race website. The purpose is to minimize the amount of real estate at the top of the page so your race banner gets better positioning and is highlighted more. This also reduces the branding of RunSignUp, so your race becomes even more of the hero for your free race website.
All races were switched to this new thin header:
That option is called the “Mini”. You can also choose the “Micro” in your Race Dashboard under Race Theme:
This loads a thin navigation over the top right of your banner image:
Watch for more exciting changes for our free race websites (you know any race can use these – not just races that use RunSignUp for registration, right?). If you have friends with race websites that are old, creaky, or non-existent tell them to check out this cool video of our features:
We have a couple of large races like the Philadelphia Marathon and the Fifth Third River Bank Run that are now using our Partner Website infrastructure to host their race website. They are finding it more secure than WordPress, and quicker to add content and take advantage of their race database on RunSignUp. And it looks nice!
We have continued to enhance this over time as shown by the large number of releases noted on our blog – https://runsignup.wordpress.com/?s=partner+website. We have added several new options, that are used in the Philadelphia Marathon website
– Option to change font between Open Sans and Libre Franklin. This option is on the Partner Website Setup page. You can see the Libre Franklin font in the Header of the Philadelphia race, and the Open Sans font in the Fifth Third race.
– Option to make banner image fullsize (default off, but always stretch to sides). It is difficult to see in the two screen shots, but the Philadelphia race has the banner photo across the entire width of the browser, while the Fifth Third cover image has a little padding on each side to align with the content below.
– Option to use “custom” header/footer, with the ability to choose different background/foreground colors. Probably the most striking difference between the two websites is the header color with the dark charcoal background and white menu text on the Philadelphia site. This can also be customized on the setup page:
– Option to upload separate partner website logo (that is separate from partner logo and overrides partner logo on partner websites). In the case of the Philadelphia Marathon, they have a default partner logo that has a background to it. With this option, they were able to add a transparent background logo image with white text and just a little bit of shadow to help make the image pop on that dark charcoal background of the header.
Note Partner Websites are only available for our large races or partners. The initial use of this capability has been for timers who support a number of races with nice features like automatic page creation for results for each race and race calendars and listings. It is nice to see large races discovering the power of this free option.
Jeff Kiesel started a couple of weeks ago to lead efforts improving the User Interface and User Experience for both participants and race directors. Jeff worked with us part time a few years ago, and we are lucky he responded to our call for a new UI/UX Developer. Bob has worked with Jeff at two other companies in the past, and can attest to Jeff’s design and technical talent and his caring for the user experience.
We are going to flip back and forth between the UI participants see and the UI that Race Directors and Timers see. The improvements will be incremental in nature, the the goal of reducing clutter and making user’s lives simpler. We will be making small improvements and releasing them quickly so we can get feedback on our directions.
Race Website Improvements
Our first set of improvements that you will see are for Race Websites. In fact, we released the start of one set of design changes with the font on the Menu Bar. We are moving away from the Sanchez font towards sans-serif fonts to clean up the UI and make it simpler to look at. The old is on the right and the new is on the left.
We also plan on deemphasizing the RunSignUp brand seen in race websites, and the gain some real estate to emphasize the race. We are going to offer a couple of options soon for the header. The default will place the top menu choices for Profile, My Races, Help and LogOut in the upper right corner something like this:
We will also offer an option to keep it at the top, but greatly reduce the size:
We will also be coming out with a second template option that will have a full-width image rather than the Facebook-like 1200 pixel width image.
That will also have a new mobile look with the image overing the whole page on initial load:
Lots more changes coming like improved table layouts, simplified long pages in the race director dashboard like Customer Questions or Add-Ons. As well as some surprises as we start to roll out the new RD Scoring and Promotion Dashboards.
We have added a number of HTML tags, attributes and styles to custom sections and emails. We limit the use of HTML tags in the HTML Tag Editor for security and consistency of the look and feel of RunSignUp.
The largest change we have made is on emails, where we now allow images in emails. The images must be stored separately on another website and be https. For example, the HTML would be something like this:
To generate an image of the marines on the beach carrying the flag in the email like this:
Here is a list of the HTML elements we permit in both Custom Sections as well as Emails:
- ‘p’, ‘b’, ‘i’, ‘u’,’br’, ‘hr’,
- ‘sup’, ‘sub’,
- ‘table’, ‘thead’, ‘tbody’, ‘tfoot’, ‘tr’, ‘th’, ‘td’
We allow a number of styles, such as:
- Align: center, right, left
- Decoration: none, underline, line-through
- Transform: none, capitalize, uppercase, lowercase, initial
- Font Weight: normal, bold
- Font Style: normal, italic
- Font-size, Line height, letter spacing, border spacing
- Margin, padding
- White space
- Background-color (hex required)
- Border (width style color)
How to Customize Event Display Options:
How to Add a Confirmation Page Button:
How to Include External URLs:
We have added an option that removes the automatic race name that appears on a race website when in mobile view.
For example, the website looks like this:
The “Scott Coffee Moorestown Rotary 8K Race” is the race name the system automatically puts on each race website in full view mode. That can now be hidden on mobile phones, giving a cleaner look on a smaller device (and places it below the “SignUp” button:
Set this option on Miscellaneous Settings, and can also remove it from the name on desktop views as well:
When a partner has races all in one state, then our national location map will narrow down to the single state. For example, the Ohio Challenge Series: