Digital Marketing & Communications

We've seen 1s and 0s you wouldn't believe

Topic: Development

Show & Tell, November 21 2014

📥  Communication, Design, Development, Show & Tell

Back in our spiritual home after the impromtu reshuffle that made our last Show & Tell session so special, we had a full roster of presenters and a diverse range of topics.

Ruby Idioms - Kelvin

Our developers are working more and more with Ruby — Rails in particular — and Kelvin has been challenged with providing instruction and direction to the team on the subtleties of how we should write Ruby differently from Java and PHP (other previous go-to production languages).

Far too much to cover in five minutes, we instead had a whistle-stop tour of the top ten seven things to be aware of, from not using unless statements with an else block, to replacing do...end blocks with curly braces if they are a single line.

A full rundown can be found in Kelv's github repo: https://github.bath.ac.uk/mnskchg/ruby_idioms_show_and_tell.

Less stuff - Dan

Still with me? Excellent. Next up was Dan, who talked us through taking a pragmatic approach to webfonts to provide a better user experience. A large part of the work was reducing the filesize of the font manifest file by 66% - theoretically providing a significantly improved loading time for those viewing the website on slow internet connections. The key was looking at the different weights of font being served by default, and making careful design choices that allowed us to provide maximum clarity and aesthetic with the minimum variety of styles and weights.

Dan then went on to propose a manifesto of using less as a starting point for design - tying in aspects of user-centered design, progressive enhancement, the mobile-first approach, and our existing delivery principles.

What do I do? - Katrina

Six months into her new post as Research Marketing Manager, guest speaker Katrina gave us the lowdown on what her job entails. It turns out that a fair amount of it is commercially sensitive, so I'll be skipping over that - no secrets for you.

Katrina spends a large amount of her time planning and coordinating large-scale campaigns to cement relations with University stakeholders. Currently we are tapping into the large amount of water-themed research that our academics are involved in and Katrina is putting the finishing touches to a six-month campaign relating to this.

When not devising ways to get our research the recognition it deserves, Katrina acts as a single point of contact between our academics and the various marketing teams that exist on campus at all different levels - from research teams, through departmental and faculty right up to the University Marketing and Comms. This aspect of her role has been extremely well-received on campus, as busy professors delight in having one single consistent person to deal with concerning their marketing.

The tale of BrowserStack - Tom

Continuing his series of talks concerning security, Tom Natt used the real world example of the recent attack on BrowserStack to illustrate what can happen when things go wrong.

Essentially, BrowserStack had an old computer that nobody used or maintained but was still connected to their network. A hacker discovered this and used the Shellshock vulnerability to take control and gain access to the API key for their AWS (Amazon Web Storage). From this they discovered the database password and attempted to download their entire customer database. This was when BrowserStack became aware of the hack and acted quickly to shut them down. It is still reckoned that 1% (approximately 5000 users) of the database was compromised.

We were about to use BrowserStack to assist us with some work, so this attack and the way that BrowserStack handled it (in terms of securing their system and managing their public profile) went a long way to reassuring us that they were still a suitable partner. Tom also made the point that having just been hacked, they were likely to be awake to the danger right now because of their recent experiences.

Alpha update - Ross

Our the last seven weeks the team has been working on several alphas (CMS, homepage, events, prospectus) and these have all been presented to members of our Digital Steering Group - which is comprised of almost all of our pro-vice-chancellors as well as the movers and shakers in senior management. The feedback has been overwhelmingly positive, with very enthusiastic engagement with aspects of the homepage and the CMS in particular (our most 'mature' alphas). Our plan was always to get the new homepage and areas of the site controlled by the new CMS in front of staff and students as soon as possible, and with the full support of the DSG, we are looking to do this in December.

 

Show & Tell, October 24 2014

📥  CMS, Design, Development, Show & Tell

We celebrated 11 months of Show & Tell last week with another Show & Tell. On the agenda this week: editorial calendars, rebasing, analytics and some exciting new alphas.

Flow - Charlotte

Last month, Rhian talked about how she and Charlotte had searched for an editorial calendar tool that did everything they needed, but didn't come packed with superfluous features. After initially turning to Google Spreadsheets, they've now spent two weeks trialling Flow, and Charlotte updated us on their first impressions.

They particularly liked how Flow offers:

  • a clear calendar view, with the option to drill down into the details
  • quick scheduling and tagging of items
  • dragging and dropping items between dates
  • the option to look at individual calendars, or an overview of everything.

Overall, we like Flow and we might use it for more editorial calendars in the future.

Ace of Rebase - Tom N

