Tag Archives: content management system

A Quick Guide to…Embedding Videos in T4

Posted on by

For University web editors who have gone through Go Mobile and are using T4 to edit their sites, here’s a refresher on how to embed video content.

In the new responsive template videos are embedded using the content type ‘06. External Media’. They should be hosted on a dedicated delivery service, eg YouTube.

Before embedding a video you should check that it relates to and supports your written content.

You should also check the thumbnail for the video. If it’s caught between frames or doesn’t seem appropriate, don’t use the video and flag the issue with whoever uploaded it to the channel.

Embed code

When adding a video to your content always take the web address from the video’s embed code.

Screenshot of protecting coral reefs video on YouTube

Protecting coral reefs video on YouTube

You’ll also need to make sure the option to ‘show suggested videos when the video finishes’ is unchecked. Otherwise you run the risk of unrelated videos, or worse competitors’ videos, being pulled into your page.

Screenshot of embed code for a video on YouTube

Embed code for Protecting Coral Reefs video on YouTube

Example

The video embed code will look something like this: https://www.youtube.com/embed/X_skPHdKQgA?rel=0

The code for the Protecting Coral Reefs video is X_skPHdKQgA, while the part of the code that ensures no additional videos are pulled in is: ?rel=0.

Adding to T4

When adding to T4:

  • add the prefix and name of the video
  • paste in the embed code to the Media URL field
  • add a caption to give context (limited to 50 characters)
  • don’t duplicate the video title in the caption if already displayed in the media player
  • select the most appropriate alignment for the video
Screenshot of video embed screen in T4

Screenshot of video embed screen in T4 (select to view larger image)

Alignment

On desktop, you can choose to align videos to the right of your content or make them full width so they stretch to the size of the screen.

We recommend using the full width option with caution, though – this often reduces the quality of the video. It can also look more cluttered and can make it harder for the user to find the answers to their questions.

On mobile, videos behave the same as images – stretching to fill the width of the screen and flowing below content.

Load time

We recommend that you only add one video per page. This is so that you don’t bombard the user with too much video content, but more importantly so that you don’t slow down the load time of the page.

Find out more

Check our T4 Moderator guide for how to embed external media (University login required).

Visit our website to find further advice and support about video hosting (University login required).

Related posts

Share this post:
Share

Usability heads in the right direction

Posted on by

We’ve built something new. It’s a widget for giving your web users easy access to clear directions for the location of your school/faculty/service.

It’s the efficient way for our lovely web editors to help potential visitors to the University.

It eliminates the need for paragraphs of vague/potentially incorrect routes to take:

  • roads
  • rail services
  • walking routes
  • cycling routes

Our new T4 content type is ideal for your website’s Find Us or Contact Us page.

How it works

If you’re seeking to add this content type, you’ll need to choose 14. Google directions.

We advise you add this to the bottom of your page, as it sits to the left under preceding content. Use it further up and people might miss something you’ve written that is important.

There are two boxes to fill out once you’ve selected this content type. The first is title, which should be filled out with:

DIRECTIONS: insert name of your school/service/faculty here

The second box relates to where you actually want to send your website users.

Because much of the university campus has the same postcode, you need to enter the building name and postcode.

An example for the Institute of Cellular Medicine, would be:

William Leech Building NE2 4HH

Then just update and approve your content and wait for it to publish.

What your users get

Your website users will see a search facility on the page with a Find Us button. All they need to do is add their address or postcode into the box and click on the button.

They will instantly arrive on a Google Maps page that will plot the routes to your location:

  • road
  • rail
  • walking
  • cycling
  • flight (if they’re far enough away)

Because it’s all done through Google, the information is constantly updated to remain as accurate as it can be.

It’s also a visual representation that takes you through the journey and works with GPS, instead of paragraphs that vaguely get your users here.

An example is on our demo site. Have a go applying it to yours.

Share this post:
Share

Go Mobile: the Story So Far

Posted on by

Our Go Mobile programme is up and running: 17, yes 17 (!) sites went live in September.

Phase 1 (our ‘beta/test/is this even possible’ phase) was a success. And because of this, we’re going to carry on and put the rest of our external-facing website through the programme.

Go mobile explained

Go Mobile is a project to make our website mobile responsive. This means it works on desktop computers as well as tablets and mobile phones.

But we’re not making things easy for ourselves. As well as adding a responsive design we’re also:

  • improving content – rewriting for mobile
  • updating assets – our new design needs higher quality images to support content
  • moving to a new content management system (TerminalFour – T4)

You can see some examples in action:

Oh no! Why have they changed everything?

Some of our feedback, particularly from University staff, has been unhappiness that we’ve changed or moved things. Remember we’re doing this for the greater good!

Our websites now work just as well on mobile as on huge desktop screens. Go Mobile is about improving access for all.

Key developments cover navigation, design and content

NAVIGATION

How you move through pages needs to be simpler and easier for mobile (smaller screens). Navigation is improved for those using desktops too. We’ve made sites shallower and removed redundant content.

DESIGN

Design enhances your website but doesn’t rule it. We’re always thinking about what our users want from the web content. For example, we’ve made sure that images are impactful and support our messages. But we’ve made sure that our template prioritises for you: on mobile, images shrink and drop under content.

Content

Text for mobile is written in short, easy to read paragraphs.  This helps when it’s stacked for smaller mobile screens.

We’ve also introduced styles like the introduction which helps to focus the point of the content on the web page. It’s allowed us to firm up our content standards. A paragraph should be around 20 words because this works better on mobile.

