Standard Website Design Tips

Standard Website Design Tips

SportsTG provides a number of tools to help you design a professional website.

Follow these tips to create an engaging and user-friendly experience for your members and fans.

Note: Website Template changes are not available for Football/Soccer Websites. 

1.     Association/Club Logos and Page Headers

Logos and banners are important visual indicators that tell your audience they are visiting the right website.

By following a few simple steps, can make sure that first impressions count!

1.1     Logos

Your logo is an important connection your audience will have with your website.

Below are some steps to consider when adding your logo:

Ensure your logo is the right size (200 pixels x 200 pixels)

Make sure your whole logo fits into this size dimension (i.e. Resize your logo rather than cropping it to fit the size requirement)

Use a high resolution image

If you have recently changed your logo, ensure that latest version is uploaded to your website as soon as possible

Make sure your club or association name within your logo.  If not, you can add your logo in the page header section (See 1.2 Page Headers).

Avoid using a logo that isn’t identifiable with your club or association. For example, using an association logo instead of your club logo might confuse visitors and drive them away from the site.  If this is unavoidable, ensure the correct club or association name sits alongside the logo.

To add or update your logo:

Login to Passport

Go to ‘websites’ and select the relevant site

Click the logo icon to the left of your website name (If you have already uploaded a logo, it will display your existing logo)

Upload your logo from the approved gallery or from your computer

Select ‘Update’

1.2     Page Headers

Apart from your logo, your Page Header reinforces that visitors are viewing the correct website.

SportsTG provides a selection of default options; however we recommend using a template that relates to your sport (these will be uploaded for you to choose from when your site is created) or by creating your own custom page header. If providing a custom page header:

Avoid using generic colours.  Ensure the colours match your primary and secondary association or club colours.

Custom page headers are required to be 996 pixels (W) by 140 pixels (H) (NOTE:  The height of the header can be between 100 pixels and 140 pixels. However, the width is fixed at 996 pixels.)

Use high resolution imagery that relates to your sport and easy easily recognisable

If you integrate your logo into your banner, you may not need to place a designated logo on your site. If this is the case, your banner will need to be wider by 200 pixels to accommodate for the extra space..

Banner must be submitted in .jpg format

If you'd like your own header design to be uploaded to your website please get in touch with our customer support team .Make sure when submitting your ticket you attach the image file of the header and provide a link to your website.

To select a Page Header from one of our templates:

Login to Passport

Select ‘Page Headers’ under the Manage Display section

Select your desired header

Click ‘Save’

1.3     Choosing Themes

SportsTG provides a number of default themes that can help you get up and running quickly, but to really strengthen the branding of your website we recommend using the advanced colour palate tools.

You can set colours for headings, page titles, backgrounds, menus and tag lines.

To do this, find out the colour codes of your primary and any secondary colours, associated with your club or association.

Then follow the below steps:

Login to Passport

Select ‘Colours and Fonts’ under the Manage Display section

Enter the colour codes in the field provided. You can customise where you can feature your primary and secondary colours on menus, headings and backgrounds.

Check the ‘preview site’ section. This will preview how the colour themes will display on your site

Click ‘Update’

If you’re unsure of your club or association colour codes, you can select the colour box next to the code field. This will bring up a number of colours.  Select which options give you as close to your desired colour scheme as possible.

Some other things to note regarding colours and themes:

It’s very important that text is easily readable for users. When previewing your websites theme, consider that visitors to your site will be trying to easily navigate to the page(s) they want, and may be reading a lot of text.

Try and stick to your primary and secondary colours where possible, and use neutral colours such as black, grey or white to compliment these. Using a large number of colours that are not related to your club or association will confuse and disorientate visitors to the site.

1.4     Club and Team Logos – Fixtures & Results

Associations and Leagues can elect to display the logos of their teams and clubs within their competition pages, providing the teams and clubs have uploaded their logos.

We recommend displaying logos on your competition pages as it is more engaging for visitors and it helps uses to find the information they are looking for.

To upload a Logo:

Select the ‘Upload your logo here’ badge on the relevant club on a fixture.

Login to Passport

Click the ‘Choose file’ button

Select the logo image from your computer

Click ‘Save’

Logo dimensions are 200 pixels by 200 pixels.

To display team and club logos on website fixtures and results:

Step 1: Login into your passport account

Step 2: Select Websites

Step 3: Choose the relevant competition website you wish to update

Step 4: Select Comp Options

Step 5: Click on: Click here to change the results display format

Step 6: Under Results Display Format, select Display team logos from the drop down menu

Step 7: Click Save