Skip to content
Open menu Close menu

Template user guides

In 2015 the Web Team introduced new responsive page layouts designed to reflect the University's brand guidelines, which are being rolled out across the University website. 

These page layouts are very flexible, which means they can be used across the website, avoiding the need for dozens - even hundreds - of bespoke layouts. 

One of the major benefits of this is that when minor or major redesigns are needed in the future, the changes only need to be made to a couple of templates, whereas in the past it has been a very big job.

We've created a suite of University of Bradford 2015 content types that work in the new layouts, and we ask that you stick to these content types. There will of course be exceptions, but these need to be discussed directly with the Web Team.

Image sizes at a glance

  • Banner: 720x310

  • Within standard content or Show/Hide: 720x310 to cut across whole page and break up content (this will automatically be resized in a 3-column layout). If floating to the right of a page, a width of approx 250 works well. Use your judgement but make sure it looks in proportion to the text.

  • Rollover Block 50%: 353x239

  • Double Panel CTA: Width: 400 for a picture on the left, 320 for a picture on the right. Height: depends on how much copy/how many bullet points you are putting on the other side. Anything from 100-350)

  • Highlight Content Box: Images should be avoided, but sometimes work as a small image floated to the right or left.

  • Square Buttons (3 row): 230x173

  • Quote Box: Either 250x250 or 150x150

  • Profile: 250x250 for the main profile picture. Within the profile, use the same as standard content.

Structure

Template user guide: Structure.

Your website is made up of a home page (in this example Study at Bradford), and sections within that. Sections will appear on the left-hand menu unless they are Pending (yellow background), Inactive (red background) or Hidden (grey folder icon instead of yellow).

You will always have a Hidden or Trash folder, which is inactive and hidden. You can drag any sections you no longer want into this section and they will not appear on your live website.

Each section (in this case Study at Bradford) is made up of several different elements:

  • The main section folder. This is where most of your content lives. Below that:

  • You will always have a Banner folder. This is where your image or rotating banners which appear at the top of the page can be found. Each section needs its own Banner folder and content within it.

  • In a three-column layout you will always have a Right hand content repeating folder. This contains the content that appears on the right hand side of the page, underneath the banner. It could include calls to action or a Twitter feed. If you want the same content in your right hand column throughout your website, you only need this folder at the highest level. If a section has its own Right hand content repeating folder it will overwrite the higher-level content for that section.

  • In a three-column layout you can use the Full Width Content folder for content you want to stretch across the page, underneath the right-hand column. NOTE: You must have enough content in the home page section to reach the bottom of the right-hand content.

  • Any further sections within your website, each of which can have its own Banner, Right hand content repeating and Full Width Content folder.

Page layouts

There are two page layouts.

  • UoB 2015 2 Col
  • UoB 2015 3 Col

If you want Right hand content to appear, you need to use UoB 2015 3 Col.

Otherwise, use UoB 2015 2 Col. Content in the Right hand content repeating folder won’t appear on two-column pages.

To change the page layout, go to Site Structure and choose ‘Modify Section’.

Go to the ‘Page Layouts’ tab.

Template user guides: Page layouts

Ignore everything except for the last row of drop-downs.

If you want the same layout on the current page and each page below it, just change the Page Layout column.

If you want a certain layout on the current page, and a different layout on the ones below (e.g. if you only want the Right hand content appearing on the landing page), change the Inheritable Page Layout to the layout you want on the sub-pages.

Then remember to click ‘update’ to save the changes.

(Ignore the other UoB 2015 layouts - these will only be used with the Web Team’s assistance.)

Three column layout (UoB 2015 3 Col)

 Using Banner, Right hand content repeating and Full Width Content:

Template user guide: 3 column layout.

Banner

There are two content types you can use: Rotating slider or Static cover image.

They must not be mixed, so decide whether you want the page to have one single image, or a slideshow of banners linking out to other sections (usually advertising news, events, or promotional items).

