Editing Images for Use on Your Website

Posted on 16 June, 2015 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.

Mastheads

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

It’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.

The 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.

Team Update: 28 May – 10 June

Posted on 10 June, 2015 by

It’s that time again – read on to find out what we’ve been up to over the past couple of weeks.

Go Mobile programme

We’re working on the sites from batches 1 and 2 which have been migrated into T4. There’s a bit of post-migration fixing to get them ready to hand over to our web editors. Editors will then have an opportunity to work on their content, using the new content types.

Batch 3 has been migrated into T4 and we are about to start importing batch 4 later this week.

We’ve updated our website to include details of the first group of sites in development and outline the stages in the development process (University login required).

Technical developments

We are currently signing off the components that our editors will be using regularly once their website has been handed over to them to edit.

More complex components (such as image galleries and grid layouts) will be worked on soon after this.

Design

Press Office and Research design mock-ups are now complete. Batch 1 and 2 base stylesheets to be developed further for roll out within T4.

Planning is underway to migrate the Undergraduate site into a responsive design.

Training and support

We received our first official feedback on our Writing and Planning Web Content workshop.

We got some great comments on the session – so we’re happy. People seemed to really like:

two facilitators to break up the presentation
the exercises and tasks we set

We’re continuously developing our training as we learn more.

We’ve introduced a T4 show and tell session for our own team to help us understand the CMS as we start using it.

We’ve received 45 support requests through the NU Service Helpdesk and have resolved 25 of them.

Campaigns and web developments

There’s still a lot of business as usual!

Linda has worked with our International Marketing team to review plans for a restructure of their content over the summer.

Discussions/sites are in the pipeline with HR, Clearing, Careers and our Assessed Summer School.

Emma C has been monitoring our performance in search rankings. She’s also looking into better ways to report and display our analytics data.

Emma C and Lisa launched the new Newcastle University London website.

Plans for the next few weeks

We’re busy preparing for our next batch of Go Mobile training.

We’re always planning and writing blogs – let us know if there’s a topic you’d like us to cover.

Holiday season is underway. A couple of our team are over in Malaysia at the moment. They took the opportunity to visit our medical campus: NUMed Malaysia while they were there. That’s dedication!

See you next time!

How to Improve your Website Images and Videos

Posted on 8 June, 2015 by nueconsoc

Images and video are used as supporting content on the University’s websites.
People don’t tend to prioritize our websites specifically for images or videos – they visit for information; your content.

That said, content can be greatly enhanced by using images or video to support your messages if they are used in the right context. So what is the right way to use them?

Choosing an image/video

High Quality

Use only high quality images. Images should not be blurry, stretched or pixelated. There is a range of University photography you can use in the photo library. Always preview your image to check the quality before publishing.

Videos should be selected from an official University YouTube channel and embedded in your site. Don’t upload the original video file directly to your website.

Support the content

Images and videos are supporting messages. They should always make sense to the user, their job is to help to enhance the meaning of your page. Your content should provide the context for the image/video.

It’s important your images and video is relevant to the content on the page. User testing increasingly shows that people are feeling more and more negative towards the use of generic stock images.

Less is more

If you have too many images or videos on a page, you can compromise the effectiveness of your content. They can:

slow page load times
interrupt the reading experience
make pages disjointed and harder to read

Images of text and complex images, like flowcharts or graphs, can also present a barrier for users accessing your content, and should be avoided.

This content in the image is effectively invisible to users of screen readers and anyone viewing the text only version of your site, for example a mobile user with images turned off. It is also impossible for search engines to index this content – so if you want people to find this information, use content!

If you must include a complex image in your site then a text alternative of the essential information contained in the image is required.

Image size and orientation

For sites edited via Contribute the standard image size is 320 x 180 pixels. We recommend that you use landscape images. Specific templates may have alternative sized images for banners and grid layouts.

Sites edited in T4 have many image options. For these size requirements you can view the image guide on our demo site (University login required).

Keep an eye out for a future post on editing images.

As videos are embedded onto your webpage, your website template should automatically provide you with the right size and a preview image for the box. Just look at our support pages to find out how to embed a video (University login required).

