While I’d love to take credit for everything, my involvement was mostly limited to the initial proof of concept and vague arm-waving spec-changing suggestions for how it should work and look. Such is the power of a manager.

WordPress has come a long way since it’s blogging roots and now has some powerful features that can be used to tailor the system to a wide range information. Custom Post Types were first introduced in version 3.0 and provide a way of storing structured information without having to create additional database tables. WordPress itself uses CPT for posts, pages, attachments (e.g. images) and menus but the possibilities for extensions are endless. Plugins often make use of CPTs to implement things like events listings, movie reviews and product catalogues but anything can be put in them and you get all the functionality that WordPress posts or pages have for free.

We have a really basic Story custom post type containing – as a minimum – just a title, image and a paragraph introduction:

Stories and Posts are linked together with a many-to-many mapping using jQuery Tokeninput to make it easy to select which story a post should be related to.

Viewing a story triggers a custom template in our theme that is used to render the page. The template first displays the story title, image and content then looks for all linked posts and outputs them to the page, newest first.

We’ve tried to keep the Story custom post type simple enough that it can be used flexibly in lots of different ways. By specifying just a title, image and content, stories can work as a lightweight wrapper for related posts. They’re not designed to replace a full website – for example the Short Story Prize story still links to the Prize’s standalone website – but act as a focal point for the latest news on a subject.

WordPress mints permalinks from the title on initial publication and only change if forced to do so after that so links to stories will still work even if the introductory text changes.

Stories can work as a live blog by streamlining the process of getting content online – once  a story is set up, say for something like a Graduation ceremony – it’s a simple matter of clicking Add Post to Story in the WordPress admin bar and bashing out a quick update, or pasting in a link to a video, tweet or photo:

Custom post types are the key to extending WordPress’ capabilities by managing structured content but there are other features that allow us to expose this information in new ways. Next time we’ll be looking at how our design is able to make the most of our rich media content.

News published through our site often starts life as a press release posted online. Typically it’s a few hundred words accompanied by a photo and calls to action at the bottom telling the reader where to find more information or how to get in touch. These articles have a reasonable half life – linked to from the news website; syndicated across to department websites; sometimes featured on the homepage – and live on in the news archive for search engines to find.

Sometimes, though, we need articles to continue to run and with our old system this involved a bit of a hack – taking an existing article, updating it with the latest details and republishing it to get it to the top of the pile. This never seemed like the best thing to do, but it’s not uncommon for news websites to operate in this way.

Then ITV News broke the mold with their March 2012 redesign. Design agency Made By Many threw away all the preconceived ideas of traditional news websites and moved to a stream of news design – the homepage constantly updating with the latest updates.

What got me interested wasn’t how the homepage implemented the stream idea – unless you’re a regular user I find it a little hard to follow – but how it works with evolving news stories.

Let’s look at one of this morning’s headlines – the news that Morrisons is to begin online delivery via Ocado. On the BBC News website they published a story early morning and I first read a version of their story published at 07:54:

But refreshing the page an hour later adds some new information:

Can you spot the differences?

• Headline swaps “tie-up” for “deal”
• Chart showing share price half way down the page
• Two new paragraphs saying about the Ocado share price inserted at the very bottom of the article

As someone who read the article at 8am I have to scan through the whole thing just to find an extra 30 words.

The ITV News site handles things completely differently. Their stream of news updates clearly show evolving stories. Just like a blog where posts are shown in reverse chronological order we can see the latest news at the very top:#

Just like the BBC News site, the latest take on the story is how the Ocado share price has jumped 40% but this time it’s clearly marked as being updated 42 minutes ago. In this instance they beat the BBC to it – that update was added 36 minutes ahead of Auntie.

This is a really simple example but the approach scales to much bigger stories too where  there is scope to show off the story in different ways. Below is parts of their story on Google’s appearance before the Commons Public Accounts Committee:

I’ve included only a selection of types of update from the full story:

