Banners

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.

You can create a banner yourself, or to request that a banner be made for you by Marketing and Communications, please fill out the Request for Marketing/Web Services form.

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

An example of a desktop banner on a mun.ca website 

 

A mobile banner is 800 x 800 pixels. 

An example of a mobile banner on a mun.ca website 

 

An internal page banner is 800 x 400 pixels.

An example of an internal page banner on a mun.ca internal page banner

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. 

top level 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.)

banner manager is located to the right of the row

Click on the banner manager, and a pop up will appear:

leaderboard manager

Click "Add Desktop Image" to upload your 2000 x 800 banner, then click "Mobile Image" to add your 800 x 800 mobile banner.

leaderboard manager for mobile

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

add/update leaderboard image

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.

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

Contact

Site Builder User Guide

230 Elizabeth Ave, St. John's, NL, CANADA, A1B 3X9

Postal Address: P.O. Box 4200, St. John's, NL, CANADA, A1C 5S7

Tel: (709) 864-8000