Banners are useful tools you can use to grab your visitor's attention and highlight important content.
They should serve a purpose and link to relevant content that contains clear language so that the visitor can understand where it will take them and why.
Not all websites need a banner, however. Sometimes a banner does the opposite of what you want it to do, and instead distracts the visitor from their original purpose for visiting your site.
Banners in the Memorial 2016 template come in a few different sizes.
How to create a banner yourself
If you are creating one yourself, here are some simple tips, tricks and tools to help you:
- If you are looking for an image to use as the background to your banner, the Memorial University official Flickr account has dozens of photos which you are free to use.
- There is no need for the Memorial logo or Memorial URL on your banner.
- Do not include social media handles or other URLs on your banner.
- Avoid placing key elements or text on the outer edges of the banner as this could be cut when it appears on various devices.
- Text needs to be minimal but readable, so make sure it's large enough to be read across a variety of devices, but don't have too much text on the banner. Ensure your text is placed on a plain background or colour block, so it remains readable.
- The primary typefaces to be used are Avenir and Adobe Garamond. These typefaces have been selected to complement the new logo and to bring enhanced consistency to communications and marketing materials. Both are suited for headers and sub-headers. Arial and Times New Roman may be used as a replacement if you do not have Avenir and Garamond.
- Make sure you use images that are appropriate sizes. The recommended standard size for a banner can be created by starting with a high-resolution image and using TinyPNG, a tool that optimizes images to retain image quality while reducing page loading time.
- Remember, less is more! Don't fill your banner with too many elements.
Below are the dimensions for banners, how to implement them yourself, and some tips and tricks to make sure your banners are effective and load efficiently.
A desktop banner is now 2000 x 800 pixels.
A mobile banner is 800 x 800 pixels.
An internal page banner is 800 x 400 pixels.
How to upload a banner to your website
In the Memorial 2016 template, you are now able to upload a banner to your website yourself.
To upload a banner to the landing page of your website, go to Content, and make sure you're in the top level of your directory.
Then, scroll down to find the index page of the top level of your directory. Under Action, the black box next to the trash can is the banner manager (circled in red in the image below.)
Click on the banner manager, and a pop up will appear:
Click "Add Desktop Image" to upload your 2000 x 800 banner, then click "Mobile Image" to add your 800 x 800 mobile banner.
Fill out your alt tag (an alt tag is a description of what your banner is about, or the text that appears on the banner. It improves site accessibility and searchability.) and include the link to the content your banner is linking to, and then click "Add/Update Leaderboard to Page".
Once done, your banners will now be live on your landing page.
The process for uploading internal page banners is the same as uploading desktop banners.
If you would like to remove a banner from your website, simply open up the banner manager and click "Remove Leaderboard from Page". Your banner should now be removed from your page.