• Video: pulled in from a branded Vimeo channel thought they also use YouTube. Often accompanied by some text to put it into context.
• Short update: gives the feel of a live blog without the lack of context that traditionally occurs.
• Tweet: includes a link back to the original tweet – nice to see journalists citing their sources!
• Quotations: formatted so it’s easy to distinguish ”expert” opinion and comments from journalist’s reporting.
• Photos: nice and big (that’s not a comment on Vince Cable!)
• Links to “full story”: importantly, ITV still publish the more typical “500 words + image + video + quotes” article written by one of their editors which make use of content already published in the news stream. If you’re looking for everything in one place then this is where you can read it, but if you’re following the stream live you can skip the duplicate content.

You can read more about the ITV News design in a blog post by Made by Many and Martin Belam (née Currybet) has written a couple of times about the site.

“Nice story, but what has this got to do with Edge Hill?”

There appeared to me to be many possibilities for this style of news publishing at Edge Hill and it could solve some problems we have with the old site.

1. The hack of resurrecting old articles whenever typically minor changes were made and it needed a renewed lease of life. In these situations there is usually something new that’s happened so adding that information at the top of a story draws attention it.
2. Over the last year or so Corporate Comms have commissioned and produced an increasing amount of rich media content such as video, photos and audio interviews. These have been included in articles but their half life is probably less than we might wish for.
3. Events often have several phases which previously haven’t linked together. For example, the Edge Hill Short Story Prize comprises (off the top of my head):
   • Nominations open
   • Long list announced
   • Short list announced
   • Awards ceremony
   • Winner announcement
   • Interviews with winner
   • Possible follow-up activity such as visits to campus

During the autumn term we discussed the idea with colleagues in Corporate Communications and after mistakenly assuming that the ITV News website was built in WordPress claimed that it would be possible for us to do something similar.

After realising that ITV News isn’t a WordPress site and that no one appears to have done anything similar in WordPress we set about building a proof of concept. This gave us enough to justify migrating the news site to a new platform and has been the key part of the development.

With the site only live for a few weeks, the Press Office are just beginning to make use of WordPress stories, but you can see them in action on pages about the Short Story Prize, Edge Hill’s involvement in Liverpool Sound City and the new £16 million Creative Edge development.

Personally I’m looking forward to seeing, watching, hearing and reading the great stories has to tell over the coming months, whether that’s awards, new buildings or graduation ceremonies.

Next time we’ll go into more detail about how stories were built in WordPress.

Two years ago we began moving some websites to WordPress in order to devolve control of content and structure to Faculties and Departments. WordPress has proved itself a very capable content management system, but more importantly it is now a solid web development framework. It has moved beyond its blogging origins and has handled everything we’ve thrown its way.

Until now we hadn’t migrated any of our “applications” (online prospectus, news, events, jobs etc) to WordPress as the cost of re-writing systems outweighed the benefit but our latest project sees us make the move with a brand new News website.

While news might seem like an obvious thing to move to WordPress there were still a number of significant challenges we had to overcome in order to make the move. We also had a list of requirements from colleagues in Corporate Communications that we needed to tick off and some ideas of our own to make our news website more than “just another WordPress site”.

Over the next week or so we’ll be blogging about how we built the site and some of the new features.

If you work in Higher Ed Web Design you may be interested in hearing us talk about our use of WordPress at IWMW 2013 next month. Sign up for workshop session A7 – “WordPress: Beyond Blogging“!

The most striking thing to me is the upgrade cycle for Chrome. With a 7 day bucket size, the matrix shows we have two new Chrome releases showing just how quickly the automatic update system is able to push out versions.

Compare that to how Internet Explorer updates happen at an almost glacial pace:

I’ve not incorrectly included “Chrome 7″ in those stats – that’s there because we have Chrome Frame installed on Edge Hill machines.

Browser Matrix seems able to visualise data in some ways that Google Analytics alone doesn’t – give it a try and share what you find!

Each area’s unfoldable map shows which computers are free (green is free!). We chose a salmon colour for used computers, because salmon are busy fish what with all the swimming and laying eggs. Or maybe it has something to do with being distinguishable from green for colourblind people.

