UAS Mosaic - updates for users

This is an archive of the updates circulated to editors and contributors involved in the building of UAS section websites during the UAS websites transition project.

For questions about these updates email liz.beith@it.ox.ac.uk or peter.stockdale@tss.ox.ac.uk

Expand All

Although there hasn’t been a newsletter for a while, work on the Mosaic platform has continued in recent weeks with many ‘behind-the-scenes’ bugs being fixed, and work being done to improve the performance of the platform. This ongoing work is covered in this article from Mosaic on its website, and there is a summary of the actions being taken at the end of the article.

One fixed bug which may be useful to you is that you should now be able to successfully publish and unpublish content in bulk from the Manage Content screen. (Update - this 'fix' may not have resolved the problem, so please use these feature with caution. If content is lost you can revert to previous versions of the page to retrieve it.)

Since our last update a number of new sites have gone live – Staff Immigration, Governance, Jobs, HR Systems, Occupational Health and Graduate Accommodation. Please keep in mind when updating your site that, since the project started, 23 sites have gone live, so there may be links in your content which you need to update.

The final drop-in session for those needing help with building their sites is tomorrow – Wednesday 20th November, 9:30-10:15am, Wellington Square Room 2.

New legislation regarding website accessibility

The Government has introduced a piece of legislation for all public sector websites to meet accessibility standards, meaning from 23rd September 2019 all UAS sites which have migrated to Mosaic must meet these requirements. Lead editors have access to Siteimprove which will highlight areas which need addressing, however all content editors should be responsible for ensuring that their content meets the requirements.

There is information and guidance on this on the project website.

It is also a necessity that all online pdfs published since September 2018 meet these accessibility standards. If you are responsible for any pdf content you should also follow the guidance for UAS website editors.


Improvements not requiring action

  • There is now a narrow width option for webforms. As the previous workaround (putting the form into a tabbed area) continues to be acceptable, existing forms on sites will not be changed, but forms on sites which are not yet live, or new forms on live sites, will use this narrow width option.  

  • The styling for blockquotes has been improved – this has updated automatically.

  • When you create an article page (eg a News item) using a template, the default date will now be the current date and not the date on which the template was created.

  • You can now upload .wav files to Mosaic.


Bugs

You should now be able to reorder sections within accordions using drag and drop.

Improvements not requiring action

  • There is now a narrow width option for Grids and Slideshows. As many of you will have built your sites using wider Grids and slideshows, we will not update the templates so there is consistency when any new pages are built. Please keep in mind, however,
    that you can make these narrow should you need to do so – just change the width setting in the Layout options area when editing the page
  • When using the card style ‘Tile. Without rollover’ there is now the option to show or hide the date on which events are taking place, or on which news articles were posted. Just check (or uncheck) the box at the bottom of the options for that widget
    – ‘Display date infobox’.

Feedback forms

Don’t forget that your site now offers users the opportunity to give feedback on the content of each page, so you should periodically check any comments you have received and make any necessary updates to your site. A quick check suggests some of you
haven’t downloaded any comments since the option was added over two months ago. To download their comments go to ‘Feedback’ on the Sitewide Content tab on the Manage Content screen on your site. Further guidance on doing so is now part of the UAS Mosaic Manual.
 


Bugs

Please note that you still should not publish content in bulk from the Manage Content screen – this risks some of your content being temporarily lost. If you need to publish multiple pages, go to the All Drafts tab, and use the ‘Change to Published’ link
next to each document.


Performance updates

The Mosaic team are working hard to improve the performance of the platform. One recent improvement is to increase the memory used for administrative functions, which should reduce the frequency with which you see the ‘temporarily unavailable’ message
when saving the page – though it is still always good practice to save your progress regularly.

Bug affecting taxonomy term editing:

Since the last update, we have discovered that while editors can create taxonomy terms, they are not currently able to edit, reorder or delete them. This is a bug that needs fixing so we advise that you create the terms you need and you will be able to amend these, if required, once the bug is fixed.


Look & feel requiring no action:

Improvements to the way headers are displayed on mobile devices has now been completed.


Dropdown list widget:

