Preparing for and opting in to new responsive designs for CMS pages

Before reading this post, hopefully you’ve been to the test site, toggled the responsive styles on, and had a look around. If not, see our accompanying post introducing a quick(ish) modernisation of the website.

If you create and maintain content on the university website you’ll hopefully want to know when we can put these styles live on your pages. This post describes what you and we need to do in order to do that.

Opting in

Departments and sections can opt in to adopt these new designs for their section of the site. There are a few criteria we need you to fulfill to be able to do this:

1. A commitment from you to check all the pages in your section of the site to ensure they display correctly (more details on this below). Note that we’re expecting to enable the new design at a root-section level rather than small sub-sections lower in the hierarchy (ie. all of a department’s pages will switch at once, not a few at a time).
• If it’s really impossible for you to do this checking, and this will be a blocker to you adopting the new design, let us know. We’ll try to help in as many cases as we can.
2. Understanding that, for now, the new design doesn’t include departmental colours. Options for colour will be re-introduced in the future, but we don’t have a timescale for that yet.
3. Ensuring you have the backing of your department to make the change and the authority to sign it off before going live. 

If you can meet those criteria and would like to get involved, get in touch at digital-marketing@york.ac.uk and we’ll add you to our list.

Testing your pages

Before we switch a section of the site to the new design, we’ll need you to check every page in that section and provide feedback on any issues you can see. We’ll provide tools and guidance to help you do this.

Once we kick off a project to switch your area of the site (but not yet - for now just have a look around and use the feedback tool to alert us to anything obvious that you spot), the kinds of things that you’ll need to check for on a page-by-page basis include:

• Does it look right?
  Ensure there isn’t any overlapping text, or strangely over- or undersize images. Check that the submenu is right and that your images are loading properly.
• Is it working?
  On many pages there are Twitter lists, scrolling banner images, tabs, accordion boxes or some other added functionality. Is this still working? Let us know if there is any unexpected or broken functionality.
• Does the content read properly?
  Part of the work we’ve done is to reorder the content slightly, in those cases where the content at the top of a column comes too far down the page. Scan through the content on the page and make sure it makes sense and is in the right order

We’re aware that some of you may be responsible for hundreds of pages in the CMS so this isn’t a trivial task. But if you split the site down into manageable chunks it’s possible to get it done in a relatively short time, and certainly much faster than rebuilding the pages in a new template. It’s also a good opportunity to make sure that the web pages you have are up-to-date, relevant and useful.

Next steps

If you’re interested in adopting the new design, here’s what should happen next:

1. Have a good look around your pages on the test server so you have a good understanding of what the change will look like.
2. Discuss the opportunity in your department and, if you need it, get the buy-in of your senior manager.
3. Let us know you’re interested and when you’d like to do the checking of your pages - email us at digital-marketing@york.ac.uk - and we’ll agree some dates to start on and aim to finish by.
4. You check your pages, give feedback on anything that’s broken and we either fix it or advise you on how to modify the content so that it works.
5. Once all pages are checked and signed off, we’ll apply the change to your live pages.

All of that might sound quite complex, but we think it should actually be fairly straightforward and we’re here to help. If you’d like to discuss it with us, feel free to call Dan on x2047, or look out for another blog post in the next few days about upcoming content clinics where you can come and chat in person.

Introducing a quick(ish) modernisation of the website

Five years ago the proportion of people visiting the university’s website on a mobile or tablet device was just 2%. It’s now over 25%. The need for our website to work better on a range of different devices is obvious.

One of our aims for this year is to update the current site to be responsive: that is, to fit to whatever screen it is displayed on whether that’s a mobile, tablet or computer. We blogged before Christmas about our plans for rolling out new responsive page templates and what we’re introducing today is part 3 of that plan - an incremental improvement to existing pages that can be applied to all CMS pages.

The new study pages, as they appear on different sized devices

We’ve developed new styles for existing CMS-published web pages which do two key things. First, they now work better on smaller devices. Second, they incorporate new fonts and colours to make for more cohesive user journey around the site. At this time we haven’t incorporated departmental colours, but options for colour will follow in the future.

Give us your feedback

We have a test version of the website at which you can preview the new design and send us your feedback. To access the test site, which is available on the University network only (including via the VPN if you’re off site), go to the page you are interested in on the main website and replace the www in the website address with cmsmigrate. So, for instance, if you want to try out www.york.ac.uk/about/ you would change the address in your browser to read cmsmigrate.york.ac.uk/about/.