Rotating slider

The rotating slider content type must always link out to a different section.

To create a banner like this:

Template user guide: Banner with description box.

This is how the Banner - Rotating slider content type should be filled out:

720 x 213

It uses the Description and Description box fields.

The first word, or possibly first two words, should be made bold, which will make it stand out like the word ‘Vote’ above. The example above shows the most content you should have in this box. Choose your words wisely!

If the words you are highlighting are long (e.g. University), make them italic instead of bold.

To create a banner like this:

Template user guide: Banner with description and title.

The Banner - Rotating slider content type should be filled out using the Description and Title fields:

720 x 193 ‌‌

When choosing and cropping an image to the right size, bear in mind which fields you will be using and how these will work with the image. For example, if you are going to use the white description box, make sure it won’t be covering up anything important.

Static cover image

Most pages will use the static cover image content type. This doesn’t link out to any other sections, but you can choose to include the white description box for a title, or key fact - use the field Description. If you leave this field blank it will simply be an image across the top - so choose something striking!

Template user guide: Static cover image

 

Full Width Content

If you have a lot of content on one page and you also have right hand content, the Full Width Content folder means you are able to use the space under the third column. Without it, you end up with content squashed into the middle, as below:

Template user guide: Squashed content.

Moving all the content from EEA* and Swiss Students down to the Full Width Content folder means it will spread out under the third column and use the space more effectively:

Template user guide: Full Width Content.

Note: When previewing content in Full Width Content you should preview from its parent section

Right hand content repeating

Content for the third column should go into this folder. If you want different content for sections within your website, each section should have its own Right hand content repeating folder, otherwise whatever’s in the level above will appear here.

Content in this folder should generally be Calls to Action, rather than using it as a second menu. E.g. book on an event, contact us, download this. It is also the most obvious place for a Twitter feed, if appropriate.

Template user guide: Right hand content. Calls to action should use the Right Hand CTA content type.

External links use the template’s darker colour, while internal links use the lighter one.

Try to make sure the content in this column isn’t longer than the main column. (Otherwise it looks like this!)

Content types: Standard content

Most of your website can be created using standard content. Each page will begin with a piece of standard content - even if it just has the <h1> heading.

Each new heading should be a new piece of standard content. This gives you more flexibility when moving content from one page to another, mirroring it, or moving it into Full Width Content.

The page below has two pieces of standard content on the section page (What is it? and Why is it important…?), two pieces of standard content in the Full Width Content folder (What will it consist of? and What will the outcomes be?), and in the Right hand content repeating folder the Twitter widget is page code, and the social media icon links are standard content.

Template user guide: Standard content.

Content types: Highlight content box

The highlight content box is for supplemental information on a webpage. It can be used for links to more information, for brief contact details, for a temporary notice, or to do exactly what it says on the tin - highlight content.

Template user guide: Highlight content box.

Template user guide: Highlight content box 2.

They shouldn’t be used for large amounts of information, and you shouldn’t have lots of them on one page - it strips them of their ability to highlight!

If you have a page with lots of different bits of information that you want to separate, you may be better off using Show (Max)/Hide (Min) Content.

Content types: Show (Max)/Hide (Min) Content

This content type is ideal for avoiding lots of different pages within your website containing short pieces of information, and to avoid one page appearing to go on and on forever with large amounts of information.

Each piece of Show (Max)/Hide (Min) Content is effectively a combination of a piece of standard content and a highlight content box.

Template user guide: Show hide.

When using it for a FAQ page (which it works well for), please switch the heading size to H3.

Template user guide: FAQ

Content types: Image Gallery and Video Gallery

Features

  • Responsive
  • Image thumbnails are automatically generated and sized (they need to be created for video items)
  • Can use in a mix of content, e.g. can put headings in between rows of thumbnails (see 'Your Memories' example below)
  • Can include captions

Examples

Where to use it