We've been using GitHub more and more for our version control. Mostly this has been a happy and prosperous time, but one aspect of Git has been repeatedly responsible for screams of horror in the office: rebasing. To provide some context for the screams, Tom talked us through what rebasing is, why you should do it and what can go wrong.

Git allows multiple people to work on a project simultaneously and engage in jolly cooperation. One master copy of the project exists, with everyone working on different features in their own individual branches, which are copied from the master. You can then merge these branches back into the master copy and combine everyone's work.

But what if other people have merged their branches into the master copy before you? Your branch is now out of date. You may know the feature you've been working on will still play nice with the new master, but if you try to merge it back in normally, you might overwrite work that people have done since.

This is where rebasing comes in. Essentially you need to change history and pretend your branch started with the current master, not the one you actually started with several versions ago. You can then add your work to the project without wiping out anything else that's been done since you started it.

Boromir: "One does not simply Git rebase it!"

Boromir, who destroyed the fellowship of the sprint team after overwriting the repository.

Rebasing is fiddly stuff - when it's done right, it's great, but get it wrong and you could lose a lot of work on a project. Tom's top tip for avoiding extreme pain and suffering was to use interactive mode when you rebase, or everything goes boom.

bath.ac.uk analysis - Takashi

Are we putting the right amount of effort into the right places? Takashi recently did a top level analysis of bath.ac.uk to compare the size of our various sections with how much attention they get from our users. He presented his findings, which included:

  • our study section gets the most traffic
  • the Computing Services section is our biggest in terms of size and number of files
  • many CMS users have edited less than ten pages in the last six months, but some have edited over 500
  • the rate of users accessing bath.ac.uk from Google is rising, while traffic from Facebook is dropping
  • visits from social media tend to be shorter and less engaging.

Takashi also wowed the room with some good-looking treemaps and fielded some questions about his information visualisation secrets (Google Spreadsheets).

Prospectus alpha - Rhian and Liam

Rhian, Liam and Tom T have spent several weeks working on a new app to collect and update the information in our prospectus.

We want our prospective students to get a consistent experience, so we need to integrate the content we put on the web and print versions of our prospectus.

Rhian and Liam gave us a demo of the shiny new Ruby app and showed us how adding a new course would work. User testing has already given the team some very useful feedback, so they'll be testing it with more of the app's future users as they continue to work on it.

Future iterations will tackle workflow and version control, and we hope the new app will be an improvement for the people who create the prospectus and the people who read it.

CMS alpha - Dan

The CMS alpha is the biggest project we're working on at the moment, and Dan's been handling the user interface (UI) for the editing app.

The UI for the CMS needs to be:

  • clear
  • concise
  • consistent
  • accessible.

After setting out these requirements, Dan gave us all a demo of the UI he's been working on and showed us what editing different content types will look like.

Ros from Monsters Inc with "FORMS" in big letters

Sometimes you've just gotta have them.

The new UI looks much more straightforward and user-friendly than our current CMS, and it also confirms to Level AA of the Web Content Accessibility Standards.

Work on the alpha continues this week. If you want to find out more, have a look at Ross's blog post about our plans for the CMS.

We are changing the University of Bath CMS

  , ,

📥  Alpha, CMS, Development

We are changing the content management system (CMS) that is used to update www.bath.ac.uk. This is a significant development in the University of Bath’s efforts to deliver world-class digital communications. The new CMS is currently at prototype stage and will go live in early 2015.

The importance of digital publishing

Groups across the University depend on our website in some measure for engagement, marketing or delivery of services. As a result, they also depend on the CMS being fit for purpose.

There are around 13,000 HTML files managed through the bath.ac.uk CMS. These have been produced by the 325 members of University staff who have a CMS account. Over 50% of these publishers have used the CMS in the past 6 months. Of the ‘active’ users, around 25 make use of the CMS on a daily basis.

The Digital team follows trends in digital publishing and, based on the example of other large institution websites, it's clear that we should be getting more from our CMS. More importantly, our publishers - both regular and irregular - have told us through their support requests and in person that they are frustrated by the limitations of the current CMS.

Making a CMS fit for our purposes

We want to make our website more interesting and useful, and to help us do that we need to make publishing to that website quicker and easier. By making the CMS less onerous to use, publishers will have more time to concentrate on quality creation and curation of content.

An obvious question is, which CMS will we use? But the more important question is, what do we need the CMS to do? What features will it have?

