Category Archives: Tools

Editing Images for Use on Your Website

Posted on by

Last week, Jane wrote about how to improve your website images and videos. Her post focused on image selection and placement. Go and read it if you haven’t already, it’ll set you up for what’s to come.

Welcome back.

In this post I’m going to cover some tips for editing images for your website.
Our new template has a much more visual feel than our current design. There are a number of ways you can use images to enhance your written content.

Grids

These can include landing page and news grids.

Example of a homepage gridMastheads

Mastheads provide a visual opener to a page. The image slider used in our current design gives a similar effect.

Example of a mastheadIt’s a full width image with a text overlay. This means that you need to think carefully about where the focus of your image lies. If it’s on the left of the picture then it’s going to be obscured by the text. We’ve got a visual guide to the safe zones which highlights where the danger areas are.

Details of safe zones for a masthead imageThe safe zones logic applies to the image slider in the existing template too. An example of this in use is the Newcastle University London website.

Content images

You can also add images into the main content area. The default alignment for these is on the right (like our current design). On mobile they stretch to fill the full width and flow below the content.

This behaviour requires landscape images. If you’re using our current template we recommend you use landscape images too – this means your images are more likely to be reusable in the new template.

Tools for cropping and resizing images

We’ve assessed a variety of online photo editing tools and found one for you that’s easy to use and retains the high quality of your original photography. It’s called Fotor.

See our image guide (University login required) for details of the required sizes for each type of image and a step-by-step guide to using Fotor.

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

Fix Broken Links and Misspellings with Siteimprove

Posted on by

Broken links and misspellings in content harm the credibility of your website. They have an impact on – search rankings, user experience, and visitor traffic.

So, it’s important that you check and update your content on a regular basis.

We’re using Siteimprove quality assurance software to help web editors do this. It’s reporting on our external Academic Unit and Support Services websites – 60,500 pages !

How it works

Siteimprove crawls your website each week, highlights issues and sends you a report that:

  • checks every page and PDF on your site for broken links
  • checks for spelling errors and potential misspellings on every page
  • highlights elements on the page for you so you see errors in context

There’s also an inventory of all media files, documents, email addresses, and phone numbers. This makes it easy to audit your website and keep things up-do-date.

Siteimprove won’t fix broken links and misspellings errors on your website but it does make it easy to find them.

Improve the quality of your web content – get rid of those broken links and misspellings  and start using your Siteimprove report!

Access to Siteimprove

You can request access to Siteimprove (University Login required).

Share this post:
Share

Improve Your Content with Help from Hemingway

Posted on by

Hemingway Editor is a great tool for anyone who writes anything. It allows you to assess the readability of your writing before unleashing it on an audience.

How it works

You can paste in a section of text and it will give you a readability score. This tells you how difficult your words are to read – the higher the score, the more difficult it is. Hemingway uses a grade level to do this which is based on the level of education needed to read your text. If you can get your score under 10 you’re doing well.

The most useful part of this tool, particularly for those not confident with writing for the web, comes in the analysis of your text. The app will:

  • highlight sentences that are difficult or very difficult to read
  • identify the use of the passive voice and adverbs
  • highlight complex words and suggest simpler words or phrases

There are other tools out there that do a similar job. For example, on my own blog I have the Jetpack plugin installed which uses After the Deadline to check spelling and grammar. It works in a similar way to Hemingway App by highlighting complex sentences and use of the passive voice.

Hemingway Editor

The Hemingway analysis of this post

Hemingway beta

The new Hemingway, currently in beta, gives you the ability to format your text with basic styles. You can add headings, bulleted lists, bold and links. If you copy this text to another piece of software, like T4 or WordPress, the formatting is copied too.

Concluding remarks

We use this tool a lot within the Corporate Web team when producing copy for the website. It’s an easy way to check how readable your words are, putting your visitors in a better position to understand your message.

Try it out on some text from your website and see what small changes you can make to improve your writing. My greatest achievement is getting some text down from grade 41 (yes, you read that right) to grade 10. See how you get on.

Related posts

Share this post:
Share

Introduction to Tools

Posted on by

Our web editors currently use Contribute web publishing software and an in-house database (Site Manager) to publish content on over 20,000 external facing web pages. We provide training and support in the use of these tools. Find out about training on our website (University Login required).

In the coming months the Go Mobile programme will see us migrating to a new Content Management System. This will support our editors in the production of content that is mobile responsive.

Tools topics

We’ll give you tips to help you use Contribute and Site Manager and  introduce you to our new Content Management System.

We’ll also tell you about some useful tools you can use to:

  • find broken links and misspellings on your website
  • grade your content for readability on the web
  • see how your content looks on mobile and tablet

Suggest a topic

If there’s a topic you’d like us to cover – get in touch via the comments or via our website. – (University Login required).

Share this post:
Share