This responsive image and video gallery can be used when you want to create a showcase - such as student work or facilities - or to bring together a collection of photos and/or videos from an event.

How to use it

You will add a new piece of content for each item in the gallery. This way you can mix and match images and videos.

In the T4 site structure, find the page you want to add the gallery to. Choose 'Add content':

Image Gallery content types.

Select 'Image gallery'.

  • Give it a name that will help you identify the image in T4. For example, if you need the images to be in a specific order, put numbers at the beginning
  • 'Choose file' - locate the image on your computer. You need to already have resized and edited the image (ideally using 'Save for web' in Photoshop) before adding it
  • If you want to include a caption tick 'Yes'
  • Write in the caption. If you use any special characters, including quote marks, you need to use an HTML code (ask the Web Team for help if you need it)

Image Gallery add content.

And repeat!

To add a YouTube video use the 'Video Gallery' content type.

  • Create a thumbnail, which will ideally be 150px high. If it's slightly bigger it will be automatically resized (but large file sizes will not work)
  • Open the video on YouTube in your browser, and copy the code at the end of the URL:

Image Gallery YouTube code.

 

  • Copy the code into the 'YouTube code' field
  • 'Choose file' to add the thumbnail from your computer
  • You can add a caption, but it works best if you don't have one on the videos

Image Gallery add video

When you preview the page, the thumbnails will appear but you won't be able to see the pop-up gallery until it is published. Unfortunately you'll just have to trust that it works! Make sure you check the next morning.

Image gallery preview.

Check out the examples above to see how it works in practice.

Content types: Rollover block 50%

This content type is good for landing pages where you want to link out to a few main sections. It should only be used on 2-column layouts, or in Full Width Content in a 3-column layout.

You need to use an even number, up to a maximum of six. Four is optimal.

Each image needs to be 353x239px. The title needs to be short and clear. The description needs to entice your reader!

Template user guide: Rollover block

Content types: Double Panel CTA

This content type is another good one for bold, graphical landing pages. You can just use one, or several. It can only be used in 2-column layouts, or in Full Width Content in 3-column layouts.

If your image is on the left, it should be 400px wide, on the right it should be 320px wide.

Choose the height based on how much copy you’ll have in the other panel (for example, the third picture below is too short).

Template user guide: Double Panel CTA.

Template user guide: Double Panel CTA too short.

Content types: Quote box

For quotes from students/businesses/experts.

There are two options - the standard size quote box, with a 250x250px picture, or the small quote box, with a 150x150px picture. If using the latter (e.g. if you only have a one line quote, or you don’t want to use a picture at all), change the ‘small picture’ dropdown to ‘Yes’. If you have a full profile elsewhere on the website, please link to it.

Template user guide: blue quote box.

The colour of the text box changes depending on the colour palette your website is using.

Template user guide: red quote box.

 

 

Content types: Profile/Display Profile

All student profiles must be created using the Profile content type.

Use a 250x250 picture - which you can then use in a quote box as well.

Each profile is created as a child branch of a section.

Template user guide: Profile site structure.

Title should be the course the student is on.

Profile Intro works best as a few bullet points.

Profile Body works exactly like standard content, so feel free to include pictures and headings.

The section the profiles will display on (e.g. Meet the team) needs a heading in standard content, and then the ‘Display profile’ content type. This will automatically pull in every profile within that section with a picture, introduction, and a ‘View full profile’ link.

The Profile content type also works well for staff profiles/contact lists. You can either have a full bio, as above, or leave Profile Body blank and use Profile Intro for contact details.

Template user guide: Meet the team.

Content types: Square Buttons (3 row)

For landing pages that don’t need much copy and need to direct off to a number of pages that happens to be a multiple of three.

As the user doesn’t get much information about where they’re about to head to when they click on the box, use sparingly. Make sure the picture and title is very clear.

The images need to be 230x173px.

Template user guide: Square buttons.

Content types: News Item v1