An example of the dropdown list widget referenced in the last update can be seen at https://site8.web.ox.ac.uk/dropdown-list-widget-demonstration. The dropdown list here may help the user find the Part they want more quickly than locating it in the main list lower down the page – for example if they know they want the Part on the Talbot Trust but can’t remember the number, they can type ‘Talbot’ in the box and, a link to the relevant Part is given. Note that the ‘search’ only looks through the titles, and not the content of the pages to which they are linking. The dropdown list is populated by filtered, selected, or static content (as with a grid), and can be used in Region 2 or 3 (so can be used as an alternative to a long menu if you want to provide links to other pages). In this example we have not included a link for every Part. If you think this would be useful on any of your pages then ask about including it in one of your templates. Please note that if you want to include it on an existing page it may be necessary to rebuild the page.

New bug affecting accordion editing:

At present it is not possible to change the order of sections in an accordion using the ‘drag-and-drop’ arrows as these are not currently displaying. You can still order the sections using the ‘weights’ (which you can show by clicking the link in the top right corner of the widget) but if you have numerous sections the titles will not display so you will need to look at the live page to note which section to move to which position before you go to the editing screen


Ongoing bug problem with bulk publishing content

  • We previously reported that there was a bug by which publishing pages in bulk from the manage content screen caused some previously saved content to not display on the published version. Please note that this issue is not yet resolved, so please continue not to take this action. If you need a quicker way to publish pages than opening the edit screen of each page individually, you can select the ‘All drafts’ tab from the content management page, and click the appropriate button(s) to publish the unpublished page(s) you need to.

  • Don’t forget that if you do lose content when saving it – or if you just regret an edit which you made – you can revert to previous saved versions of the page. Go to the edit screen for the page and select the ‘Moderate’ tab. If the page is published you will see an option next to each previous version to revert to that. If the page is not published, publish the most recent version (even if you know it is wrong) and the option to revert will appear next to older versions and you can choose one. There is a ‘view’ button next to each old version so you can see what that page looked like and check you have the right one. 


Deleting taxonomy terms:

It is now possible to delete individual terms within taxonomies.


Look & feel requiring no action:

When you create a table you will see fewer options than in the past. This is because some of the options are ignored by the UAS table styling, and also to ensure that the table is not created with a fixed size (previously you would have needed to clear the options or set them to 0 – now this is done automatically without needing your input). If you think you need a table (or column within the table) with a fixed width, then speak to us about how this can be achieved.


New feature – a dropdown list widget:

A new feature has been developed which enables you to create a dropdown list of pages from which the user can select and then link to that page. This list can be populated using filtered, selected or static content, in the same way that you choose how a grid on a landing page is populated. This is an alternative when the user is likely to know what they want, or only one option would be relevant to them, and they could easily find it in a list, rather than reading through the cards on a landing page. This grid can be positioned in either Region 2 or Region 3. If you think this would be useful to you then please speak to us about it. Please note that it is unlikely that it can be added to an existing page so a page would likely need to be rebuilt.


Feedback forms:

  • Feedback forms will soon be available on all sites for your users to anonymously indicate whether or not a page was helpful, and in what way it did/didn’t meet their needs. Feedback you receive is collected on your site and you should download it periodically – submissions are kept for the last six months only, and only 2000 submissions are stored. To download the responses go to Manage Content > Site-wide content > Feedback. Click ‘Feedback form submissions’ to open that section. Select what data you want to download and in what form, and then click ‘Download feedback submissions’.  
  • Note: this feedback form differs from other web forms which are intended to collect specific information. If you need to include a different type of web form on your website, please contact the project team.

Changing your pages without breaking your links:

If you have a page which you need to update, but want to switch to a new template, you will need to make a new page. There is now a manual on the project website that outlines the steps to follow to ensure the change does not result in broken links to this page.

Bug fixes:

  • When images are replaced in the image field, the thumbnail is now correctly updated as well

Look & feel requiring no action:

  • The style of the header on mobile devices has been improved to make navigation more intuitive

  • The position of the search bar can be raised, giving more space for the level 1 navigation titles if required

  • There are no longer restrictions on the dimensions of listing images (although a file size limit still applies)


