External Relations

Rotating feature

Rotating features can be used to highlight key marketing activities, for example, encourage open day sign ups or event registration. These work particularly well on homepages, spanning the full width of your screen.

Use them to point customers to key information. 

About this control

  • Find it in /SharedResources/Razor/Rotating-Feature.cshtml
  • Use one or more items in your rotation sequence - with a maximum of three
  • Use this control on any web page and in any column wider than 30% of your page
  • Avoid using more than three slides in any one sequence
  • Change the slide order by using the up/down arrows

Preparation

For each slide, you'll need:

  • title*
  • sub text
  • image*
  • image alt text*
  • link destination*
  • link title/hover text*
  • to determine whether your image is dark or light. If dark, a dark blue gradient will be applied to the image, if light, a white gradient will be applied.

* required field 

Image specifics

  • every image in your sequence uses the same image dimensions
  • the focal point is on the top/right (your messaging will be on the left)
  • file sizes aren't too large - ideally under 400kb (think about page load times)
  • you select whether you're using a dark or light image (this will change the text colour accordingly and add an opaque background to increase contrast/legibility)
  • images are relevant to your messaging
  • you use a larger image than the space you're trying to fill. This will ensure your images look as good as possible across all devices.
  • your images are landscape or square. Portrait imagery may not have the desired results

Instructions

  1. In edit mode of your page, place your cursor where you want your rotating feature
  2. Find /SharedResources/Razor/rotating-feature.cshtml in the project explorer
  3. Drag and drop rotating-feature.cshtml into your page
  4. Input the control settings - "Add item" to add another slide to your rotation sequence
  5. Save settings
  6. Save and preview your page - how does your rotating feature look?

Control settings

Title

  • each slide needs a title - this must grab attention
  • be clear and concise
  • ensure your title is relevant to the link destination

Text

  • elaborate a little on where your slide links to
  • be as brief as possible

CTA link

  • browse for a CMS page you'd like to link to
  • or link to an external URL
  • add title/hover text to give context to screen reader users

Image

  • upload your images before inserting your control
  • image sizes can vary, however, a few recommendations are:
    • 950x300px for full width banners
    • 1000x666px for 30% column of full width page
  • ensure your image is relevant and on brand
  • ensure all images are the same dimension
  • provide a relevant and descriptive alt text to aid screen reader users

Examples

A number of sites are already using the rotating feature, here are a few examples:

External Relations

University of Nottingham
C Floor, Pope Building (Rooms C2-C10)
University Park
Nottingham, NG7 2RD

telephone: +44 (0) 115 951 5151
fax: +44 (0) 115 846 6787
email: externalrelations@nottingham.ac.uk