If you have a news page, use the News Item v1 content type.

Put the date into the name field, as well as the headline. e.g. “20150609 Optometry students win awards”. (If it is in this format it’s easier to sort.)

The Title is the headline - remember to make it search friendly (e.g. Bradford optometry student wins Duke of York award)

Output URI should be the headline but with no capitals and hyphens instead of spaces.

Always use the Override Date field so the date won’t change if you make any amendments to the news item later on (e.g. correcting an error, fixing a broken link). It should be in the format Tue 21 Jul 2015.

Please use an image wherever possible. The default image will be the thumbnail, so it doesn’t need to be large (250px wide is a good starting point).

Introduction Summary should be the first line of the story - don’t repeat it in the main content or it will appear twice.

Main Content - this is effectively standard content, so add pictures, links and extra headings if necessary. Make the images in this section big and bold - you can even use a banner size (720x310) if it works.

Remember to preview! Sometimes the erroneous upside-down question mark can find its way into the Introduction Summary.

Content types: Events Item v1

Events should be created using this content type. Follow the same guidance as for News Item v1 for Name, Title, Output URI, Introduction / Summary and Main Details.

If you put an eventbrite link into Booking Link / URL it will automatically embed the eventbrite ‘register’ link, which works really well.

You can also place a booking form directly into the template - very useful if you use Salesforce, for example.

NOTE: All events created using this content type will automatically appear in the University-wide events calendar.

Content types: Page code

Want a Twitter feed, Storify or YouTube embed? Use page code.

Twitter: To embed the feed of a Twitter user, e.g. @UniofBradford, go to the profile, click the cog, select Embed this Profile, and create widget. Copy code.

You may want to change the widget height to 400 instead of the default 600px.

To embed an individual tweet, click on the three dots at the bottom of the tweet, and click Embed Tweet (highlighted below), then copy the code.

Template user guide: Twitter embed.

YouTube: Go to the desired video, click Share, choose Embed. Copy code.

Storify: Click the big Embed button - choose ‘Mini Header’.

To embed a blog post, embed.ly works well. If you embed a University of Bradford blog, it’ll appear like this on the page:

Template user guide: Blog embed.

Adding social media icons

To add links to social media, such as Twitter and LinkedIn, you can either add them inline like a normal link, or you might want to include icons - for example in a 'Contact us' box.

The best way to do this is by using the HTML icon and entering this code (changing the URLs to the relevant address):

<ul class="social_media">
<li><a href="https://www.facebook.com/university.bradford" title="Follow us on Facebook" class="facebook-icon" style="text-decoration: none">&nbsp;</a></li>
<li><a href="https://twitter.com/UniofBradford" title="Follow us on Twitter" class="twitter-icon" style="text-decoration: none">&nbsp;</a></li>
<li><a href="https://www.instagram.com/universityofbradford/" title="Follow us on Instagram" class="instagram-icon" style="text-decoration: none">&nbsp;</a></li>
<li><a href="https://uk.linkedin.com/edu/university-of-bradford-12687" title="Follow us on LinkedIn" class="linkedin-icon" style="text-decoration: none">&nbsp;</a></li>
<li><a href="http://www.youtube.com/user/UniversityOfBradford" title="Visit our Youtube channel" class="youtube-icon" style="text-decoration: none">&nbsp;</a></li>
<li><a href="https://plus.google.com/109408073873536018551/" rel="publisher" title="Visit our Google+ page" class="gplus-icon" style="text-decoration: none">&nbsp;</a></li>
<li><a href="http://www.thestudentroom.co.uk/forumdisplay.php?f=824" title="Join the conversation on The Student Room" class="tsr-icon" style="text-decoration: none">&nbsp;</a></li>
</ul>

This will look like this:

Your suggestions

If you have a suggestion for a tutorial or guide contact the Web Team at web-team@bradford.ac.uk

Best practice

Have a look at our best practice page for hints and tips on good web content.