Improvements that might require action:

  • Block quotes will now style to the correct font automatically because we can now configure this in the site settings.  This means you no longer need to change the style to ‘address’.  If you already have block quotes on your website, please change the style of these back to ‘normal’
  • SVG (scalable vector graphics) files can now be embedded in WYSIWYG widgets.  See further guidance
  • The message that a user sees when they cannot access content because it is behind SSO (and they are not logged in) or it is unpublished and can only be accessed by website editors (this is different from the ‘404 message’ received when users try to reach a non-existent webpage) is now editable at the site settings level. The project team will update this with a suitable generic message on all sites (once wording has been agreed) but if you want this customised to suit your specific needs please get in touch

  • Feedback forms are now available for users to anonymously indicate whether or not a page was helpful, and in what way it did/didn’t need their needs. It is the intention of the project that these will be included on all sites, so will be turned on as standard. However, editors can switch this off on a page-by-page basis via the details section of the page.  Note: this feedback form differs from other web forms which are intended to collect specific information. To include a web form on your website, please contact the project team

  • You will now be able to easily see where items in your media library (files and images) are displayed on your site via Manage content>Files and then follow the ‘Show usages’ link


Images:

The information below has been added to the advice on the project website regarding images and how to credit them in Mosaic - https://projects.it.ox.ac.uk/image-management-mosaic.  Information about naming images is available in the Writing for UAS websites guidance.

  • Alt text:
    • Compulsory – compulsory for accessibility reasons, as this is read by screen readers & search engines.  It should be used to describe an image or explain the contents of an infographic.
  • Title text:
    • Text that appears when you hover over the image but is required when you need to credit the copyright holder when the image is displayed outside a WYSIWYG widget, in other words in a grid, listing or banner.
  • Freetext tag:  
    • Optional - if you apply tags to images you can search by tags in the media library.
  • Caption:
    • Optional - describes the content of the image and you have the option to display this in WYSIWYGs or image galleries.
  • Attribution:
    • Optional - for crediting the copyright holder and you have the option to display this in WYSIWYGs or image galleries.

 

There has been no additional functionality released onto the Mosaic platform this week and the next release will be on 20 June.


Point to note

  • If you are using social media icons you will see they have now been moved from the bottom of the main part of the page (region 2) to the right hand column (region 3) of your templates
  • In your footer check that you haven’t left extra returns below the text.  This impacts significantly on the user experience on mobile devices – leaving big gaps between content
  • Remember to use the Alternative WYSIWYG in region 3 of your pages (the right hand column) and ensure you delete any blank lines from this region too
  • Remember to consult all the content owners/experts on your site before transferring content across to Mosaic so that you ensure that their needs are met
  • The Navigation manual has now been added to the project website to help you build the navigational structure and set up menus on your websites.

Bugs:

Please do not delete widgets from templates – this activity is currently possible because of a bug.  By deleting the holding text in the content area of a widget you will ensure that the widget is not displayed on your page and the page will re-size to accommodate this.


Look & feel requiring no action:

  • Amended spaciousness in grids and carousels to match the original designs.
  • Left hand menu displaying in upper case.
  • Links in top header have moved to the left.
  • Table style amended to match the original design.

Improvements that might require action:

None

Bugs

  • The font and colour configuration for tables is currently not working in tables inserted into a tab widget – no action is required as this will be updated when the bug is fixed.
  • If you are creating a landing page with multiple static cards please save them regularly – we suggest after 3 to avoid a bug where your content can be lost.

Look & feel requiring no action

  • The font, colour and style of Mosaic tables have been updated to match the original UAS designs (but see bug mentioned above).
  • When viewing tables from a mobile device you will now be able to scroll across enabling you to view each column of information.

