Digital Marketing & Communications

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

Topic: Development

When there is just too much to do

  , , ,

📥  Development, Project management

As a department looking to assist all other groups in the University, there is always a huge demand on our time. We do our best to help everyone, but inevitably there are times when we need to do three things and only have time for two. To help (I believe the phrase is "temporarily increase capacity") we've been experimenting with outsourcing. In theory, it is the perfect solution - instead of spending time to get a product, we spend money and (wallet permitting) everyone is happy. Our experiences haven't been quite so straightforward.

Know what you want

When you're working in-house you can afford to change your mind as you go along with minimal disruption. When you're working with an agency that causes disruption, delays and eventually a noticeable degradation of results as your allotted time is exceeded.

Basically, working with an agency is a waterfall process. Can you work with an agency in a more agile way? I'd like to think so, but we've not managed it yet.

What this means is that you need to do your homework. The project specification needs to be significantly more detailed than you might be used to in house.

Know what you're getting in to

Think you're just buying extra capacity? No. What you're really doing is swapping operational burden for management burden. Someone needs to be available as a constant point of contact, someone will need to review the incoming product, someone will need to ensure the deployment infrastructure is in place, someone will need to put it live. All this means time - so the question becomes "how big does the project need to be, before it's worth someone else doing it?"

If you think you can skimp here, remember all those times when you've been making something and your client hasn't been available to make important decisions? Well, now you're the client. You need to be around.

Know what you're getting

We have had instances where we have asked for site redesigns and been shown some interesting effects - but when we've come to do the integration work we've found essential javascript functionality has been missing. Why? Could be a lot of reasons, but the key is to specify up front exactly what you expect as a deliverable. If it's not written down, don't expect it.

Know where it's going

You know what is being delivered and you're on top of the process for it getting to you. At some point it's going to need to run on your systems. Someone needs to stay ahead of development, ensuring that databases have been configured and the infrastructure exists. Sure, you can try putting the agency directly in touch with your sysadmins but solving infrastructure problems takes time and if you're paying consultancy rates it's going to get expensive - and if your sysadmins don't work for the same department their priorities are inevitably going to be different to yours.

Know what's going on

Unless you're paying someone to run a service for you, at some point there is going to be a handover. You need to know what has been going on and, likely, which decisions have been made along the way (and why). Once again, this is a time investment. Unlike before, you can skimp here - but if you do, you'd better be ready with some more money when something goes wrong in the future.

We've learned these lessons (and others) the hard way. Recently we have worked with Beef on the revamping of our new internal homepage (on-campus beta release last Thursday, full release next week - more to come!). Our previous experiences helped no end and we had one of our smoothest experiences to date. There are still lessons to be learned, but we're confident we're moving in the right direction.

Want to cycle bits of your page? We can help

  , , ,

📥  Development

Right in the middle of our homepage is an area of featured news which cycles on a timer. When we were originally implementing this feature back in 2011 we had a look for a library to drop in, but couldn't find one which met all our requirements:

Progressively enhanced
The page needed to present a working page to visitors without javascript - the most important feature needed to be loaded and we didn't want the left/right controls on-screen if they weren't going to do anything.
Cycling HTML blocks
Most gallery-type features will cycle an image, but we had an image in a div, usually with some text underneath. In practice, we really need to be able to cycle between arbirary blocks of HTML.
Low initial page load
The obvious way to solve this problem is to transfer all the data on initial page load and show / hide different elements as required. The problem with that solution is that it loads all the assets up front, and we were talking about a series of high quality images. To be kind to our visitors on low or limited bandwidth connections we wanted to only load elements when they were actually going to be seen.

We also had to consider the maintainability of the library and the content it displays - obviously the homepage changes frequently so it couldn't be a major job to do it!

We couldn't find anything which solved all these problems so we rolled up our sleeves and created our very own jquery plugin. It has proven useful to us - not only on the homepage, but also elsewhere on our site. Now, a few years on, we have released this code under the Apache license for the world the enjoy. You can find it on github under the "bathweb" organisation. Keep an eye on this - we aim to release other interesting and (hopefully) useful code in the future.

The repository contains a working example and all the docs you'll need to get it up and running. Why not check it out and have a go?

