Tag Archives: mobile

A Brand New Mobile World: Case Study of Central Sites

Posted on by

Phase 1 of Go Mobile is now complete and we thought it timely to do a little show and tell of what we’ve been up to with this Go Mobile malarkey.

Two of our central sites to get the Go Mobile treatment were Research and About. These are clearly important sites for a research-intensive Russell group university, like Newcastle. These sites should showcase our achievements, but also need to explain some complex strategic content.

So they need to be able communicate effectively, but now with the added requirement of working just as well for smaller mobile devices.

We’ve posted previously about what Phase 1 of Go Mobile entailed and also talked about new ways we have of doing things, so here I’ll showcase some new layouts.

This post will focus on a core page on the Research website and the homepage for the About website. I’m going to include screen shots of the sites before and after Go Mobile, and explain why we’ve done these developments.

Research website

Take a look at the old Research Support section, one of the core pages of the research site:

Screenshot of old Research Support page on desktop The page is quite informative and clearly formatted (short paragraphs and a bulleted list of hyperlinks) but not really engaging. It’s also not visually impressive, with only a small image to the right of the content.

Now look at the new Research Support section:

Screenshot of new Research Support page on desktop.Note the:

  • new ‘masthead’ design for section landing pages
  • big impactful image to set the scene
  • new teaser text overlay on the image to help introduce the section
  • quote to substantiate our claims
  • use of bold to emphasise key messages in content
  • content written for mobile; direct, informative with relevant hyperlinks

Now, take a look at the new page on mobile:

Screenshot of Research Support page on mobile The page title clearly indicates the topic of this page and the teaser text is now used as an introduction to the page. This helps you quickly understand which page you are visiting.

The content is split into ‘blocks’ that can re-stack on mobile. The priority of content has been optimised; the image re-sizes and drops under the text.

About website

Here you can see the old About homepage:

Screenshot of the old About homepage on desktopYou can see that:

  • boxes are built for top tasks, so people can find the most popular pages quickly
  • there are links under each top task box to pages within that section
  • images are small
  • there are no key messages
  • the page is not very inspiring…

On mobile, this old page simply shrunk a bit to try to fit your mobile screen (but not very well) as it was not mobile responsive.

Now compare the new About homepage on desktop:

Screenshot of the new About homepage on desktopNote the:

  • top task boxes are still in use, to help people find what they are looking for
  • side menu is now visible to help with navigating the site
  • larger images are used to enhance the page
  • subheadings to help introduce content, and put it in context
  • use of video to help support our key messages

And see it on a mobile screen:
Screenshot of a section of the About website's homepage on mobile (showing website title and top task boxes)Screenshot of a section of the About website's homepage on mobile (showing video and text)

The new page re-stacks all content for mobile, including video. All content, including images and video re-size to fit your mobile device.

We’ve improved section naming ‘About the University’ rather than ‘About’ helps give people more context of which site they are on and where they are in the site.

The hamburger menu at the top gives access to the secondary navigation (the side menu on desktop).

We’ll keep you posted!

Now, prepare yourself – as we move onto Go Mobile Phase 2 more things will change.

Not only will other websites get the Go Mobile deluxe treatment, but we are still developing the technology, how we do things – constantly testing and improving what we’ve already done.

You can always keep an eye on what we’re up next to with our fortnightly updates.

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

Experts to Inspire You

Posted on by

We like to keep ourselves up to date with the latest developments in the web industry by reading. A lot.

We read books, articles, websites and blogs and thought we’d pick some of the quotes we really, really like. Hopefully you can spot why…

Usability

“When I look at a web page it should be self-evident. Obvious. Self-explanatory.

“I should be able to ‘get it’ – what it is and how to use it- without expending any effort thinking about it.”

Steve Krug
Don’t make me think

“It is very important that your website is visually pleasing. However it is much more important your website is useful.”

Gerry McGovern
Killer Web Content

Your content is important

“Language is at the heart of communication, and the only purpose of a website is to communicate.”

Seth Godin
The First Rule of Web Design

“Your writing is important. At the end of the day, you’re a person communicating with other people.”