Improvements that might require action

  • Icons in WYSIWYG widgets: Using the Insert Icon flag icon you can also now add Font Awesome icons more easily into your content.
  • Information and warning alert boxes in WYSIWYG widgets:  You can now highlight text in your webpage by inserting an Information or Warning alert box by clicking on the Snippets icon (third from left top row). You should use the ones titled ‘(alternative fonts)’ and these should replace any you previously put in which have the standard styling.
  • Footer: Editors can now edit the footer for their website via the Site-wide content menu (or via the Quick Edit option on each page). The footer is in two sections. The bottom section in dark blue (labelled Region 4 in the editing area) should not be changed. The lighter blue section above it has four columns. The content in the first column (labelled Region 1) is for your section's contact details - PAD's address has been added to all sites to show how it should be formatted - and the fourth column (labelled Mandatory Links) has already been set up with university-wide links. The middle two columns (Region 2 and 3) can be used as you feel appropriate. They carry place-holding content, but only to indicate the styling and suggest what you might include, and the content can be whatever you feel is appropriate. Note that the footer is the same on every page of your site.

Please note

  • In WYSIWYG widgets make sure you use sub-headings and, where appropriate, columns or bullet points to make text less dense and easier to read.
  • When you link to files in your content, insert the file type in brackets after the link using letters not icons. For example, ‘Mosaic Manual (PDF)’
  • If you use a template that includes Region 3 (the right hand column) but leave that region blank, your page will have a blank space where the right hand column would have appeared. We would normally expected to see some relevant content, such as related links, in Region 3.
  • Remember to use the Alternative WYSIWYG when creating reusable content so the text is the right size in the right hand column (region 3) of your page.

Block quotes

If you need to include a quote from a person or organisation (though this should only be used in exceptional cases), you can use the block quote option in WYSIWYG widgets. You should change the text format from Normal to Address in the paragraph format selection menu.


Landing pages

All pages that will appear as cards on a Landing Page should include a call to action button even if that links to the page itself.  The call to action text and link are inserted under Details>Listing Setup on the page to which the Landing Page will link.


Images

  • We have now consulted with the University’s legal team so have been able to expand the online image guidance (behind SSO) to include instructions on how you should display picture credits on your Mosaic websites. Text has been added to the Picture Credit page in the footer of each site to credit Font Awesome for use of the icons, and to link to further legal information on the main University site. Remember that you must comply with the law when showing images on your website, specifically copyright and the data protection laws.
  • If you require images for News items on your websites, please contact Julia Heitmann who can give you access to recent photographs from across the University commissioned by the project for use on UAS websites.

Embedding YouTube videos

Some website builders have asked about embedding a video from YouTube in to their site. Follow these steps:
 

  • In the WYSIWYG, click the 'Insert Image or File' icon at the place where you want the video to embed.
  • Click 'Browse', and then 'Upload from web' in the top right corner.
  • Paste the url for the video in the empty field - i.e. the address from the navigation bar, and not the 'embed code' provided by youTube. Click 'next' – it may take a short while to move to the next step - and then 'save', and then 'next'
  • Change the alignment position to 'Center' and click 'Embed'.

Videos should be uploaded to YouTube, and then use the embedding feature, rather than hosting them on Mosaic or Sharepoint. Dedicated video hosting sites provide a much better user experience, so even if it may seem time-consuming to upload it, the effort is worth it.

 

Bugs

  • You should still not bulk publish items from the ‘Manage content’ menu as we have not solved the bug that causes content to disappear.  However, under the ‘all drafts’ tab you can use the quick link next to each unpublished content item to publish it without having to open each individual page to do so.
  • Level 1 navigation titles in the header might not appear upper case automatically if you are using the mega menu.  Until this is fixed you might see some in upper case and others in mixed case.


Look & feel requiring no action

  • Text in bulleted lists now aligns with the bullet indentation.

  • Level 1 navigation titles in the header should now be upper case - this will work automatically (but see bug mentioned above). 

  • The styling of tabs on the tabbed content pages template has been updated to match the original UAS designs more closely.

  • The mega–menu has been tweaked to make it more user friendly.


Improvements that might require action

The circle numbered list is now available.  This has been designed specifically for displaying processes. First create a numbered list by clicking the relevant icon above the WYSIWYG area, and then with the list text highlighted select ‘1-col Circle Numbered List’ (or ‘2-col…’) from the Styles options. Further guidance will be available shortly.


Left hand menu

All templates now default to the left hand menu being switched off. You only need to switch it on for pages that sit deeper than three levels in your navigation and are therefore not visible in the mega menu. It should not be displayed on landing pages. To turn it on, uncheck the ‘hide sidebar menu’ option in the ‘Details’ tab when editing the page. It is also there that you can turn it off (by checking the box) on pages you have previously made.


