Find Your Way Using the New Global Menu

Posted on by

The new global menu is visible across all sites in the new template. It replaces the mega footer seen in the old central template.

Mega footer used in old website template

Mega footer used in old website template

The menu launched at the same time as the new external homepage. In its first iteration it was static. Each menu item linked through to a landing page containing links to further content relevant to the section. For example, take the Study landing page which links through to the Undergraduate, Postgraduate and International sites, among others.

Menu behaviour on desktop

We developed the second dynamic iteration of the menu to reduce clicks. On desktop you can hover over each menu item to open a sub-menu with links to relevant sites.

Global menu on desktop screens

Global menu on desktop screens

The global menu is accessible. Keyboard access is achieved using the tab key to move through each menu item. Pressing on the down arrow on the keyboard will open the sub-menus.

Menu behaviour on mobile

When using the website on a touch based device the global menu loses the sub-menus. When you tap any item in the menu it takes you to a landing page that has similar links to those found on the sub-menu for that section.

Global menu on mobile devices

Global menu on mobile devices

Further development

This is not the end for development of the global menu, we’re testing how it is used to inform the next steps of development. This iterative process is a method we’re starting to use to approach development across the whole site.

Team Update 18 – 29 January

Posted on by

We’ve had our heads down throughout January, busy getting ready for Go Mobile Phase 2, and have had some exciting changes…

A warm welcome to the new arrival in our team; Head of Digital, Graham Tyrrell.

Graham started on the 18 January. His remit is to help us to further develop and deliver a world-class digital/web experience for visitors, our students and staff.

With over 15 years’ experience in web and digital work, Graham has worked in a number of not-for-profit organisations; the Home Office, Royal Institute of British Architects, Cancer Research UK and Which?

We’re hoping we can get a guest blog post in the near future from Graham, so watch this space!

Go Mobile programme

The recruitment process is still ongoing for the new faculty web managers and content officers to help with Go Mobile, and the new office space is still on-track for March.

Linda has started building the new Alumni site in T4. Plans are to merge the current Giving to Newcastle, 1834 Fund and the Alumni sites. Rather than migrate lots of unwanted content into the system, the Alumni team have decided to write it all from scratch!

The International website will be split in two as part of Go Mobile. The part of the site focused on recruitment has been migrated into T4 and is currently being prepared to hand over to editors. Emma C is working with the Student Mobility and Integration team on restructuring the study abroad and exchange content. She has also met with members of the International Relations team to discuss rebuilding their site in T4.

Lisa has been making further content updates to the Science Central website to get it ready for proofreading next week.

The Careers website will become four new sites as part of Go Mobile – yes four!

Jane has started building the Careers website, working with the Information Team to clarify the new structure. She’s also building an online resource website for occupation information.

Catherine is helping out with an internal Careers site for staff, working with technical colleagues in both the Careers service and NUIT. And finally, Lisa is working on the build of a new Employers site. It’s already been migrated into T4, so Lisa is getting the content ready to hand over to editors.

Design and Technical developments

A new collection of accommodation virtual tours has been commissioned by Lynn Shaughnessy, in the Accommodation Team. They will be available for embedding into T4 websites. We are also making sure they are added to the central virtual tour website. They include:

  • Albion House
  • Kensington Terrace
  • Park Terrace
  • The View
  • Turner Court

A to Z jump links can now be added to alphabetical staff lists and works in the same way as the jump links in the courses listings for the undergraduate and postgraduate websites.

The following websites have been imported into T4, ready for content editorial:

  • Electrical and Electronic Engineering
  • International Students
  • Employers

We are finishing some technical developments and refining some of the content types which will be needed in the next phase of site migrations. We are also looking at the requirements of research project pages, news and events listings and staff personal web profiles.

Training and support

Linda and Lisa ran another Planning and Writing Web Content session.

Emma C ran media management training for members of the Press Office, NU Advancement and our own team.

Anne delivered two Contribute webinars for staff at NUMED, ran another T4 CMS workshop, and delivered a bespoke T4 CMS session for Press Office staff.

So far, we’ve received 27 support requests through the NU Service Helpdesk and have resolved 19 of them.

Plans for the next few weeks

We’re getting ready for our first web editor community event where we’ll host editors whose sites were completed in phase 1 of Go Mobile….we have organised lots of cake!

Designing the New University Homepage

Posted on by

As part of phase one of Go Mobile we redesigned the University homepage so that it works across all devices. Like the other sites going through Go Mobile it is managed in T4, the University’s content management system.

Features of the homepage

Our new homepage can be broken down into eight distinct sections.

  1. Global menu for quick access to key links
  2. Course finder for direct access to Undergraduate and Postgraduate courses
  3. Hero image slider to highlight key news, event and research stories
  4. Video content to support our key messages
  5. Seasonal message top task boxes
  6. Latest news from the Press Office
  7. Partner logos and awards carousel
  8. Social media links and directory
Newcastle University homepage features and layout

Homepage design features and desktop layout

On mobile devices these stack horizontally, one on top of the other.

We’ll look at a couple of these features in more detail.

Hero image slider

The old homepage image slider was full width. Although this created a strong visual impact, sourcing images to fit this area could be problematic.

Old full-width hero image slider

Old full-width hero image slider

The new hero image slider is smaller. It allows the Press team to source images that would fit a standard landscape 4 x 6 photo.

New hero image sliderOn mobile devices the caption drops below the image to avoid the image from being fully covered. The caption and image form a single clickable link. This is important on mobile devices as it creates a large hit target to increase successful touch interactions.

Video content