Once you’re on the test site and looking at a CMS-published page that’s affected by the new designs, you’ll see a toggle switch in the top right-hand corner. Clicking it will turn on the new styles for you.



If you make your browser window narrower or wider you’ll see the layout adapt to the size of the window.



If you visit cmsmigrate.york.ac.uk on a mobile or tablet and turn the new styles on you’ll see that the content automatically adapts to the size of the screen.

Have a look around and let us know if you spot any issues by clicking the ‘Leave Feedback’ button in the bottom right-hand corner.' We’d really value your input.

What next?

We’re hoping to start rolling out these new designs very soon on an opt-in basis for the different sections of the site. If you’re involved in maintaining your department’s web pages, we have a separate blog post for you about preparing for, testing and activating the new designs.

Rolling out responsive web templates

Early in 2015 we launched new research web pages, our first to be optimised to work on all devices. Since then we’ve launched new pages for prospective undergraduates, prospective postgraduates and we'll soon launch a new version of the homepage. At the same time we’ve been working with departments to rewrite and rebuild course pages.

This has been a long process for a number of reasons. Firstly, it's just complicated work that takes a while. Secondly, we're a very small team who have to keep the website up to date and manage a significant support load. Business-as-usual takes around two-thirds of our time which doesn't leave much resource available for new developments.

Many of you have been asking when you can have access to new templates in the CMS to allow you to rebuild your pages. This post is to let you know what's happening, why (regrettably) it's not quite as simple as just enabling some new templates and to explain what we’re doing about it.

Thoughts on how we manage the website

Two quick asides about terminology:

1. I use department throughout these notes as shorthand for all types of organisational unit.

2. I don't refer to department websites. Instead I refer to sections or pages of the site. When we hear from website users, they almost always refer to just the University website. We have a big website, but it's just one site and not many small ones. That's an important distinction. It signals a shift in mindset that we think is important as we continue to improve the website.

</asides>

In the seven years we've been using the Web CMS, we've given basic training to over 1,000 users. Those users have added over 50,000 pages to the site, often with little governance and as a result we now have a site with more content than we have resource to maintain. Most web professionals would say that sounds like a recipe for disaster. That we still have a usable site in that context is testament to the great efforts made by all those involved.

But, despite those great efforts, the site has considerable problems. It is littered with repetition, out of date information, broken links, broken layouts, huge image downloads, flabby writing, confusing navigation, missing calls to action and critical information lost amongst minutiae.

Modernising and optimising a site for mobile takes more than just applying a new design. It means fixing those underlying problems and streamlining the information we provide. It means we need a change of approach.

Described below are three areas of work, all interrelated, that take us in the right direction.

1. Centralised course listings

Course pages, for obvious reasons, are amongst the most important pages we publish. For some time we've been the only Russell Group university whose course information is only located in department pages.  In many cases course discovery is difficult and in some cases impossible. We also recognise that there is a big burden on departments to maintain the quality of the course pages in their areas. Recent consumer protection guidance has made it more important than ever that we get this right.

To address this shortcoming, we've moved 50+ course listings from departmental to central mobile-optimised pages over the past year. These include courses from Departments of Mathematics, Philosophy, Environment and more. They've been rewritten from scratch to ensure the content is consistent, high quality and most importantly meets user needs. For ongoing maintenance, the central team apply any changes so that we maintain that quality and consistency whilst ensuring that departments continue to approve and sign-off on the published content.

We've relied on agencies to help with writing capacity throughout 2015. In the new year we intend to add a dedicated post to the team to speed up the process. Departments who have the resources to write their own course page drafts will also be able to do so and we will work with you to edit and put them in place.

The current crop of centralised course pages show a range of positive metrics in Google Analytics. We're confident that this is a really positive step forward for how we showcase our courses to prospective students.

2. Mobile-optimised designs for new pages

The new mobile-optimised designs are built on a completely new framework of code and CMS templates. We've followed the principles of atomic design to build a scalable system which should serve us well for a good number of years to come.

By mid-February we hope to make these new templates available for the creation of new sections of the site (eg. new research centres, standalone projects).

For existing sections of the site, there is a lot of work to do to move to the new designs, including (but not limited to):

