UAS templates guidance

Templates will be used throughout UAS websites in order to promote consistency of improve user experience. This guidance is organised by content type and provides further information about all of the available templates, when to use them and how to get the best results. 

Although not strictly template related, you will also find some guidance on reusable content and content sharing.

Homepage

Homepage templates

Expand All

This is the homepage of your site and would usually only be used once per site. The whole page content is in Region 1. 

At the top is a WYSIWYG for the popular link list, with the background colour already set (do not change this!) The popular links list is a 3 column link list, followed by a 1-column link list for contact details. Make sure to hyperlink everything using the "Link to content" button ("Linkit" tool). 

Region 2 contains a grid of information cards, displaying four cards per row. These can be populated in different ways, either filtered, selected or static. To display icons on the cards, browse the images that are already uploaded to your media library. Please note that each card is a link in itself, and you cannot have separate hyperlinks in an information card.

Under the information cards sits a breaker, that can be used for your section's mission statement or similar content. This is simply a WYSIWYG with a background colour. 
Below that is a grid for your latest news items. This will ideally be populated dynamically via a filter, so that every news item you publish will automatically appear here. 

desktop  homepage  information heavy 750h

 

Only use for websites which promote a part of the University whose business is relying on imagery and visual branding. 
The site logo is set under Site Settings -> Header. 

All page content is in Region 1. 

  1. Slideshow advanced, using the Text Centre Bottom item style. Leave the widget title and link empty, and select static content source. Choose a large, decorative image, fill in the text for the breaker, and create a call to action button linking to one of your content pages. Add up to 3 more items to the slide show. Make sure to disable the next/previous controls and to set the widget to full width. 
  2. Grid with 3 items per row and per page. Item style "Tile. Without rollover." This grid can be populated through a filter, for example by filtering for all news items. The "read all news" link is achieved with a WYSIWYG below that grid. 
  3. WYSIWYG with background colour enabled, which serves as a breaker. The call to action button is optional and can be built in the WYSIWYG. 
  4. WYSIWYG with map, implemented via iFrame. 
  5. Grid with 3 items per row, 6 items per page. Item style "Tile. Without rollover."
  6. Sponsor logos are managed within the footer settings, under affiliated logos. 
Landing pages

Landing page templates

Expand All

Landing pages should be used for high-level pages that guide users deeper into a specific subset of content (they would typically sit on Level 2). They provide a quick overview of the content that is available on deeper levels. 

This is a landing page without a right hand column. 

Do fill in subtitle field. 

Region 1 contains a WYSIWYG that should be used to summarise the content category using keywords that users would search for via search engines. Below the WYSIWYG sits a grid of tiles with 3 or 4 cards per row. Use display style Tile without rollover. 

Landing pages should be used for high-level pages that guide users deeper into a specific subset of content (they would typically sit on Level 2). They provide a quick overview of the content that is available on deeper levels. 

This is a page with a wider Region 2 and a narrow Region 3. Region 3 will contain the right hand column with related links etc. 

Do fill in subtitle field. 

Region 2 contains a WYSIWYG that should be used to summarise the content category using keywords that users would search for via search engines. Below the WYSIWYG sits a grid of information cards with 3 cards per row. Ideally you would have 6 or 9 cards on here, but any number is technically possible. 

desktop  landing with text link tiles 750h

 

Use this template as homepage or landing page that requires imagery as well as text information.

The top image is a background image, which is set in the Page details. This image needs to be at least 1920px wide. 

The rest of the content sits in Region 1.

  1. Popular links and contact details in a full width WYSIWYG with background colour enabled. The layout is a 75%/25%, with a three-column link list in the 75% and a one-column link list in the 25% section.
  2. Secondly a banner with item style Image Text 75/25. Make sure to leave the first title fields empty, and only add a title under "Banner content", so it appears next to the image rather than above. Call to action button can be added if necessary. The banner itself can also function as a link. 
  3. Grid of information cards, most probably statically created. 4 cards per row, 4 cards per page. 
  4. The full width breaker is achieved with a WYSIWYG with enabled background colour. The button can be added in the WYSIWYG if necessary. 
Content pages

Content page templates

Expand All

Use for main text heavy content pages.

Do complete page sub title and set all relevant taxonomy terms so that the page will be discoverable by Listing pages. Editors can manage taxonomy terms for the site.

Upload a listing image (can be an icon) if relevant i.e. if this page is expected to appear in a listing or be linked to from an information card on a homepage or landing page.

Region 2 contains a WYSISYG content area set to narrow display width. You can include an image in the WYSIWYG if relevant - use image display size large (800 width).