Nicole Fenton and Kate Kiefer Lee
Nicely said. Writing for the web with style and purpose

“If the heading is the hook, the summary is the line that pulls you in. The summary gives readers all the information they need to decide whether to read on or not.”

Gerry McGovern
Killer Web Content

“A person who produces content without understanding the tasks the content needs to support is a dangerous person indeed.”

Gerry McGovern
The Stranger’s Long Neck

“With the limitations of the mobile screen as a guideline and a barrier, you’d naturally have to write differently.

  • You’d get to the point.
  • You’d put the most important information up front.
  • You’d remove all the marketing jargon and fluff.
  • You’d write short declarative sentences.
  • You wouldn’t use a long word when a short one would do.
  • You’d make every word earn its place.

Writing this way isn’t just good for writing for mobile. It’s good writing for everyone.”

Karen McGrane
Content Strategy for Mobile

Going mobile

“Use going mobile as a lens to make all our content better regardless of platform.

“It’s a big chance to create a better user experience by improving the quality of our content. Let’s not waste it.”

Karen McGrane
Content Strategy for Mobile

“The work you do now, to structure content for reuse and get it ready for mobile, is going to also make that content more prepared for wherever the future takes it.

“Considering all the different devices on which your content may be displayed forces you to focus – to take stock of what’s really important and to get rid of things that aren’t.”

Sara Wachter-Boettcher
Content Everywhere

Your messaging

“Messaging is the art of deciding what information or ideas you have that you want to give to – and get from- your users.”

Kristina Halvorson and Melissa Rach
Content Strategy for the Web

“Use the mobile screen’s constraints to help prioritise your primary, secondary and supporting messages.”

Karen McGrane
Content Strategy for Mobile

“You must have an ending to your content that is a call to action. Good web content is always task-focused, and the best ending allows your customers to go about completing their tasks.”

Gerry McGovern
Killer Web Content

A final thought…

“Today, many websites are damaging the reputation of the organization. Every time someone finds the wrong content or clicks on a broken link, the brand is hurt.”

Gerry McGovern
Killer Web Content

Feel inspired

So, do you feel inspired? And can you tell why we like these quotes?

These experts all advocate good writing practice to improve the website experience for all.

They all absolutely, utterly agree on one thing: content is king.

You don’t have to be a designer or a developer to create a useful, successful website at the University (we’ll do that for you) but you do have to care about your content.

References

Share this post:
Share

Do you need to worry about Google’s mobile update?

Posted on by

On 21 April Google launched a new search algorithm that includes mobile friendliness as a ranking factor in search results. This week we’ve received a number of queries about the update and what affect it will have on how our sites perform in searches.

What we know about Google’s mobile update

  • It only impacts mobile search results
  • It’s likely to take a week to roll out (and for us to see what the impact is)
  • It’s a live algorithm, so if a page becomes mobile friendly after 21 April it won’t take long for this to be shown in the results, with the mobile-friendly tag
  • Mobile friendliness is just one element of a complex ranking algorithm

We (the team, industry experts, perhaps even Google) don’t yet know exactly what the impact of these changes is going to be. All the sensible, non-scaremongering experts out there are saying – don’t panic. And we’re inclined to agree with them.

“this is just one of over 200 signals we use to evaluate the best results. Non-mobile-friendly sites won’t disappear from mobile Search results—they may still rank high if they hold great content the user wants”

Cody Kwok on Google’s Inside Search blog

As this quote from one of Google’s principle software engineers makes clear – mobile friendliness is not the only thing you’ll be ranked on, sites that already perform well will continue to do so and the key is to provide the content that meets your users’ needs.

Making our site mobile

The good news is a number of key areas of our website are already mobile friendly, eg Clearing, Open Day, Postgraduate and Research Impact. By tracking usage of these we’ve learnt valuable lessons about what works for our users and for Google.

We’ve also prioritised transforming the parts of our site that receive high traffic and are most visible to Google (including the University homepage, Undergraduate and About). These sites are all in the first 20 to go through our Go Mobile programme.

We’ll be monitoring mobile search results for a sample of our site over the next few weeks and will respond to any changes we observe.

Share this post:
Share