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!
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
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
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
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
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
1.5 Custom background image
If you would like to have a custom image appearing as the background on your standard website you will need to submit a support request to get this added for your website: firstname.lastname@example.org
The correct dimensions that this image needs to be is: 2560px wide with a 996px wide gap in the middle (as this is where the content of the website sits), while the height of the image should roughly be between 900-1000px.