Is IE6 really used in China?

  , , , ,

📥  Development

According to Microsoft's own stats, Internet Explorer 6 still accounts for more than 20% of web browser usage within China.

Around a quarter of our 4,500 international students are Chinese (source PDF) and so we've always been really hesistant about switching off support which would affect a demographic which accounts for over 200 people.

But is this concern well-grounded? For several years we've listed IE6 as a browser with 'degraded support', but it's now been more than ten years since it came out - does the usage really justify still accounting for a browser which had existed for 6 years by the time the iPhone was released?

Chinese visits by browser

Chinese visits by browser, August 2012 - November 2012

Google Analytics tells us that over the last three months, IE 6  was used for more than 15% of visits from China - this is 5 percentage points more popular than the highest ranked version of Google Chrome, which sits at just below 10%. The only mobile browser to appear in the top 10 is the iPhone 5's browser, but even this sits at just 5.5%.

As a whole, IE is utterly dominant, and Firefox doesn't appear at all - a very different picture to the one we drew a few months ago when looking at our overall traffic which concluded that IE, Firefox, Chrome and Safari take approximately a quarter of the market each.

To answer whether we still need to support IE6 we really need to look at which areas of the site those IE6 users are accessing, but in the meantime this is some interesting food for thought.

Doing things better: relaunching our online Undergraduate Prospectus

  , , , , ,

📥  Communication, Design, Development, Marketing, Team, Tools

BBA-blog
Our current online Undergraduate Prospectus launched back in February, after a year's worth of hard and rewarding work. From that time there were two key aspects of the project that gained us huge successes, which I will be outlining in this post.

Focus Group sessions

Something that we'd started with the redesign of our homepage, we continued and enhanced with the revamp of the prospectus. I cannot understate the value in carrying out this activity. Suspend your cynicism that this is a vapid, marketing focused (well, it is but actually it's more consumer focused) assumption affirming, lip service to finding out your user's needs. This is the only time you gather qualitative data from your target group. Otherwise you're mostly guessing.

I mentioned affirming assumptions. That's actually a good thing. Our Esteemed Designer wasn't sure about the pink highlighter circling around the Apply button, but when we took it to our first focus group at a nearby school we were pleasantly surprised by the enthusiasm and positive reception. This was a group of Gifted and Talented young people in year 12, very much amongst our target demographic. They felt that our colourful design was right for 16-17 year olds and not "dull like other universities, who treat us like we're 30".

The colourful design is right for us as 16-17 year olds and not dull like others, who treat us like we're in our 30s

Another session a few weeks later (this time with around 60 students - a logistical triumph!) repeated this sentiment: that the colours and the pink highlighter on Apply resonated with them.

What's interesting is that we could easily have ditched that design element. Because we didn't feel sure, or our stakeholders in their 40-50s might have objected. The feedback from the focus groups gave us the confidence, and the evidence, that it was The Right Thing To Do.

This was the first time I'd personally been involved in running a focus group and interacted directly with our "clients". Having feedback that what you're doing is good, is deeply rewarding. Since then I've also been involved in running focus group sessions for the School of Management website. I hope to be involved in more of these.

The Play Framework

This point is on the technical implementation of the prospectus, but one worth stating. Up until now we would be using some heavyweight, enterprise level software frameworks to build our systems with: Struts 2, Spring and Hibernate. The very same toolset that blue-chip companies will use. But in being so heavyweight for a small team of developers it means, excuse the pun, a lot of weightlifting to get small things done. For example we would have to do a lot of work on configuration and setup to support the features we want to build. This was a burden that got in the way of achieving the goal of building the actual feature. And would also be hard to maintain.

We had plenty of experience to go by that lead us to this conclusion, like building the previous prospectus with this toolset.

Before starting this project last year we were assessing a new Java web-app development framework called Play. Our first reaction was that it felt a lot like Ruby on Rails, but this is no surprise as Rails espouses "convention over configuration" and Play is simply following good conventions.

The main things we love about Play are:

    The focus we can place on building features compared to our previous working practises
    The plugin system where commonly required features are already implemented which you can (ahem!) plug in.
    But mostly it's the rapid deployment during development.

The traditional workflow for Java requires an intermediary compilation step and you have to sit there while you wait for it to finish. With Play you simply refresh your browser as soon as you've saved your file.

These two aspects of the the online Undergraduate Prospectus project have helped to make it the success it is now. Play made getting something up and running quicker than we have in the past - by allowing us to not burn time on startup costs. Running the focus groups has ensured that we are delivering to our prospective students what they desire and require. Two ingredients we'll be using again in future projects.

Review of browser usage stats

  , , , ,

📥  Development, Tools

I recently thought it would be worth looking at our browser stats to see which browsers people are actually using when they visit our site. When I saw the recent numbers I was a bit surprised and thought it would be worth reviewing the changes over the past few years to find out:

  • Where have we come from?
  • What has changed in the past 3 years?
  • Where are we now?

I also wanted to produce some graphs to display the information visually rather than having lists of numbers in tables.

Show me the graphs

I'm going to jump straight in to the results now, but the details of where the data came from and how I produced these charts is covered later for those who are interested.

What our users were using in July 2008:

Browser Share / % Visits - July 2008

What our users now use (March 2012):

Browser Share / % Visits - March 2012

These 2 charts are massively different! They show how much has changed in the browser market, and consequently in web development, in less than 4 years.

No Chrome, no Opera, no Android to speak of in July 2008 (see disclaimer at the bottom) and Internet Explorer's share has more than halved.

How did we get here?

The change over time from July 2008 to March 2012:

Browser Share / % Visits per month

The same data as above, in a line chart:

Browser Share / % Visits per Month

So we see the steady decline of IE, the rapid growth of Chrome and (to a lesser extent) Safari and the squeeze of Firefox. Opera is the constant tiny fraction and in recent months we see the Android browser appear in the stats.

So what?

I believe it's important to have an understanding of the browsers that people visiting our site are actually using. We can then develop the site to work best for them. That may mean ensuring pages render well in older browsers or being able to use some new technology because our users' browsers support them - either way we can make things better for people visiting the site.

What about IE?

There is one last graph which I find interesting and should help to answer the recurrent question "Which versions of IE should we support?":

Internet Explorer Version Share / % Visits per Month

There appears to be a strong argument to ignore IE6 (finally!) and focus more on IE8 and 9. Unfortunately IE7 doesn't look like it's going away any time soon.

What's next?

There is of course a lot that we can do with the Google Analytics data. I'd like to look at the different versions of all the browsers, filter by country/language/OS and also compare our stats with other websites.

If you have any interesting browser stats for comparison, let me know in the comments.

Getting the data