Titles

You should input all your page and menu link titles into Mosaic with the first letter upper case and the rest lower case unless the word is a name or proper noun.  (All Level 1 navigation titles will automatically be changed to upper case in the header once the bug mentioned above is fixed.)


Further advice:

  • We recommend that you use Chrome as your web browser for editing in Mosaic.
  • Every page needs a subtitle.
  • Start with content pages, not with landing pages.

Tabs, accordions and buttons

Please ensure all tab titles, accordion section titles and wording on buttons and calls to action are in UPPER CASE.


‘Information’ and ‘alert’ boxes in WYSIWYG widgets

We initially asked you to only use the information box in alternative WYSIWYGs in order to distinguish them from the main body text. However, adding alternative WYSIWYGs for every possible template has proven impossible very quickly, so we have now asked for further development from the Mosaic platform team. Going forward, you will be able to insert an “alternative info box” into any existing WYSIWYG, without having to change the entire WYSIWYG to be alternative. This functionality is expected to be developed in time for go-live.

Until this is available, please use the original template and put in a placeholder where you require information boxes.  Once the new functionality is available you can update the placeholder with the correct snippet style (the snippets icon is 3rd from the right on the top row of WYSIWYG icons). The placeholder can either use the current snippet styling (which is not correct for UAS websites) or basic text.  We recommend you keep a record of all instances (maybe add an extra column to your webpage checklist) so you ensure you update them all.  NOTE: when inserting a snippet you should uncheck the box ‘replace all existing content…’ or all existing text in the WYSIWYG content area will be deleted and replaced by the box.

If you have already created information boxes using the alternative WYSIWYG, you do not need to change them, but you might want to use placeholders for future information boxes.


Landing pages

We advise that you do not activate the left hand menu on landing pages as this is not part of the design.  Apologies if this was not made clear.


Spacing of content on webpages

Some people have experienced inconsistent vertical spacing on webpages. Be aware that spacing between widgets is controlled by the top and bottom margin display option on each widget. Make sure you use these consistently to improve the look of pages. Also, check that you do not have any unnecessary returns at the bottom of your text that is expanding the space between content.


Region 3, the right hand column

Remember to use the alternative WYSIWYG for widgets that you want to display in region 3 (the right hand column of the page)


Edits not appearing

Sometimes it appears that the changes you have made have not been activated after you save the page. If you experience this, press “Shift” and “F5” to clear the cache (which helps limit the load on the Mosaic server by not showing every change immediately). This action will usually make your edits visible.


Taxonomies

You do not have to include taxonomies on your website. These are not picked up by search engines but are a tool to help you organise your content or allow visitors to your site to filter what they see.See further guidance at https://projects.it.ox.ac.uk/files/uasmosaicmanualtaxonomiespdf.


Images

We are currently seeking guidance on best practice from PAD (Public Affairs Directorate) regarding accreditation of images on UAS websites. Once this has been received we will update the image guidance. Please be aware that the text that appears when you hover over an image is the ‘Title text’ that you insert when you upload that image into Mosaic.


Reusable content

When creating reusable content note that the widget into which it is inserted only allows you to insert one piece of content. You therefore can’t insert both reusable content A and reusable content B – if that is what you want to show through the reusable content option you need to create a third piece of reusable content which includes both content A and content B.


A-Z pages

When creating A-Z pages using the templates, note that the links which are included in the templates are place-holders and will need to be updated – both the links from the letters to the relevant sections, and from the ‘back to the top’ link in each letter’s WYSIWYG. These links should be updated using the widget id which is displayed when editing the page. More details on links is available at https://projects.it.ox.ac.uk/files/uasmosaicmanualaddinglinksinandoutsid... but if you need help with these then let us know.


Description box

On the details tab for each page is a ‘Description’ field. This is intended to be completed with a short summary of the content of the page, not more than 160 characters – it is this line which will likely be displayed by search engines and will therefore help the user understand whether the search has located the page they require. More information about the page description can be found in the writing for UAS websites guidance.

 