Based on our analysis of publisher needs at the University, the core feature set of the new CMS will include:

  • dashboard-based interface to make it easier to find and manage content
  • structured content templates making publishing choices more straightforward and pages quicker to create
  • markdown and a compact WYSIWYG will replace HTML to simplify formatting
  • category tags to knit content together
  • clearly defined publisher roles and permissions
  • access to the CMS without classroom-based training
  • direct access to content performance data to inform editorial decision-making about what to publish and when.

These ‘starting features’ and those that follow on from them will be sequenced on a CMS product backlog (a webpage containing prioritised cards on which each feature is represented). Publishers will be able to subscribe to the board and keep track of the progress of feature developments they are particularly interested in.

Starting with an alpha

Setting up a new CMS and transitioning all our publishers and content across to is a complex undertaking. So we have to start small-scale and develop the capabilities of the CMS on an iterative basis.

It all starts with an alpha phase. The objective of the alpha exercise is to build a working prototype of the CMS. This will be used to test our approach and help us understand what it will take to deliver the CMS on the scale that’s needed to support our entire university website.

The development of the CMS alpha is underway. In November 2014 we will start using it to manage the content in bath.ac.uk/about. In January 2015 we will report on the results. Between then and now, we will be running regular demos and user research workshops with publishers around the University (details of which will follow).

Digital team member doing a demo of the CMS

Prototyping the publishing interface for the CMS alpha

Putting users first

From February 2015 we will take the learning from the alpha and begin rolling out a beta phase of the new CMS and the process of moving our publishing activity to this new platform. It will take a significant effort but the rewards will be worth it.

Let us be clear, better digital publishing will not be achieved by changing our software alone. Nevertheless, a simplified application will make publishing and editing quicker, help improve content quality and make our site more useful and engaging for the millions of people who use it each year.

Monitoring and alerting

📥  Communication, Development, Tools

Almost all of the services the University provides are run on servers based on campus and which are managed by the Computing Services department.

Although many of these servers are now virtual, we're not yet at the point where the failure of one server prompts another to be automatically created to replace it, or where it is easy to do that replacement by hand at short notice.

This means that we sometimes have unplanned downtime.

Five months ago we expanded our usage of the off-site monitoring system Pingdom to check not just the availability of our homepage but also nine of our most popular pages and services.

It checks the web addresses of those pages and services every five minutes (or every minute in the case of www.bath.ac.uk) and if it detects a problem it emails our support desk and sends me a text message.

When we've found out what the problem is, we put a brief explanation up on our web status Tumblr and again when the problem is resolved. This supplements the information published by Computing Services on their Twitter feed but also allows us to provide more specific information when we need to.

This is early days in exposing our service availability, and we'd like to get to a point where we can summarise recent data in a way similar to GitHub's status page but we probably need a bit more research on what our users would like to see first. There's also lots more fundamental work we can do in ensuring that visitors to our services don't simply get a 404 or blank screen when something isn't available!

So, what information do you think we should be making available, and how should we be doing it?

Update: I forgot to mention that Pingdom lets us make our service availability public, and you can browse that data in detail.

 

New blogs, stats for bloggers and drafting in WordPress

📥  Blogs, Development

We are continuing to develop blogs.bath.ac.uk as new bloggers join the network, as the number of posts increases, and as more readers start landing on and following our blogs.

Chris and Tom T spent last week setting up some new features and tidying things up across the network. Here are the highlights:

New blogs

We've welcomed 5 active blogs onto the network since we upgraded blogs.bath.ac.uk in March, including:

As well as demonstrating the range of activity going on here at the University, they also swell the number of bloggers. To make it easier to keep in touch with the owners of blogs ('blog admins') we've set up a new mailing list, which we'll be using to share occassional, relevant information about analytics and features for blogs.bath.ac.uk .

Those wanting to start a blog and join our illustrious ranks of bloggers should email web-support@bath.ac.uk with the following info:

  • what the blog is about
  • what you want it to be called
  • which categories you want to associate it with
  • who will be posting to it.

There's an earlier post with more detailed information about starting a blog.

Access to stats for bloggers

Blog admins can now find out how many visits their blog receives, and which posts and pages are most popular.

To access 'site stats' for your blog, log into your blog's dashboard (just like you would if you were going to make a new post), click on 'Jetpack' in the sidebar and then click on 'Site Stats'.

From the stats dashboard, you can explore:

  • views by days, weeks, months or all time
  • where traffic came from
  • which posts got the most views
  • what search terms were used to find the blog
  • what links readers clicked on.

All useful stuff that can help bloggers work out what to post about and when.

There is also a box on your first dashboard screen (when you login) that provides a summary of the blog's stats.

