New Race Website Headers

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:

Screen Shot 2017-05-10 at 1.54.54 PM.png

On Mobile:

IMG_3122

That option is called the “Mini”. You can also choose the “Micro” in your Race Dashboard under Race Theme:

Screen Shot 2017-05-10 at 3.58.12 PM.png

This loads a thin navigation over the top right of your banner image:

Screen Shot 2017-05-10 at 1.56.39 PM.png

On Mobile:

IMG_3119

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:

Large Races Using Partner Websites

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!

Screen Shot 2017-04-27 at 9.42.18 AM.png

Screen Shot 2017-04-27 at 9.49.44 AM

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.
Screen Shot 2017-04-27 at 10.20.44 AM
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.
Screen Shot 2017-04-27 at 10.22.58 AM
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:
Screen Shot 2017-04-27 at 10.26.42 AM
– 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.
Screen Shot 2017-04-27 at 10.25.45 AM
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 to lead User Interface and User Experience Refresh

jkJeff 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.

Screen Shot 2017-04-18 at 8.16.26 AM

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:

header-micro-1.png

We will also offer an option to keep it at the top, but greatly reduce the size:

header-mini.png

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.

template2-micro-header.png

That will also have a new mobile look with the image overing the whole page on initial load:

template2-mobile

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.

Expanded HTML Support in EMails and Custom Sections

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:
Screen Shot 2017-04-17 at 3.35.58 PM.png

To generate an image of the marines on the beach carrying the flag in the email like this:
Screen Shot 2017-04-17 at 3.32.48 PM.png

Here is a list of the HTML elements we permit in both Custom Sections as well as Emails:

  • ‘h1′,’h2′,’h3′,’h4′,’h5′,’h6’,
  • ‘p’, ‘b’, ‘i’, ‘u’,’br’, ‘hr’,
  • ‘strong’,’em’,’span’,’a’,’ul’,’ol’,’li’,’div’,’pre’,
  • ‘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
  • Vertical-align
  • Background-color (hex required)
  • Border (width style color)

New How To’s – Event Display, Confirmation Page, and External Links

How to Customize Event Display Options:
 

How to Add a Confirmation Page Button:

How to Include External URLs: