Digital Marketing & Communications

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

Tagged: javascript

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?


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.

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.

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 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!