• Training in use of the new templates
• Auditing existing pages, whether they are required and whether the CMS is the best place for them (the wiki is now a better choice for a lot of internal-facing information)
• Rewriting and optimisation of all content so that it works effectively on devices of all sizes
• Sourcing and preparation of new images so that they display correctly on devices of all sizes
• Logistical planning for a seamless transfer from old pages to new

This is work that departments would struggle to do in isolation, but that our small team doesn't have the resources to support. Rather than focusing on big changes for a few departments, we suggest below a different approach for existing pages as our first priority.

3. An incremental improvement to all existing CMS pages

Given the amount of work involved in rebuilding 50,000+ pages from scratch, there's a compelling need to do something to modernise the site design and improve the mobile user experience in the short term.

To that end, we're working on a retro-fit solution to apply to existing pages in the CMS. It won't be zero-effort for departments, but it will be days, rather than weeks or months.

We hope to be ready to start deploying to early adopter departments in late March.

So what can you do right now?

I hope the above sets the scene and gives you a sense of what we're trying to achieve. But you may be wondering where it leaves you. What can you do right now?

1. Let us know if you're interested in centralising your course pages, using the new designs for new pages or piloting our retro-fit design. Please ensure you have the support of your department though. Successful outcomes depend on departments committing enough resources to see work through.
2. Fix the basics. Mobile-optimisation and modern design are important but it is just as important to ensure what we have already is the best it can be. Fix the dead links, optimise your landing pages, edit your text, highlight your calls to action, clarify your navigation. All those, and more, are just as fundamental to the page as the aesthetics of the design. We’ll be running content clinics each month from February onwards, during which you’ll be able to sit down with us and get some advice in this area. Sign up now if you’d like to be involved.
3. Let us know what your web governance structure is within your department; how you update, approve and manage your content. Check your entry on our site map wiki and update it if necessary. If you don't have a governance structure, consider defining one. It will help you manage your pages and help us to help you going forward. Again, if you’d like to know more about this come along to one of our content clinics and we’ll talk you through it.

Improving our communications

We recognise that whilst we’ve been doing all of this our communications regarding plans, priorities and direction of travel have fallen short. We’re sorry about that, and one of our priorities for 2016 is to put it right.

In the meantime, feel free to ask questions in the comments or to me directly (dan.wiggle@york.ac.uk) and I'll be happy to answer.

New homepage and design: reflecting on the work so far

Having launched the new homepage and design for core pages of the website a few weeks ago, we held a team retrospective to reflect on the process and outcomes of the work so far. This helps us build on the things that went well and refine our process for the future. Below are the four categories of our retrospective and selected highlights from our thinking.

High points

1. It actually happened!
   It's been a long time coming, so we're really happy to finally launch something new.
2. Having a comprehensive preview available on a test server
   From early on in the process we were publishing the work-in-progress homepage and new design for core page on a test server. This made it so much easier to discuss the changes with the wide range of stakeholders who were involved.
3. Trying some new tools
   We used Usabilla and CrazyEgg in anger for the first time with this project. Both proved really useful, the former for gathering up useful feedback before launch and the latter for visualising usage of the new homepage in a really compelling way.

Things that went well

1. CMS implementation
   Despite its faults, and we know that lately a lot of you have been feeling the pain of slow previews and unreliable publishes (previews should be better now; publishes should get better later this week), the way we'd implemented the original design in Site Manager made it relatively easy to switch to a new look.
2. Developing a process to manage the homepage
   In conjunction with redesigning the homepage, we've redesigned the process by which features and promotions are added to that page. York staff can find information about how we manage promotions on the homepage on the wiki.

Room for improvement

1. Too many things, too little time
   The biggest challenge, by far, was finding time to do the work. We're a very small team of just four people: one manager, one full-time on training and support, two of us trying to do project work but constantly pulled in different directions (eg. CMS preview and publish issues, unplanned project requests). We reckon we get to spend, at best, the equivalent of 1 FTE on planned project work. Given that the recent redesign is just one of several projects ongoing, it's easy to see why we struggle to make quick progress.
2. Finishing what we start
   We sometimes found that we'd start some aspect of the work with gusto, but then other things would come up (see point above) and we might not quite finish what we'd started.

New ideas

1. Reporting on where our time goes
   There are no easy fixes to the problem of just having way too many things to do, but we think a good start might be to reflect on exactly where time is being spent. We track a lot of our time already (using the excellent Tick time tracker) and we track our support calls too, so we have data. We're going to trial having monthly reviews of exactly what we spent time on and hopefully identifying actions we can take to make more time for the most important projects.