Region 3 contains;

  1. Optional call to action e.g. link to a form or login (remove title and contents if not required)
  2. Contact us, complete details of how to contact the relevant person or team related to this content. If using reusable content for this information then remove title and contents of this WYSIWYG 
  3. Optional list of related links, forms, documents or pages directly related to this content.
  4. Optional list of links to content outside of UAS (remove title and contents if not required)
  5. Reusable content. Select default item with no content if not required. If reusable content contains contact details then adjust the order of the widget so that it follows Call to Action.

Call to action - rename the section title to something appropriate that relates to the action but doesn't just repeat the call to action button name. Some typical examples are;

  • Form or document – Title could be the form or document name e.g. 'Contract Proforma' and call to action button could be named 'Download'
  • Online forms – Title could be the form name and call to action button could be named 'Complete'
  • System login – Title could be system name e.g. 'Oracle R12' and call to action button could be named 'Login'
  • Applications – Title could be the application type e.g. 'Apply for a nursery place' and call to action button could be named could be 'Apply'

You may also add some more explanatory text above the button, if necessary.

desktop  text content page 750h

    Use to publish large pieces of content that need to be broken up but sit within the same page, for example guidance on processes.

    Region 2 contains WYSIWYG and advanced tabs. The WYSIWYG is optional and can be left empty, but it would be usual to provide some explanatory text that outlines the content of the tabs. 

    To populate the first tab enter the tab title in upper case, then add your text to the WYSIWYG content area. If the tabs relate to a process it is advisable to include a number in the tab titles. Click on 'Add another Tab' to add the next tab. 

    You can also add accordions and other widgets to a tab. However, mixing widgets can look very busy and is not recommended. 

    Region 3 is as per the standard content page.

    desktop  text with tabbed content 750h

     

    Use to publish long content pages that can be broken up into categories/subheadings. These can be A-Zs or guidance for a number of specific cases which you don't want to publish on separate pages. 
    Do complete page subtitle.
    Region 2 contains a WYSIWYG and advanced accordion. The WYSIWYG is optional and can be left empty if not needed.
    To populate the accordion, add a section with a title, then add a WYSIWYG to that section and fill with text.
    Within each section of the accordion, other widgets can be added, such as WYSIWYGs, tabs, lists, etc - however, mixing different widgets can look very busy and is not recommended. 
    Region 3 is as per the standard content page.

    desktop  text with accordion content 750h

     

    Use for main text heavy content page where a large hero image is important.
    Do complete page sub title and set all relevant taxonomy terms. Upload a listing image if relevant.
    Region 2 contains a Banner  to display the hero image and a WYSISYG content area set to narrow display width. 
    Region 3 is as per the standard content page.

    desktop  text with hero image 750h

     

    Use for building details content page.
    Do complete page sub title and set all relevant taxonomy terms.
    Do upload a listing image if relevant.
    Region 2 contains;

    1. Page contents in WYSISYG widget. Narrow display.
    2. Include an image in the WYSIWYG if relevant.
    3. Use image display size large (800 width)
    4. At a Glance table. Complete details in table, removing rows where not required.
    5. Complete Accordion contents, removing any not required.
    6. Select images to include in image gallery within the accordion if required or remove image gallery widget if not required.
    7. Main image gallery for the page contains a holding image. Remove that image and then select all images to include in the image gallery for the building.

    Region 3 contains;

    1. Contact us, complete details of how to contact the relevant person or team related to this content. If using reusable content for this information then remove title and contents of this WYSIWYG 
    2. Optional list of related links, forms, documents or pages directly related to this content.
    3. Interactive map. Double click on image of map to Edit the url oxpoints value
    4. Reusable content. Select default item with no content if not required. If contains contact details then adjust the order of the widget to appear at the top of the region.
    building details

     

    Use this template to display links in a simple A-Z style.

    The links to each letter of the alphabet and back to the top of the page are already in place.

    Add the required links to pages or documents under each letter. 

    If you have a large number of links to organise in an A-Z list, consider using an Accordion template instead (available on request).

    a z list

     

    Articles

    Article templates

    Expand All

    Use for an individual article where the author and publication date is useful to display.

    Do complete page sub title and set all relevant taxonomy terms. Upload a listing image if relevant.

    Region 2 contains;
    A WYSISYG content area with narrow display. Insert an image if required, use display size large (800 width).

    Region 3 contains;
    - More Articles listing, preferably based on taxonomy related to this article
    - Optional list of related links, forms, documents or pages directly related to this content.

     

    desktop  article 750h

     

    Use to publish a news article.
    Do complete page sub title, publication date, author, set all relevant taxonomy terms and upload a listing image if relevant.

    Region 2 contains;
    Article details WYSISYG content area. You can include an image in the WYSIWYG if relevant. Use image display size large (800 width)

    There are also two optional widgets;

    1. Share with social media, untick all items if not required
    2. Link to more news. Insert a link to a News listing page if one exists or remove the contents of the WYSIWYG if not required

    Region 3 contains;

    1. Related news listing. Preferably based on taxonomy but can be selected
    2. Optional WYSIWYG for Related links. Remove title and contents if not required
    news item

      Use to publish an event item.
      Do complete page sub title, Event date, Location and Presenter (if relevant), set all relevant taxonomy terms and upload a listing image if required.

      Region 2 contains;
      Event details WYSISYG. You can include an image in the WYSIWYG if relevant. Use image display size large (800 width).
      There is also a table of event details. Populate details in the table or delete if not required.

      There are two optional widgets;

      1. Share with social media, untick all items if not required
      2. Link to more news. Insert a link to a News listing page if one exists or remove the contents of the WYSIWYG if not required

      Region 3 contains;

      1. Related events listing. Preferably based on taxonomy but can be selected
      2. Optional WYSIWYG for Related links. Remove title and contents if not required
      event item

        Use to display a simple list of content items such as news, events, people or blogs. 

        Listing (Grid) widget is in Region 2.
        Do complete page sub-title.
        Select Content type and Source. Source can be Filtered by taxonomy terms, Selected manually or Fixed. 
        Taxonomy terms used can optionally be displayed to allow the user to set their own filters. 

        Choose one of these layout options; 

        • Tile landscape - square image
        • Tile without rollover 
        • Tile no image (if your listing items dont have listing images or icons)
        Newsletter

        Newsletter templates

        Expand All

        Use to publish a selection of news articles in a single page e.g. a monthly or termly news round up.
        Do not complete page sub title.
        Do not upload a listing image.

        All content is in Region 1;
        Content list WYSIWYG. Add the article details first and complete the content list later by adding links to the specific widget id of each article and then applying the style 'One-column-link-list'. You can move articles around and the links will still work.

        Article WYSIWYG areas. Add 2 column layout and enter article details in one column and a related image in the other.

        Include an image in either the left or right hand column of the WYSIWYG if relevant.
        Use image display size large (800 width) for the key article and medium (width 360) for the remaining articles.

        Add a new WYSIWYG widget for each article so that you can easily move them around.

        In either the first or final WYSIWYG area add a link to the previous newsletter if required.

        A version of this newsletter with content organised by tabs is available if required.

        Other

        Other templates

        Expand All

        Use this template if you want to publish profiles of your members of staff. Fill in the required fields in the Details tab and add an image if you wish. There is no need to edit any of the regions, but if you wish to add a right-hand-column in Region 3, that is possible. 

        Contact details should be replicated in the tertiary text field to ensure it displays in listings.

        person details

         

        Reusable and Shared content

        How to work with Reusable and Shared content

        Expand All

        Reusable content allows a block of content to be displayed on multiple pages across the same site. Whenever the reusable content is updated or changed all of the pages referencing the block will display the changes.

        Editors can create and edit reusable content. 

        Guidance on this feature is available in Mosaic documentation; reusable-content.

        Most reusable content will be used within the narrow region 3 of content pages, when that is the case Editors must make sure the alternative WYSIWYG widget is used when creating the reusable content.

        It is also very important to use an easily recognisable but unique name when creating reusable content. 

        If a template includes a Reusable content widget then all users can use the reusable content widget drop down to select the piece of reusable content to include e.g. Department contact details. If it isn't appropriate to use the reusable content available then select the item called 'No reusable content'.

        Content that is created on one site can easily be shared with another site, ensuring that content that must be duplicated across sites is kept up to date more easily.  

        Consider the following before sharing content between sites;

        • It is better to only have content published once, but there are scenarios where it is advantagous to duplicate the same content e.g. where sites attract different audience types
        • Shared content can only be edited by the creating site 
        • Updates to the content are immediately replicated to the site using the shared content (the 'consuming' site)
        • Shared content does not go through approval workflow on the consuming site
        • Shared content may appear multiple times in search results

        Site Admins can define which sites they wish to share content with. This is a Site setting.

        Content editors can then mark individual items that they want to make shareable ('Share with other sites' tick box within Edit Content>Details tab).

        Editors on the 'consuming' site can then choose to Add that content into their site via Manage Content > Shared Content > ‘Add to site’.

        The shared content is then immediately available to include in a list or grid, either based on taxonomy or by specifically selecting the piece of content.

        Please note: If you plan to use taxonomy terms to include the content in your site then it is important to ensure the taxonomy name is set up in your site before you 'Add to site'. You don’t need to copy the terms over, just add the taxonomy name which the content owner will be able to confirm to you.
        If you add the content to your site before creating the taxonomy name, the taxonomy terms copy process and any filtering based on the terms won’t work. In this scenario, you can re-prompt the taxonomy term copying process by going to Manage Content > Shared Content, then clicking the ‘Remove from site’ option for the content, then re-select ‘Add to site’.
         

        Further guidance can be found within Mosaic documentation: content-sharing

        List of site pages