Stats are available in WordPress from July 28th onwards. Traffic and engagement metrics for each of our blogs are also captured through Google Analytics, so if you are looking for older or more detailed analytics, drop us a request via web-support@bath.ac.uk.

Keep in mind that if you are a contributor to a blog rather than its owner, you will need to ask the blog admin for a readout.

Overriding imported formatting

We've set it so that when you paste from another source, like Word, the WordPress editor strips out all the markup that comes across hidden in the paste.

The paste will retain the line breaks but no other formatting. This will prevent weird formatting being accidentally brought into blog posts that WordPress and the page templates don't recognise, and which can make the posts hard to read or even look just plain broken.

Our big tip is to compose in WordPress itself rather than using something like Word. WordPress provides all the formatting options you should need in a familiar toolbar format, and it autosaves regularly so there's no need to fear suddenly losing work mid-draft.

Next on the roadmap

Over the course of the next 12 months we'll be adding new features and iterating the design of blogs.bath.ac.uk regularly in response to user feedback and requests from bloggers.

The next sprint - in September - will provide the ability to filter blogs by thematic category and by recency on the landing page, which will help readers find specific blogs and discover more of what's to offer across our network.

If there are features you'd like us to consider, email web-support@bath.ac.uk.

 

A more accessible landing page for staff

📥  Design, Development

In a large organisation such as ours the range of input and navigation methods covers a wide spectrum ranging from mouse/pointer and touch screens to screen readers and voice recognition. We have a duty to ensure all users can access our information no matter how they navigate the site. Our delivery principles reinforce our commitment to put users needs first and foremost.

I've just completed a sprint to resolve a number of accessibility issues on our internal staff landing page - a high traffic page used by university staff on a daily basis. Some of our colleagues had raised issues regarding their ability to efficiently navigate the multi-tiered menu that provides access to key online tools and services for staff.

University of Bath staff page

Some visitors to the staff landing page had problems whilst accessing submenus

The issues

  • Accessing the Javascript-powered flyout submenus was at best erratic and at worst completely impossible using only keyboard input
  • Contextual feedback for assistive technologies was absent. Users unable to see the visual indicators were not aware the links had related submenus
  • 'Clickable' links were not explicitly declared as such
  • Some links were only used as 'hooks' for the Javascript functionality. These links were navigational dead ends for users unable to access the submenus

Our solutions

  • Increased the 'touchable' link area to encompass the image and the title. A small win for touchscreen device users :-)
  • Added relevant ARIA roles via HTML and Javascript. These provide additional information to visitors using assistive technologies regarding the role and status of elements on the page
  • Rewrote the Javascript functionality to ensure the menu is fully navigable via keyboard

But does it work for everyone?

Not quite yet. But we are working on it…

Although these changes are a positive step towards unlocking our content for all our users the solutions implemented above only really deal with those who navigate via keyboard, mouse or touch.

We're now actively looking at ways to give our users with voice recognition software the best possible experience on the University of Bath website. Simplifying navigation options and avoiding jargon will go a long way to helping those using only their voice to get around.

 

A Week With The Digital Team

📥  Communication, Development

Hi,

I'm Rob, an A-level work experience student who was fortunate enough to be given the opportunity to join the digital team last week.

The past week has been a great experience, after being introduced to the self proclaimed king of the nerds and the rest of the team it was straight to work with Tom on the development of a replacement application for the old go.bath URL shortening service which is the first Padrino application to be shipped by the team.

Ship It

It was a great week working with the team, and I am very grateful for the skills that they have helped me to develop; from working amongst them in the twice weekly coding-practice sessions, to the weekly show and tell presentations and also being a part of the agile development practices.

Thank you very much for having me!

Thank You

 

Concatenate, minify, embed, serve.

📥  Development, Tools

Building a modern website which also performs well is hard. The amount of JavaScript and CSS we add to our pages is going up, but we still need to keep them loading quickly.

Tools like Grunt and Gulp help us manage these expectations by automating some of the hard work, and so it was that the development team spent Thursday in Bath's co-working hub, The Guild, learning about how to make best use of these tools from University of Bath alumni Jack Franklin and Ollie Jennings.

In the past we've used a similar tool for automating some of the hard work of managing and deploying back-end applications, so we were really interested in getting an in-depth look at tools designed for doing the same thing for the front-end bits of our sites.

Grunt and Gulp are both JavaScript-based build tools. They do pretty much the same job as one another, but with a different approach to task processing (Grunt is a synchronous build tool, Gulp is asynchronous), and using a different syntax.

Using either of the two it is trivial to convert SASS to CSS, concatenate your JS and CSS, minify them and then automatically add all your JS and CSS to your HTML in specific locations.