The new homepage layout has allowed the use of rich media content such as video. The analytics show that the external homepage is the most popular destination for video consumption. This has helped increase the profile of some key videos during the months of October to December 2015:

  • The Impact of a World-Class Civic University
  • How Smoking In Cars Can Affect Children
  • Dr Martin Luther King Jr Honorary Degree Ceremony
  • Our City
  • Our Campus

Related posts

Read more about the new responsive website template in our case studies:

How to Improve the Readability of Your Webpages

Posted on by

Readability for websites isn’t just about people understanding the words, although of course that’s a massive part of it.

After all, if you can’t understand what the words are trying to tell you, you’ll just leave the site without the answers to your questions.

We’ve proven it time and time again – the readability of complex information can be improved by using clear, easy to understand English. It’s just making sure more people can understand it.

What I’d like to focus on for this post is some tips about the other elements that can affect readability; prioritisation of content, page layout, the use of design, and ease of navigation.

Prioritisation of content

What is it that people really need to know about on your page? If you identify it, you can prioritise the content to improve readability. Content should always be created and designed with the user’s needs in mind.

For example, here’s a screen shot of the old version of the postgraduate ‘How to Apply’ section. It had low readability; complex information, use of jargon and too many words! Your eye is also drawn to the box in the middle of the page, which was a little distracting.

example of a hard to read page

Old version of the application page (select to view expanded image)

We reviewed the section, identifying the purpose of the content (get people to apply) and  got to work editing.

We use page titles to help accurately introduce the content for people. A change of title from ‘Newcastle University Application Form’ to a very clear ‘How To Apply’ certainly helped…

Also, editing reduced the content from 12 to just four pages.

example of an edited page

New edited version of the application section (select to view expanded image)

Another way we have improved readability is to use introductions on pages. This ensures people can quickly read a descriptive summary of the page. Take a look at Linda’s post about how to write great introductions.

Page layout

We reviewed the page layout or format, quickly deciding a step-by-step guide would be most effective at helping people though the application process. We even added a relevant video to support our primary messages.

content page with tabs

Pages of content were re-worked into a simple step-by-step guide using tabbed content (select to view expanded image)

Use of design

We’ve blogged before about how design can help people navigate around your site, but it can also help draw attention to key content/things you want people to do.  And no…I’m NOT talking about flashing animation here, but more subtle design devices.

I’ll explain – we often use expandable boxes on pages to hold content for specific audiences. It’s so that content can be seen – but doesn’t have to be opened unless it is relevant to you.

We use expandable content on the Undergraduate website for a long list of entry requirements, see the screen shot below. Don’t panic at all the options! Relax and simply choose the content relevant to you…

Image of expandable boxes on the undergraduate website

Using expandable boxes in content to help readability (select to view expanded image)

Test, test and test again

We’ve tested the content on the new postgraduate application pages using Clarity Grader (a website content analysis report) and the results are really positive:

Readability has increased from 48 to 55 (we aim for 60).

Long sentences (harder to read) were at a whopping 19.69% before we re-developed the page and have decreased to 7.97% (we aim for 5%).

This is all the more impressive when you consider the content is mostly complex and detailed information on application procedures.

Final tip

One of the key things to remember – is that you can always go back to pages and improve readability. It might be a slight tweak to a sentence, or a layout change – the main thing is that you can always improve it.

We ran some extensive testing on the postgraduate content. After all, a lot of what we did, not just to the content, but to the layout and design, then formed the master plan for Go Mobile – so it needed to be right. Did we do it?

Oh yes. You can read about the excellent results in an earlier post of mine. A particular favourite is the below word cloud created from user feedback about first impressions of the postgraduate website. The most popular words that users used to describe the site included: easy, simple and clear.

Word cloud showing first impressions of the PG website

Go on, take the challenge – have a go! Choose one of your pages and see how you’d improve readability. I’d love to hear what you get up to!

Related posts

Keeping Up to Date

Posted on by

In our Making New Year’s Resolutions post we shared our resolutions to improve websites and the services we provide to web editors. Mine was to develop a process for keeping up to date with advice from web industry experts.

I’ve already subscribed to a number of blogs and newsletters via email, and I read lots of articles and books but this is often sporadic and fragmented. When I do read something useful I often don’t do anything with that information, so it just sits in my inbox or on my desk.

I aim to come up with a systematic process for collating, reading and, most importantly, using the information I read to help inform our work. In this post I’m going to explain how I’ll tackle this.

Collating articles

I’ve set a rule in my inbox so that emails from blogs and websites I’ve subscribed to go directly to a folder for web articles. This will limit the disruption to my workflow.

I’ve also created a Trello board to help organise my reading. It contains different lists for different web topics that I read about such as content strategy, writing for the web, user research etc.

I’ve then dedicated some time on Friday mornings to go through the web articles folder and skim read articles to determine whether they will be useful. If an article looks relevant I’ll create a card in the relevant list in my Trello board for it and I’ll include the link to the article.

Reading articles

I’ve also blocked out some time every Monday afternoon to read the web articles I’ve collected from the previous week. Since the articles have already been categorised in Trello, I can quickly select articles that are most relevant to the projects I’m working on that week.

Allocating a dedicated time will allow me to focus solely on the article, as it will become another piece of planned work.

Using the information

After reading the article I will then use it in some way to inform our work. So, depending on the nature of the information, I might:

  • write some notes about it (so that I have a bank of information for reference)
  • share with the team via email or team meetings
  • write a blog post about it to share with our wider web community

Or I might end up doing a combination of these things.

Have a go

Why not give it try? Dedicating just half an hour a week to reading articles from industry experts can give you tips to improve your web content, and some context to what we’re doing with Go Mobile.

I’ve listed a couple of sites that I find useful to get you started:

Related posts