Alt text

Alt text provides alternative, textual content when an image cannot be displayed or for users of screen readers. It should be descriptive, but not necessarily a literal description of the image. Think about describing what the image represents.

Linking images

Many of our websites contain pages with grids of images, for example the Open Day landing page. Linking the image used here increases the area a user can ‘click’ or ‘tap’.

This is useful for mobile users who may be trying to select links using their finger or a stylus. Image links should always be supported by links in the text of your page.

Social media

Individual posts and campaigns run on social media are ideal for hosting video content. These channels tend to be seen as more engaging for people, as they can so easily share content – but more importantly, they enable people to talk directly to us.

Consider using social media alongside your website in this way to help your messaging. Social media can help direct people to your website, and your website should connect people to your social media.

Find out more about using social media in this way from the University’s Social Media Team.

Final thoughts

So that’s your whistle stop tour of improving images and videos for your website. These assets should always be used to enhance your pages, to enable people to better engage with your content. Find out more from our guide to images (University login required).

An Introduction to the Language of T4

Posted on 4 June, 2015 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.

Content 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.

Workflow

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.

Meet the Supporting Cast for your Core Content

Posted on 2 June, 2015 by

Me: “Hey website, I have a question, help me answer it. How do I get to Newcastle?”

Website: “Before I do that, why not stay a while, look at our pictures; see how they glide by. We’re showcasing our city, our campus, our staff, our facilities, and our cat (oh, you didn’t stick around for that one).”

Me (scrolling quickly): “No really, just directions would do…”

Website: “Could I interest you in this video – it’s actually about the Law School, but you know, it might have a map in it, or perhaps a Virtual Tour? We’ve got a nice one of the Sports Centre: the gym is amazing”.

Me: “Er, no thanks, bye.”

Meet your supporting cast

These image galleries, videos and virtual tours have a lot to bring to your web pages.

They can provide engaging content. They help reinforce reputation and quality. They should act as support for the core content of the page.

Problems occur when they take over and try to be the star of the show.

They interrupt the flow of your carefully crafted content. They butt in. They push the priority messages out of the way.

“Most people come to the Web because there’s an information gap. Something has cropped up. There’s something they don’t know, something they need to do.”

Gerry McGovern

Prioritise web page content

We should be careful about placing too much emphasis on the supporting content in a page.

Stop this from happening by focusing on the priorities for the page. Read our blog post on Structuring Content to help you.

All our supporting content flows after the core content. On desktop it floats right or under the core message. On mobile it flows under the core messages.

This means our site users are not interrupted when trying to find the answer to their questions. The supporting content is there if they have time or want to read more, watch or listen.

“Let us not focus on getting people to spend time with our content but rather on seeing how we can save them time.”

Gerry McGovern

Supporting content examples

Supporting web content includes a whole raft of things from images to interactive virtual tours. As long as it’s relevant to the page and its placement is considered: it’s all good.

Qualifiers

Qualifiers back up our claims. They could be quotes or accolades that reinforce a core message. Partner logos and accreditation can also lend weight to statements within the content.

Images

A picture is worth a thousand words – this can be true. A good, clear, relevant photo can enhance your core content.

But, too many images can start to bring noise and distraction to the page. Consider displaying these as an image gallery. This can group together similar photography: facilities for example.

Video

Add a video if it supports the content of the page – don’t get sucked into adding videos “just because they were made”. This all represents clutter to your end user.

Virtual tours

These are a great way to showcase facilities and can help engage with your users. Again, make sure they support the context of the page.

Calls to action

Supporting content can also provide a next step.

They include calls to action like booking a place at an event. We have styled content buttons for this.

We’ve also got a suite of social media icons that can help increase visits to Facebook or Twitter.

Delete it!

Test if it really is supporting content. If you took it away would your reader still leave the page happy that they found out what they needed?

References

Gerry McGovern. The Challenge for Writers of Web Content. New Thinking. 24 May 2015.

Image credit: magic moment by rvoegtli on Flickr

Go Mobile Blog