I wanted browser stats for the last few years so I went straight to Google Analytics (GA), found our profile for external traffic and delved into the numbers.  However, it soon became clear that gathering data for the past few years from the web site would take ages (as I'd need to export data for 45 months individually).

So, I decided to get the data from GA using the API.  After looking around for existing code to help me, I settled on a pure JavaScript solution as a starting point.  This not only grabbed the data from GA but also generated graphs from it using Google Chart Tools.  It seemed perfect!

Or so I thought.  But, as so often is the case, I needed to modify the original code a lot more than I first expected, to get it doing what I wanted.  There were a few issues to overcome, including 414 errors (which were new to me) from the Google Chart API (documented in the FAQs) and the limited dimensions of Google Charts.  A really helpful tool for checking the data coming from GA was the Data Feed Query Explorer.

Once I had tweaked the code, understood the data formats and chosen my chart colours, I was able to get useful output and generate the graphs I've included in this post.


Disclaimer
All data sourced from Google Analytics via the Data API. Values less then 0.5% have been ignored. All data is from external visits to the web site. Graphs were drawn using Google Chart tools and are accurate to 2px. Use caution when interpreting the graphs. Past performance is no guarantee of future success. Lines can go down as well as up.

Going HTML5

  ,

📥  Development

HTML5 logoEdge Hill University recently launched a new website. It's HTML5.

We're overdue an update to the list of which browsers our website officially supports, so here's a quick run down:

IE represents about 50% of all visits to our site (that's visitors from both on- and off-campus). Of those, 75% are IE8, this is followed by IE7 and IE9 in that order. Of our IE6 visits, there are twice as many users in the UK as there are in China.

A quick comparison on caniuse.com shows that by switching to HTML5 we aren't going to use any features which could be used by our biggest audience by percentage, but if we're smart, we can start to target standalone apps which don't necessarily use our main (XHTML 1.0 Transitional) doctype, or have a high percentage of non-IE users, and introduce new features to them using tools like Modernizr.

IE10 Platform Preview 2 has just been released and this does contain some basic HTML5 functionality such as support for some of the new form elements so it's definitely worth getting ready for the future. We'll probably create test areas of our site, not available to the public, which use the new HTML5 features so that when the new browsers come out, we can easily see whether they're yet good enough for our purposes.

Web Developer wanted!

📥  Development

UPDATE: applications are now closed for this position

You're a PHP or Java web developer looking for a challenge, a 6 month contract, and to earn up to 17,823 pounds. As it happens, we've got the perfect opening and you can apply right now!

We're looking for someone with a passion for developing friendly, usable applications to help us revamp the the process our students go through when they apply to study here. Following that, you'll lead the development of an innovative application to help international students get in touch with other students from their home country who may already be here, and to help ease their transition into life in the UK. It could include integration with Facebook, pulling data from their student application, forums, a mobile interface or whatever you see fit, all wrapped up in our brand-new visual identity.

The application form is on go.bath.ac.uk/webjob and you can see our Web Development Manager, Phil Wilson, give a quick overview below:

[flv]http://www.bath.ac.uk/video/jobadvert/webdeveloper.flv[/flv]

The offer closes pretty soon (on Wednesday 27 October) so act now!

Finding people while mobile

📥  Development

As part of our innovation time, I thought it would be interesting to get one of our applications working on a mobile.  Not only would this give me the opportunity to try out some new technologies and develop for a different display device than we generally do from day to day.   It also gave me the chance to play with my new iPhone at work.

Our Person Finder application seemed the logical choice for use on a mobile as phone numbers and email addresses are both things you might need when you are out of the office.

(more…)

Implementing innovation

  , , ,

📥  Development, Tools

A few weeks ago I got the chance to be the first to make use of our innovation time.

After watching a demo on hacks.mozilla.org I wanted to experiment with HTML5 and Firefox's new support for drag and drop of files from your desktop to our web-based file sharing system, the Learning Materials Filestore.

The documentation they provide is nowhere near enough to actually implement this, so I was about to give up when I found out that only two days earlier the people who write TinyMCE had released Plupload, a library for doing exactly what I wanted!

(more…)

Welcome back!

  , , ,

📥  Communication, Development, Team, Tools

So what an exciting first few weeks back we’ve had!

We started off nice and easy, picking up all the support requests that had been filed over the Christmas break and, after a suggestion from Kelvin last year, put together a demo of an augmented reality map of the University campus using Layar (which I will post more about later).

We also started preparing for our next set of work, delivering the most-requested features and fixes to our news publishing service, which is based on WordPress.

The shortlist of work we’d do was created in December during face-to-face meetings with members of the Press Office after which it was published on our wiki using the survey macro to give everyone a chance to vote and comment on which items were most important. At the same time, we got on with estimating all of the listed items so that once voting was complete we’d be able to balance the importance with how long they were going to take!

And then the snow came.
Twitter message about the closed campus

Snow on campusFortunately the University had prepared for this already and an emergency telephone number had been set up with the current status of the campus and there were prepared news articles ready to be published. Of course, yet again the use of Twitter was instrumental in delivering the message that campus was closed as quickly as possible (and at least one person enjoyed their 7.30am tweet delivery!)

Sadly for us in Web Services, there are excellent remote working facilities provided by Computing Services, with a good VPN and remote desktop connection to work PCs and a wake-on-lan facility if your PC is off. There is also an instant messenger server which enables both one-to-one chats and chatrooms for groups of people which enables us to co-ordinate effectively even when we’re at home in our PJs.

The combination of remote desktop provision and web-based tools for documentation and issue-tracking meant we were able to complete the work for the news system on time. Now that the snow's melted we're just waiting for a moment to deploy our changes and show the Press Office what we've done!