Even though this is part of writing for the web/writing for mobile, a lot of our changes are just about good writing generally.

So, how did we do it?

By magic of course! Well actually, a whole lot of design, technical and word wizardry.

We worked closely with colleagues in our IT Service (NUIT) as well as those in schools, faculties and central services.

We developed a brand new suite of training for our web editors. This covers editing in the new system, writing for the web, defining site objectives and using media (images and videos). We also introduced various tools to help you evaluate and improve content.

Find out what our web editors thought of the Go Mobile process.

Next steps

There are exciting times ahead. We’re turning attention to Phase 2. This is where we take the rest of the external website through Go Mobile. We’re planning to do this between January and December 2016.

It’s going to mean a lot of change for the team:

  • Agile ways of working
  • focused, time-bound project cycles to get through all the sites
  • extra staff
  • new office space

It’s going to mean a lot of commitment from our faculties and services. We need staff dedicated to developing their websites working with us and giving time for training on writing best practice and the new content management system.

We’d love to hear your comments on what we’re doing. Either comment here or use our feedback form.

Share this post:
Share

How Meaningful Titles and Descriptions Engage Site Visitors

Posted on by

As we move into our responsive design (and T4), we’re introducing ways to make our content work better for mobile and tablet users.

This means that our editors are changing the way they write web ‘pages’.  In fact, let’s scrub that. The web page doesn’t exist anymore.

You are not writing for desktop.

The way the content looks on your computer, in your browser, is not the only way that it will look.

Writing for our new responsive design

Some of our new content types have different behaviour depending on where they are used.

You should always check your content on other devices (or use this handy responsive design emulator).

Titles and navigation

Titles as a style aren’t new, but are important when writing content for smaller screens. They might be the only thing your reader sees. They can also appear as navigation and part of search results.

It’s important that what you write makes sense out of context.

News items called ‘Congratulations’ and sections called ‘Additional Information’ aren’t going to encourage people to read more.

Teaser content

We’ve introduced teaser content into some of our new content types. It’s used here as the text overlay on the Masthead.

An example masthead style of content. Full width image with text overlay.

It’s important that it’s meaningful. It should summarise the page content as it displays in this order on mobile:

Masthead shown on mobile. Overlay text shows first on the page. the image flows second.

This content could be the difference between someone reading the page or going somewhere else.

Descriptions

We’ve used descriptions in news and events for years:

description-news-list

Adding a short description to the news content types doesn’t appear on the news article page. It does appear in all sorts of other places where news is syndicated:

  • News grids
  • News lists

This micro content acts to entice your site visitor to read more – it needs to work for you.

This example is vague:

  • Title: Call for Papers
  • Description: Submit now

This example gives some context, you know if it’s for you and if it is, you want to read more:

  • Title: Call for Papers: Environmental Planning
  • Description: Submissions close on 31 October. The School encourages researchers to read the submission requirements.

Introductions

We’re aiming to make sure all core pages to have an introduction. The intro style works well on mobile. It pulls out (and styles differently) the first piece of content.

We recommend a focused 50-word statement about what the page covers. It helps users decide whether to read more. (50 words sit well as a chunk of content viewed on most mobile screens.)

Expandable/mobile collapse

We’ve a new expandable content style that allows us to hide content. Users have to choose to select to read the content – they can’t see it at a glance.

This means that the heading you choose for the content is important:

Example expandable content - users have to click to see more.

We don’t want to see vague terms like ‘More information’, ‘Additional details’, ‘Other’.  If the content contains details about your facilities call it ‘Facilities’ or even better ‘Libraries and laboratories’.

Using terms that are more specific, help your readers find what they need.

Write chunks of content

We’ve had some comments about how it feels more complicated and takes longer to build up web content.

Writing for mobile forces you to think about the order of your message.

We could have slapped a responsive template on your desktop-focused content. If content was too long we could have hidden it in expandable boxes (or truncated lengthy titles).

The page would still look okay on desktop (it wouldn’t work very well on mobile).

Rewriting your content and thinking about how people read on mobile, makes sure your users don’t get a sub-standard experience.

Everyone who wants to read your message, can.

Get in touch

Let us know if you need help in reworking your content (University Login required) or post questions in the comments.

Share this post:
Share

An Introduction to the Language of T4

Posted on by

Through the Go Mobile programme we’re replacing the tools we use to publish websites. Here’s a quick introduction to some of the terminology used in the new systems.

Content management system (CMS)

A content management system is a tool that can be used to add, edit, publish and maintain websites.

TerminalFour (T4)

T4 is the University’s new content management system. It is currently used to publish the undergraduate and postgraduate prospectuses, and sites on research.ncl.ac.uk and conferences.ncl.ac.uk.

As part of the Go Mobile programme we will migrate all external facing sites into T4.

Section

A section is a folder in the Site Structure. It is a container for the content that appears on your website as a page. Your site is built up a number of sections in a hierarchy.

Branch

A branch is a section and its sub-sections.

T4 sections and branchesContent Type

A content type allows you to create some content in a particular format, eg a pullquote, a button, or expandable content. Each content type has a customised form with fields for you to enter your content into.

Some content types contain a TinyMCE – this is the content editor interface (a bit like word) that lets you format your text.

This is the T4 content editorWorkflow

A workflow is an approval process that a piece of content can go through before it is published. Workflows will be set up in consultation with site owners.

Media

Media refers to all files uploaded to your site, ie images and documents. The media for each site is grouped together as a category in the Media Library.

Channel

The channel is the method of publishing content as a page on a website.

Share this post:
Share