Creating a new favicon for york.ac.uk

Alongside the launch of our new website design earlier this month, you may have noticed that our favicon has changed too.

It's a small thing (literally), but it's there at the top of the browser window for everyone looking at our website, and appears every time someone bookmarks one of our pages, so it feels like an important thing to get right.

Our existing icon used the 'Y' taken from 'York' in our full logo, which was starting to look dated and was also a violation of our very own visual identity rules (tut tut).

The old 'Y' favicon

As we're now using the University shield as our identifier across our social media channels, it seemed like a good opportunity to bring everything together by using the same icon here too.

Creating the icon

I created the icon at two sizes, 16 x 16 for normal resolution screens and 32 x 32 for retina screens. There are many other possible resolutions for everything from iOS home screen links to Facebook share thumbnails, but I'll come back to those another day.

It turns out that a 16 x 16 canvas doesn't give you much room for subtle details, and at that size the stripes in the shield are very close together and make it look like solid black. To get around this I simplified the shield slightly by removing half of the horizontal stripes in Illustrator, giving the shield the same overall feel as its full-size counterpart.

This was saved as a PNG from Illustrator and uploaded to a tool called X-Icon Editor, which lets you make edits to your icon and preview how it is going to look in the context of a browser toolbar. Once I was happy with the result, I exported my new icon (containing both image resolutions in a single file) and replaced the old one with it.

The new favicon (with lots of other icon friends)

One small step....

We think it's time for a bit of a makeover...

As of next week visitors to our website will get to see our new homepage and revised design for the main site. This is part of a major redevelopment project which will ultimately lead to the site being responsive.

The old homepage

The new homepage - to be launched w/c 11 November 2013

These changes are just the first phase of the project so visitors won't notice anything too radical initially. We haven't changed the content, other than on the homepage, we are really just laying the foundations for future phases.

Why are we changing? 

In 2011 a report was commissioned from Precedent Communications to look at the effectiveness of our communications across the board and to identify areas for improvement. The website was highlighted as the area most in need of investment as the perception of external stakeholders (such as prospective students, employers and investors) was that the university looked tired and that the user experience was poor. 

Alongside this we've seen a huge increase in visitors from mobile devices so we want to make sure we offer them the best possible experience.

Since the 2011 report the team have been working with Precedent to develop a new design and in the last few months we have done a lot of work to;

• Develop a project plan so that we can launch the changes iteratively (University of York staff can view our ten phased project plan) 
• Tweak the designs to better suit our needs 
• Develop a protocol for managing the homepage (again staff can find out how we manage the homepage content) 
• Apply the design to our Content Management System (CMS) 

What's next? 

Once we have launched Phase 1 we'll set to work on Phase 2 which will start to address some issues around usability on the key landing pages. We'll also be paying close attention to the feedback we get on the new homepage as we have lots more in store for this so please do tell us what you think.

It’s all about Digital!

As it’s three months since I started in my role as Head of Digital Marketing and Communications I thought a contribution to the team blog was long overdue. So, a very belated… hello!

The introduction of my role, at the University of York, signals a change of direction for the former Web Office, who are being re-named Digital Marketing and Communications (or the Digital Team if you prefer). In a nutshell the focus is shifting from supporting departments to deliver digital communications to leading on the strategies to deliver them.

So what’s been happening in the last few months?

A significant part of our time has been spent preparing for a redesign of the York website. This is something that has been in the pipeline for some time but we have developed a plan to roll-out the new look and feel in a ten-phased project which starts this October. We didn’t want to wait to get everything ‘done’ before we started implementing changes so we’re taking an iterative approach; you’ll see the first changes next month after which we’ll blog about it here to explain what we have changed and why.

University of York staff can also follow the progress of the project on our wiki and find out what’s coming up next.

Speaking of the wiki we have spent some time developing a space to support Digital Marketing and Communications across campus. Within it staff can find information on Social Media, the Visual Identity inc. tone of voice, guides and resources to develop effective content, forms to request our support and details of the projects we’re working on.

Alongside the above we’ve also;