Like salmon, people move around really quickly so you might find the computer you were hoping for has gone by the time you get there, and another one has appeared. So you can use the app to get a general idea of which computer area would be good to aim for. That’s why we used the signal strength indicator – so you can see at a glance your likelihood of finding a computer in that area.

That means likely.

There’s also a link to the room booking system, so feel free to come here just to book a room.

As well as showing computer usage, it also just shows where there are computers, which can be useful to new students who haven’t fully explored yet.

There’s a shiny new building overview page, that unsurprisingly gives an overview of the computers used in buildings. You might see this around screens on the campus.

There’s also a series of single map pages, just focusing on one computer area:

These single maps will be part of a slideshow shown around campus. We have one for the library which will rotate through the single maps and overview screens, so people can see at a glance where computers are being used. It should hopefully save some time in students’ days so they can so they can find a place to study more easily.

Responsive

The app is responsive – a liquid version that fills to fit the container device window – so use it on your phones and tablets as well.

And that’s it. The plan is to expand to show more computers around the campus. So go ahead and use it, and let us know what you think. Feedback is what sculpts the greatest software. So what would you change to make it better? Does it help you? Let us know.

webteam@edgehill.ac.uk

• JISC – a company that pushes innovative digital technology into UK education
• XCRI-CAP – eXchanging Course Related Information, Course Advertising Profile. It’s a UK standard to describe course information for marketing.

JISC’s goal with XCRI-CAP is to share course information with the organisations who publish it, such as hotcourses.com.

We’re making a feed for our Health CPD courses in the XCRI format so prospective students can find the course they’re looking for.

We moved all our health courses onto WordPress – our CMS (Content Management System) for most of our course information now. It was a good clean break, as we got to redesign the information’s structure to fit the XCRI specification. With the health courses in the CMS, we made the XCRI feed. It passes the course information to the feed aggregators so they can share the information.

Here’s a little information about each phase:

Database Mapping

This involved translating the old database content into the new xcri fields, where possible, and retaining the other useful information. We used the opportunity to strip out any useless information.

This was the ‘get out your spreadsheet and be very thorough’ phase. It was pretty important because the information had to be labelled right so websites could understand it and use it properly.

We continued to the content management system…

Built a new Content Management System (CMS)

We actually extended WordPress, the CMS we use for most of our courses, by making a plugin that saves the health CPD modules. WordPress makes it fairly easy to add new functionality by providing hooks you can latch onto to adapt the software – basically slots to inject your customisations in.

Using WordPress’s custom post types we added courses and presentations to the CMS, and customised the admin area with the right input boxes. A presentation is a living instance of a course – for example, on the Tissue Viability course the Feb 2012 intake and July 2012 intake are different presentations.

WordPress makes it quite easy to add functionality by using existing plugins. We wanted more precise control over the admin page, so we did some of the building ourselves.

Once the CMS was done we transferred the course information into it.

 Built new web pages

We made a page template that displays an individual course’s information.

We’ve still got some work to do on the template, like adding side navigation that links to similar courses.

Making the feed

We built an example feed that holds dummy information first.  We passed this through the Xcri 1.2 validator to make sure it was right. Eventually it stopped telling us we had made massive human errors, so the feed was right. Here’s the static version:

We made the real feed by passing the course information into this template from database.

And that’s where we are so far. Its nearly finished, and hopefully will make it much easier for people to find the right course.

As it turns out, our code wasn’t running so smoothly on PHP 5.2.4 as Arthur Koziel points out there is a problem with Creole and PHP 5.2.4. While we didn’t have the exact same problem, his post highlighted where it could be fixed.

Our problem was that we have a third party product using a Microsoft SQL database. It either always had, or just started to spit out date time values in the following format: Nov 14 2012 07:30:00:000PM note the non standard specification of microseconds. (Not sure which way around the problem occurred because we upgraded a month or so ago, but only just got a report of the problem.)

PHP’s strtotime really doesn’t like that format, and I can see why, horrible MSSQL!