Bugs

  • You should now be able to add menu links to your webpages without losing content when you save the page.
  • You should still not bulk publish items from the ‘Manage content’ menu as we have not solved the bug that causes content to disappear.  However, under the ‘all drafts’ tab you can use the quick link next to each unpublished content item to publish it without having to open each individual page to do so.

Look & feel requiring no action

  • Some widgets have been narrowed so they now align with other page content, for example tabbed content and the metadata widget which displays information at the top of news articles, event listings and a person’s profile page. These settings will be changed in the templates, but the project team will update any pages you have already created on your websites where necessary, so do not be surprised if you see that we have edited your pages in this way.
  • Links in the WYSIWYG widgets will now show in a different colour so they stand out more from general text.
  • The background colour for some widgets on the home page and visual landing page will be amended to better match the original designs.

Improvements requiring no action

  • When using the Linkit content selector to pick event content, each event's date is now displayed after the event title, to help distinguish events which have the same title

Improvements that might require action

  • A ‘bullet-less’ list has been introduced, to allow you to create lists which do not have bullet points, numbers or link list icons at the start of each line. Create a bullet pointed list as normal, but then select ‘bullet-less list’ from the style options in the WYSIWYG’s toolbar. Creating lists in this way, rather than using ‘normal’ text formatting, allows you to create columns within your list and these will be responsive if the page is resized (for example when viewing it on a mobile phone). These were not developed for UAS, so we do not expect you to use them at the moment, but do let us know if you have a use case for them.
  • You can now display the caption and/or attribution beneath an image in a WYSIWYG widget. The image caption and attribution is set up when adding the image to the file library – but can be added/edited retrospectively using the ‘manage content’ menu. When embedding a picture you will be given the option to show either or both the caption and attribution. Alternatively, when embedding the picture you can give a custom caption – one which is different than that generally set for the image – thus allowing flexibility if the image is used in different contexts.

Other information that might require action

  • Multiple grids/lists on one page
    • At present the templates do not allow you to display two separate grids or lists on a single page, for example one showing events and the other news items.  This is because if multiple grids are available in one template both will be visible even if one does not contain content (unlike an empty WYSIWYG widget).  When a grid is not populated the page will display ‘no Items found’ or a blank holding image. If you want to have more than one grid on a page, please request this from the project team and we will build a new template for you. Please specify how many grids you require.
  • The ‘info’ and ‘alert’ boxes
    • We initially asked you to only use the information box in alternative WYSIWYGs in order to distinguish them more from the main body text. However, adding alternative WYSIWYGs for every possible use case has proven impossible very quickly, so we have now asked for further development regarding these snippets. Going forward, you will be able to insert an “alternative info box” into any existing WYSIWYG, without having to change the entire WYSIWYG to be alternative. This functionality will likely be developed in time for go-live.
    • Until this is available, please use the existing templates and put in a placeholder where you require information boxes.  Once the new functionality is available you can update the placeholder with the correct snippet style. The placeholder can either use the current snippet styling (which is not correct for UAS websites) or basic text.  We recommend you keep a record of all instances (maybe add an extra column to your webpage checklist) so you ensure you update them all.  NOTE: when inserting a snippet you should uncheck the box ‘replace all existing content…’ or all existing text in the WYSIWYG content area will be deleted and replaced by the box.

Look & feel requiring no action

  • Some heading formats will have been changed to the correct font.
  • Alignment options in information cards are available.
  • Information cards have rounded corners.
  • Link lists now align correctly.

Improvements requiring no action

  • Enhancements to the Mosaic platform to improve editing speed.
  • Mega menu now available.
  • The additional button colour option in now available on alternative WYSIWYG widgets (as well as standard WYSIWYGs)
  • Font Awesome 5 icons are now available (updated from version 4).
  • New template is available Content page - text - alert & info WYSIWYGs which allows you to create an information box on your page, for example to highlight specific text.

Improvements that might require action

  • Have you already created content pages that need an information box?  If you have, you will need to re-create these pages using the new template Content page - text - alert & info WYSIWYGs.  This new template is required because the information box uses the alternative WYSIWYG formatting.  Apologies for any inconvenience this causes.
List of site pages