• Developed and launched the Welcome pages for new Undergraduates, in collaboration with our colleagues in the Marketing and Communications office.
• Developed a new process for managing the stories on our homepage (in preparation for the new one!)
• Held some really engaging workshops with Content Strategist, Relly Annett-Baker, and as a result started work to define our tone of voice and developed guidance (available from the wiki) to develop and manage our content.
• Revised the way we run projects (not substantially as Dan and Paul had some excellent processes in place) but we’ve recently gone back to Sprints and started to rotate support so that Amanda has more opportunities to get more involved in project-work.
• Started the re-brand of our Social Media accounts to create a uniformed look and feel (see UniofYork and UoYStudy) and developed guidance around ‘official’ and ‘unofficial’ accounts.

All of the above has been happening alongside providing support to colleagues across campus, training staff to use the Web CMS and being involved in the many strategic discussions about the future of digital at York. So, all in all, it’s been a very busy summer!

New pages, and a new design, for the 50th Anniversary

The University is celebrating its 50th anniversary throughout 2013 and we're happy to have just launched some new web pages about the celebrations taking place and reflecting on our history: www.york.ac.uk/50/

We'll be adding more features reflecting on our achievements and documenting the events that are coming up as the year progresses, so check back occasionally to discover more.

A new design

The design is quite radically different from our standard template. We've been working with an outside agency on a revised design which ultimately will roll out across much of the website and this is the first pilot project using some of what we've been working on.

Many of you will no doubt have questions about the design change. I can answer a couple of likely ones straight away: For the enthusiasts I'm afraid, no, you can't have the design for your site just yet. For those a bit more cautious, don't worry, this is an early pilot and there is a long way to go before this will affect your pages. We'll share more details about the wider project soon.

We hope you like the design and the content. If you've any feedback then we'd be happy to hear it - leave us a comment or drop us an email at web-office@york.ac.uk.

A new look homepage, coming soon

Over the past few months we've been looking at ways of improving the University homepage.

We're finally at the stage where it's ready to be revealed, so without further ado, here's how it's looking (click the image for a full size version):

What's changed?

A better overview of what's going on

One of the key aims of the redesign was to make the homepage a lot more lively and do a better job of representing the diverse range of activity going on throughout the University. Apart from the news items which changed every few days, most of the old homepage was static, staying the same for long periods of time. We wanted that to change, so that repeat visitors to the page (both internal and external) would get to see something different each time, showing them various aspects of university life.

Instead of showing a large random image, there's now a dedicated space for showcasing big research discoveries, high profile speakers coming to campus, achievements, campus expansion news, etc - anything that shows what a great place York is to study or work.

In the old design, we could just about cope with one of these features at a time, but the page became very cluttered when we had several of them:

We're now using a sliding interface to allow us to have multiple features at the same time. This is something that we've been doing on departmental sites for a while (eg see the Computer Science homepage) - but is new to the homepage.

Keeping it up-to-date

Having such a high profile space for featured content means that we'll have to make sure that there's always something new to put up there.

One of the first things that we've done is to set up a homepage editorial group, with representation from the press, publications, events and web teams. The job of this group will be to identify stories that could be featured on the homepage, and to also find / produce content that we can link to from the homepage.

Getting input from people across the whole University is going to be absolutely key to this, so keep an eye out for further messages.

Clearer paths to major areas of the site

The major sections of the site are now all together in a horizontal navigation bar across the top. The 'directory listing' type parts of the site (A-Z, departments, contacts, jobs, etc) are all grouped together, near the search box.

Simplified colour palette

We've moved away from the rainbow of blue, purple, orange and green, and are now using our corporate green. This brings the homepage in line with the other top-level parts of the site which have already moved into the Web CMS, such as About the University, Research and Campus development.

Links to social networks

A lot of online activity these days goes on beyond the limits of our website, particularly in places like Facebook and Twitter. There's now a link from the homepage to a new directory of social media activity, listing our main corporate presences and the ones maintained by individual departments and offices.

A first step, not the end of a process

We know that not everyone who uses the University website sees the homepage - just under half of our visitors never encounter it (usually having arrived at a lower level part of the site via a search engine). We need to continue to make improvements that will improve the experience of all of our visitors, no matter where they begin their journey.

One key piece of work is that we've started working with Student Recruitment and Admissions on making some big changes to our central student recruitment pages.

Launch date

We're planning on launching the new homepage next week, on Monday 13 December 2010.

If you have any questions or comments, please email them to web-office@york.ac.uk, or leave a comment below.