The session learning about the two tools was excellent, with everyone in the team learning lots, and it's likely that we'll soon start working with Grunt on packaging up and delivering our front-end assets!

 

Our latest release for blogs.bath.ac.uk

📥  Development, Style, content and design

When we upgraded blogs.bath.ac.uk in March, it was the first step in our ongoing mission to improve our provision for blogging. Tom T and Dan returned to blogs.bath.ac.uk last week to make a series of improvements based on your feedback. Our changes went live on Monday and we're excited to share them with you.

A new blogging directory

The blogs.bath.ac.uk landing page previously displayed all the latest posts from blogs across the network. This meant that the selection of blogs discoverable from the landing page changed from day to day, with less frequently updated blogs getting lost in the shuffle. We've now changed this to a list of all our blogs, although you can still view all recent posts from across the network. The search tool has also been removed from the homepage, as while you can search within individual blogs, we don't currently offer a search across the whole network.

Clarifying our colours

Following readability issues in some browsers, we've changed the main text colour to a darker shade. The default link colour has been changed from pink to blue, although you can still see a pop of pink on hover.

Screenshot of original blog layout used on the Digital team blog

Before the refresh: we're thinking pink.

Screenshot of the new blog layout on the Digital team blog

After the refresh: we've given our template a fresh lick of blue paint, darkened the font for better readability and improved the spacing.

We also set the default colour of the customisable stripe in the header to grey (although we've chosen a fetching green for our own blog). You can pick your own custom colour in the Dashboard under the Appearance menu by selecting Customise.

Space to breathe

We've increased the spacing between blog articles and improved the spacing in the header, particularly on small screens. We've also tidied our caption formatting and added more space between the bottom of captions and the top of the next paragraph, so your images and captions can really stand out.

Fixing up the footer

The "More blogs like this" section in the footer of each blog has also been reworked for better readability on mobile devices. Links will now fit the full width of small screens, rather than squeezing into two narrow columns. We've also fixed the link to the administrator dashboard and updated the default branding image from a GIF to a shiny new PNG.

What's next?

We've still got plenty of improvements planned for blogs.bath.ac.uk, including analytics for bloggers so you can see where your audience comes from and what your most popular posts are.

If you're not part of blogs.bath.ac.uk yet but would like to be, find out how you can start a blog.

Farewell IE 8. It's been emotional.

📥  Development, Tools

Dodo by Ballista at the English language Wikipedia

Perhaps the wrong kinds of emotions...

Aieeeee!

Web folk of the world feel anguish in supporting out of date versions of Internet Explorer, particularly when trying to use current features. For one site with users on IE 7, they famously offered to buy people brand new computers as a more cost effective means. And even though Windows XP (and with it IE 8) will be officially unsupported by Microsoft in a few days time, there is still a campaign to get its global usage below 10%.

Our recent work to upgrade our Research website to Foundation 5 was the latest encounter with IE 8 problems. For one thing, Zurb (the creators of Foundation), do not support IE 8. Foundation 5 comes with jQuery 2.0 and that doesn't support IE 8. Up until working on the Research site we got away with it, but this site in particular made more use of JavaScript than our other sites built in Foundation - including this very blog that you are on, Dear Reader.

What do the stats say?

We did try to make our code work in IE 8, but we found that the core Foundation scripts were throwing errors which caused our other JavaScript to not execute. It looked like a huge amount of time and effort to solve, so we did the sensible thing and looked at our IE 8 usage stats. It was my task to get the figures.

I looked at the recent trends and found that in the first quarter of 2014 overall IE 8 usage of our total traffic from outside the university accounted for 4.13%. I also wanted to check the conventional wisdom that it's mainly China stuck on Windows XP that push those numbers up. The numbers for visits from China on IE 8 came in at a surprisingly low 0.41%.

IE 8 is going the way of the dodo

The trend is definitely downward as for the first week of Q1 the share was 5.07% down to 4.52% by last week of Q1 whilst the previous year's Q1 share was 7.73%.

With these figures we were able to take the executive decision to demote IE 8 to "degraded support" status. OK, so it's not really the end of IE 8 for us but it should mean we spend less time doing work that doesn't have much of a benefit.

And with that discovery, there was much hollering and high-five-ing in The Digital Cave.

Win!

Here are the stats in a friendlier table:

IE 8 browser share of all external traffic to www.bath.ac.uk

Period % of total visits
Q1 2013 7.73%
Q1 2014 4.13%
From China Q1 2014 0.41%
1st week Q1 2014 5.07%
Last week Q1 2014 4.52%