I saw that I could fix this in creole/drivers/mssql/MSSQLResultSet.php by providing an alternate getTimestamp function and using a bit of strptime and sprintf magic. Below is the code I used to fix it. This might not be the most elegant solution, but it works!


/**
* @see ResultSet::getTimestamp()
*/
public function getTimestamp($column, $format = 'Y-m-d H:i:s')
{
$idx = (is_int($column) ? $column - 1 : $column);
if (!array_key_exists($idx, $this->fields)) { throw new SQLException("Invalid resultset column: " . $column); }
if ($this->fields[$idx] === null) { return null; }

$ts = strtotime($this->fields[$idx]);
if ($ts === -1 || $ts === false) { // in PHP 5.1 return value changes to FALSE
// in PHP 5.2.4 this no longer works, MSSQL provides date time as
// Nov 14 2012 07:30:00:000PM
$tsUgly = strptime($this->fields[$idx], '%b %d %Y %I:%M:%S:000%p');
$tsNicer = sprintf('%04d-%02d-%02d %02d:%02d:%02d',
$tsUgly['tm_year'] + 1900, // This will be years since 1900, so we need to add 1900.
$tsUgly['tm_mon'] + 1, // This will be the month 0-11, so we add one.
$tsUgly['tm_mday'],
$tsUgly['tm_hour'],
$tsUgly['tm_min'],
$tsUgly['tm_sec']);
$ts = strtotime($tsNicer);
if ($ts === -1 || $ts === false) { // in PHP 5.1 return value changes to FALSE
throw new SQLException("Unable to convert value at column " . $column . " to timestamp: " . $this->fields[$idx]);
}
}
if ($format === null) {
return $ts;
}
if (strpos($format, '%') !== false) {
return strftime($format, $ts);
} else {
return date($format, $ts);
}
}


I hope that helps anyone else out there maintaining old code on newer systems. If anything it’ll help me if I come across a similar problem again!

Steve Daniels

Firstly, an updated package somewhere along the line broke my fix to libtool.m4. So that needed fixing with:


sudo mv /usr/share/aclocal/libtool.m4 /usr/share/aclocal/libtool.m4.bak
cat /usr/share/aclocal/lt~obsolete.m4 /usr/share/aclocal/ltoptions.m4 /usr/share/aclocal/ltsugar.m4 /usr/share/aclocal/ltversion.m4 /usr/share/aclocal/libtool.m4.bak | sudo tee -a /usr/share/aclocal/libtool.m4


Then you need to follow the manual OCI8 installation method the bit your after starts: “For a manual install, download the PECL OCI8 package”.

Once you get to the following command:


phpize


It’s time to fix things up. The libtool in the package just won’t work when you go to run make. So remove it and link to your local version.


sudo rm ./libtool
sudo ln -s `which libtool` ./libtool


Now you can carry on with the instructions. You may get a few warning messages, but everything should be fine.

Hope that helps,

Steve

Each university has its own way of dealing with their audience so I trawled through and took screenshots of many university and college homepages to compare. You can find all the images on Google+. Here’s a few that caught my eye…

We have templates for Ubuntu 10.04 LTS, and since this is the middle ground between when PHP 5.2 was last shipped with Ubuntu in 8.04 LTS, and the latest and greatest 12.04 LTS I figured it’d be more secure, efficient and easier to implement it there!

Thankfully most of the work has been done for me.. Randy Fay shows how to run Karmic’s PHP 5.2 on Lucid but Sergius14 suggested pinning PHP 5.2 to the Hardy versions and I tend to agree with the reason. I want the latest security patches bundled in!

So taking Randy’s /etc/apt/sources.list.d/karmic.list and /etc/apt/preferences.d/php file and changing karmic to hardy in the file name and file contents gets us up and running. See the attached files to see what we’re running, if you use these files remove the .txt suffix from the file name.

• php
• hardy.list

Because we’re now looking at double the amount of packages, apt is going to complain, we need to increase it’s cache. If you don’t you’ll get an error when you run sudo apt-get update so, following the fine instructions on how to increase your apt cache limit we’ll do this as a one liner:

echo 'APT::Cache-Limit "100000000";' | sudo tee -a /etc/apt/apt.conf.d/70debconf


Next let’s update and install libapache2-mod-php5 to pull in PHP5, Apache2 and the basics.

sudo apt-get update
sudo apt-get install libapache2-mod-php5


Check it’s working by visiting the ip of the server in a web browser.

http://youripaddress/

To check PHP’s working we’ll create a new file calling the phpinfo() function.

echo -e '' | sudo tee /var/www/phpinfo.php


Check http://youripaddress/phpinfo.php to ensure PHP is installed and correctly running. If your browser tries to download a file, you might need to restart Apache to enable PHP.

sudo /etc/init.d/apache2 restart


Now we need APC (There’s a good article on Wikipedia about PHP accelerators, of which APC is one). The php-apc package installable from APT has some unmet dependencies because we’re using Hardy’s packages. We can circumvent that by installing it via PECL instead.

This route isn’t without a few complications because we’re using Hardy’s PHP5.2 some files aren’t in the right places, or automatically included with dependencies.

I added to Randy’s /etc/apt/preferences.d/php the following to get the PHP5 dev files for PECL to run.

Package: php5-dev
Pin: release a=hardy
Pin-Priority: 991


Now we’ll get php5-cli, php5-dev and php-pear (which includes PECL), we’ll update the PECL channel whilst we’re there and then try to install APC with PECL.

sudo apt-get install php5-cli php5-dev php-pear
sudo pecl channel-update pecl.php.net
sudo pecl install apc


AGH!

Errors! As I said before, some files like libtool.m4 and ltmain.sh are in the wrong places and need to be symlinked.

sudo ln -s /usr/share/aclocal/libtool.m4 /usr/share/libtool/libtool.m4
sudo ln -s /usr/share/libtool/config/ltmain.sh /usr/share/libtool/ltmain.sh


libtool.m4 is also missing a few bits since libtool.m4 has been broken down into multiple files so we need to concatenate them back together and append to libtool.m4:

cat /usr/share/aclocal/lt~obsolete.m4 /usr/share/aclocal/ltoptions.m4 /usr/share/aclocal/ltsugar.m4 /usr/share/aclocal/ltversion.m4 | sudo tee -a /usr/share/aclocal/libtool.m4


We also have a missing pcre.h header file. To get that we need libpcre3-dev.

sudo apt-get install libpcre3-dev


This should be it, so lets use PECL to download, compile and install APC (accept all the defaults), enable it in the php.ini and restart Apache.

sudo pecl install apc
echo -e '\n\nextension=apc.so' | sudo tee -a /etc/php5/apache2/php.ini
sudo /etc/init.d/apache2 restart


Now it’s time go back and check http://youripaddress/phpinfo.php to see if APC is enabled!

Congratulations if you’ve read this far and if it helped!

Steve Daniels

For example, our own campus map has all the buildings labelled and is pretty up to date but it’s not to scale or plotted against a real grid system.

We also have a 3D drawing of campus which is used in the prospectus and online in the interactive campus map. It looks nice but again it’s not accurate enough for plotting real positions and it’s a pain to keep up to date.

Google Maps is to scale but missing lots of buildings and some websites are moving away from it to other services because they’ve started charging for heavy users, not something I think they’d do to us but they could add advertising:

View Larger Map

Microsoft’s Bing is even worse:

The Ordnance Survey have released some of their data, and we also have access to it through Digimap, but questions remain over licencing and the frequency of updates.

We can do better than this by building on what has already been done by OpenStreetMap.

I’ve mentioned OpenStreetMap several times before going back three years:

[Mapumental's] base mapping layer is from OpenStreetMap – a project to create a free (as in beer and speech) map similar to the ones available from Google Maps, or even from the OS. It’s created by volunteers who go out with GPS and plot the routes online. Almost all major roads are on there already and certain areas have excellent quality coverage – take a look at South Liverpool for an example of how good it can get.

The quality of mapping on OSM for Edge Hill hasn’t been great – in the past I’ve taken the odd GPS track or paths around campus and added them but generally it’s been pretty poor as you can see from this recent capture:

Recently though, the quality of aerial imagery available in the OSM editor has vastly improved making tracing over the campus a viable option where it hadn’t been before (buildings going back as far as the Faculty of Health were missing from Yahoo!’s images). A few hours work has resulted in a much more complete map of campus:

View Larger Map

As I write it’s still not perfect but all the buildings are plotted along with roads, footpaths and many of the facilities we have on campus like cafes and shops. OpenStreetMap allows anyone to make corrections and add missing features which will help keep it up to date.

Now that we have an up to date base map we’ll be looking at ways we can make use of it in some exciting forthcoming projects which I hope we’ll be blogging about soon!

The UK’s implementation of EU Cookie regulations come into force this Saturday and the web design world is frantically trying to work out what to do! Firstly a bit of background into cookies and why we are where we are!

Cookies make the web go round – they’re how a website remembers who you are so you don’t have to remind it every time you load a page; they allow websites to personalise what you see; they make online shopping possible by remembering what’s in your shopping basket and they allow website owners to track the performance of sites to determine what’s working and what isn’t. Suffice to say without cookies the web would be a sorry place.

But they also have the potential to be abused. They can reduce your privacy on the web by tracking what you do on the web. By linking information together it could be possible for sites to build up a detailed profile of your online behaviour and the EU decided to act to better protect users’ privacy.

The UK’s implementation of the EU regulations is being enforced by the ICO who have issued guidance but things are never that simple! There isn’t – so far – an accepted “right” solution to compliance. The ICO themselves have taken quite a hardline approach – a bar across the top of every page asking for permission to set cookies. When this launched it had a devastating affect on their ability to analyse site usage which is vital if you’re going to build good websites.

BT and the BBC take a bit more of an opt-out approach by telling site visitors they will receive cookies unless they say otherwise.

These show the first time a visitor comes to the site and in BT’s case disappears after 10 seconds – much less off-putting and probably clearer than a simple “Do you want cookies?” prompt, but is it enough to satisfy the ICO? Only time will tell!

While the implied consent may still be unknown one thing that is generally agreed is that providing the user with more information in a form that they can understand is a Good Thing™ so that’s where we’ve started.

[I should note much of what we've implemented so far is based on a very pragmatic post by James Cridland of Media UK]

1. We’ve added notices to key login pages like GO to say that you’re going to have to accept cookies if you want to log in. We’ll expand this to other services like the online shop and Rose Theatre ticket office in due course.
2. We’ve added a Cookies page the the site listing how we use cookies and what for. I’m sure this isn’t 100% complete so if anyone would like to let me know gaps then please shout!
3. We make a distinction between cookies which link to personal information and those that don’t.
4. We link to instructions on how to manage cookie settings and mention “private browsing” modes in modern browsers as an easy alternative.

As James says in his post #3 is the most contentious:

ICO is primarily concerned with personal information and personal data – and I’m registered under the Data Protection Act and take personal data very seriously. However, Google Analytics and AdSense cookies, etc, are anonymous, and will only ever contain personal information if you deliberately log in to Google services (and even then Google claims not to link Analytics or AdSense with your Google account anyway). The same goes for Twitter and Facebook too. And the ICO go out of their way to say, in their advice: Although the Information Commissioner cannot completely exclude the possibility of formal action in any area, it is highly unlikely that priority for any formal action would be given to focusing on uses of cookies where there is a low level of intrusiveness and risk of harm to individuals. Provided clear information is given about their activities we are highly unlikely to prioritise first party cookies used only for analytical purposes in any consideration of regulatory action.

What does this look like? The cookie page is linked to from the header and footer of every page:

The Learning Edge landing page is a bit more explicit about how it makes use of cookies:

Depending on feedback from our users and others in the sector we may roll out some form of non-interrupting information box along the same lines as the BBC’s approach. We have also done some work on a cookie level chooser like BT have but the technical implementation across multiple in-house and third party systems is non-trivial.

If you have any feedback or questions about Edge Hill’s approach to cookie legislation compliance please leave a comment or get in touch and I’m sure there will be more changes to come!

The move to WordPress for many parts of the site will mean that the people who know about the information will have more control over how it’s presented on the web but there is still a risk that it will remain dry blocks of text because that’s the easiest way to get it online.

I want us to take a new approach to much of the content we have. We need to address each area of the site and look at what is important and the best way to display it.

One site I believe does this really well is the new beta Government website www.gov.uk. They’ve taken what can be quite detailed information and extracted the important points, structured it and presented it clearly.

Take for example times that the clocks change. The current Government website Directgov has the information on a page titled Bank holidays and British Summer Time but when the clocks go forward is only shown towards the bottom and requires the user to think:

Compare this to the new GovUK site where clock changes are shown on a page on their own titled When do the clocks change?:

Front and centre on the page is the information that probably 99% of people want – the next date that clocks change.

This is basic information but making it easy to find and consume is invaluable and it’s the type of information that universities have in bucket loads!

• Term dates
• Library opening hours
• Contact details
• Tuition fees

These pages get thousands of views per month and that’s just the start. Unstructured content can be redesigned too by breaking it down into stages and identifying the goal of publishing it online.

Changing how we design information is a big task and will involve us working closely with content owners but the benefits to our users, and the university, are enormous. Work starts now.

To solve these problems we created a lazy page loading script. Lazy loading is a technique commonly used within a web page to defer loading parts of the page until they needed. For example, a long page containing lots of images won’t show the images until you scroll down towards them.

With browser tabs, a similar issue is present – we were loading three large pages when typically only the first would ever be seen. Using a lightweight web page with a bit of JavaScript we’re able to set the tab title and then redirect to the real page only when you switch tab. If you’re interested, here’s the JavaScript:


<script type="text/javascript">
window.onfocus = function() {
location.href = 'http://www.edgehill.ac.uk/';
};
</script>


You can see it in action by opening this lazy load link in a new tab before switching to it. The change to student PCs is being made as I type so we’d be interested if you notice any difference in speed when you open a browser on campus!

Over the last twelve months we’ve completely redesigned our website and moved to using WordPress to manage Faculty and Department websites but there’s still more to do and this post will be responsible for managing the design aspects of projects undertaken by Web Services.

The person specification has the details but please drop me an email if you’d like an informal chat.

The majority of code we write is PHP, often using the Symfony web framework for bespoke developments or WordPress as the basis of lightweight content management for departmental websites.

The deadline is 17 February 27 February but if you would like an informal chat email me direct.

Previously we’ve showed how we’re starting to make use of A/B testing to measure the proposed improvements to our site. We’ve also started using other more advanced features of Google Analytics on our site.

The problem comes from some of our designs which use JavaScript to create advanced designs. The homepage for example has a feature area showing four key news stories, events or promotions but Google Analytics only registers the page loading – previously we had no way to determine which slides were being looked at.

The solution is event tracking. With this, GA can record activity other than page views. In this example we register as an event an interaction with the feature area. These are logged as “Switch 1/2/3/4″ when the corresponding slide is displayed. Loading the default slide isn’t recorded – we can get that figure from the number of page views – but clicking the thumbnail link does trigger the event.

In many ways the results are unsurprising:

So the further left the more often the content is viewed. We also record the title of the tab for easy reference – it’s hard to remember what story was in each position on a particular day:

“Scholarships for 2012″ is doubled up – there’s still some debugging to do extracting the slide labels from the H3 tag but early results are very interesting.

This type of event tracking applies to a couple of different designs based on our feature area JavaScript so we can start to measure the success of slides on the About page – Campus and Location (position #5) is second most popular link.

As will any type of statistics, the hard part is in analysing what they mean but already this has proved to be a useful additional metric we can use when reviewing our site.

If everything goes well we will be upgrading WordPress-powered sites on the corporate website early in the new year, ignoring this helpful advice from Twitter

WordPress 3.3 is due out in the next couple of days. I recommend updating right before you go away for christmas.

— Liam Gladdy (@lgladdy) December 12, 2011

Spot the difference in our mega menu:

We’ve been testing how many people visit the Undergraduate homepage from the mega menu – Google Analytics stats show many more people go straight to the courses page than to the top level page.

Using Google’s Website Optimizer we can test the two versions with and without the heading underlines to see which performs better. After four days the stats show the version without the underline performs 9% better at driving people to the Undergraduate homepage.

This was a very small experiment but in future we’ll be testing more fundamental elements of our designs. Apologies if this makes you feel like a lab rat!

View Larger Map

The Hub is now open so maybe it’s time to get the trike back to take some new photos.

Have an explore and leave a comment if you see anything interesting!

It’s the start of a new academic year so now is a good time to recap places on campus where you can access computing facilities – it’s more than just the library.

The Hub

This brand new building in the centre of campus has a number of express PCs for quick access to the internet. On the first floor there are six pod seating areas with integrated touch screen computers for group working and there are plenty of tables and areas to sit and use your own laptop. There’s also a giant 126 inch video wall with PS3, Xbox 360, Wii and a PC attached!

Wireless

If you’re bringing your own device to university then you can connect using Wi-fi to access the internet across the campus including cafes and restaurants, lecture theatres and halls of residences. Connect to “EdgeNet” and login with your student number and password.

Library

Open access computers and printing facilities. More information.

LINC

Approximately 200 PCs (47 are available 24 hours a day with your UniCard). More information.

Faculties and Department buildings

Many Faculties and Departments have additional computing facilities to support their students. These rooms may contain specialist hardware – music rooms in Performing Arts for example – or run software required for certain modules.

But it is possible to have easy to remember and secure passwords by choosing a short phrase. Although it might look easy to crack, it’s not, and the brain is very good and memorising phrases.

Of course xkcd has a comic to demonstrate this perfectly:

Check out some of the new features in this video from WordPress.tv:

It’s our first live fully integrated WordPress website and starts to show what’s possible. It’s taken less than two days to create and while some content was migrated from the DSAPS website in that time we also implemented a new WordPress homepage template and ways of embedding profiles into pages.

Let us know what you think!

For web applications to spring even farther ahead of traditional software, our teams need to make use of new capabilities available in modern browsers. For example, desktop notifications for Gmail and drag-and-drop file upload in Google Docs require advanced browsers that support HTML5. Older browsers just don’t have the chops to provide you with the same high-quality experience.

For this reason, soon Google Apps will only support modern browsers. Beginning August 1st, we’ll support the current and prior major release of Chrome, Firefox, Internet Explorer and Safari on a rolling basis. Each time a new version is released, we’ll begin supporting the update and stop supporting the third-oldest version.

As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. In these older browsers you may have trouble using certain features in Gmail, Google Calendar, Google Talk, Google Docs and Google Sites, and eventually these apps may stop working entirely.

This came at an interesting time for us as we were readying to launch our new website design. We’ve been forced to make decisions about which browser versions to support and which to ditch. Unlike Google, we’re still supporting Internet Explorer 7, though some subtle design elements may not work, but we too have the problem of not being able to take advantage of features in more modern browsers.

IE7 is five years old yet is still being used by over 20% of visitors to GO. Some of these will be machines on campus and colleagues are working to upgrade these but others are beyond our direct control.

We will however no longer support IE6. Use of this is around 2.5% yet to develop for it would consume a disproportionate amount of time. It’s also 10 years old and even Microsoft want rid of it!

More generally we’ve seen use of Internet Explorer drop by around 15% since January 2010 while Chrome is up by 10% and Safari up by 4%. Firefox and Opera have both maintained their position.

The adoption of modern browsers is important for the web to keep developing. Just as things start to go wrong if you don’t service or MOT your car, when using an out of date web browser, not everything will function as designed and there are potential security risks too. So I’d encourage everyone to make sure they’re running the latest version of a browser – then we can start to innovate rather than always struggling to cater for the lowest denominator.