Tag Archives: 125

Video, Silverlight and jQuery


Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'WP_oEmbed::_strip_newlines' was given in /webpool/www/flip/blogs.edgehill.ac.uk/web/wp-includes/plugin.php on line 214

Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'WP_oEmbed::_strip_newlines' was given in /webpool/www/flip/blogs.edgehill.ac.uk/web/wp-includes/plugin.php on line 214

During our 25 days of blogging last year, Sam talked about some of the new websites designs that we’ve been working on.  The 125 website was the first to go live last month and today we have released the website accompanying the exhibition for a new sports development.

For both sites we’ve developed some new ways of displaying information as well as improving the designs. Bot the homepage designs use jQuery to create visual effects on the page. 125 has multiple “slides” of information. Each slide transitions to the next after a short period of time or when you click the link on the right.

New Sport also uses some jQuery transitions, this time to change the background image and headline when you hover over links to each section.

There’s a few more new additions to the sport site. We were provided with a DVD containing lots of aerial photos of the campus to feature in a gallery. We’ve done the usual thumbnail gallery but we’ve also got a fancier way of showing off photos.

Microsoft Photosynth is a tool from their Live Labs project. It works by taking a set of photos, working out how they fit together and creating a 3D model in which you can navigate around them. Our set of photos is 71% “synthy” – a measure of how we matched they are – pretty good I’d say! The one negative thing is that viewing the resulting photosynth requires Silverlight on the browser.

Another new development that’s being released for the first time on this site is a video browser. The observant may have noticed last week video pages on the Edge Hill site changed slightly, doubling the size of the video and moving around some elements on the page. This was to allow us to highlight related videos right along side.

One final little thing we’ve incorporated into this site is embedding the PDF of exhibition boards – normally a sizable download – into the page using Scribd. Using third party hosted services has risks associated with it but here it clearly benefits the user to be able to quickly scan through pages without the need to download a large file and open in Acrobat.

New Homepages for 2010


We’ve recently used heatmap software to get an impression of the way people use our homepage; disappointingly, the central area, which we use to promote university achievements, major news and events, is often bypassed. This indifference is largely down to everyday visitors using the homepage as an entry point to the GO portal, but we are concerned that major announcements are going unnoticed.

We’ve had some strong homepages over the past year, as yesterday’s blog post attests; but we seemed to have got stuck in a rut by using the same three story template time and time again. It is clear that the single story homepages with the dedicated background images have far more visual impact, and are harder to ignore as a consequence.

compare

The obvious step was to add some interaction, so that we can navigate between stories, therefore individual stories can fill the whole area making a greater impression. Also by adding a random element we can ensure some freshness for each visit.

newGraduation

Typography

We’ve been using uppercase Futura Bold for our homepage headlines since the 2008 redesign; the justification for this was simple, that I felt it had more impact. Over time I’ve noticed that the blocks of text have a solidity, that consumes too much of the negative space around the letters; as a consequence the headlines are less readable.

futuraBold

So I’ve opted for lowercase Futura Book instead, as it seems to create more breathing space, but still has enough oomph for a headline.

futuraBook

Navigation

The coloured bar on the right will be used to flip between screens, there will be a colour association based on tints in the image itself, or as a direct contrast to the background colour; and this will also be used as the highlight colour in the headlines.

There will be sub navigation across the bottom where applicable: the links will have titles if the sections are different, or can be generic circles if you are flipping through a gallery.

125prev

The new homepage style will make its debut for Edge Hill’s 125th anniversary celebrations, which begin in January 2010.

125prev2

125 by 125

Do you ever have really great ideas that on second thoughts are incredibly stupid?  Yeah, I have them all the time but usually I’m sensible enough not to tell anyone about them.  A month ago I was caught out by an email from Corporate Marketing Communications and Student Recruitment asking what people are doing for the anniversary celebrations.  I had a flash of inspiration and fired off a reply:

I’ll do something with Twitter or a blog for 125, maybe similar to the 365 projects that people do – one photo per day for 125 days.

It was that quick.  Fast forward 30 days and I’m starting to think that was a really, really stupid suggestion.  Writing 25 posts across the whole team has been difficult enough so what am I playing at committing to posting every day for four months?!

If I’m going to have any chance of making this work I’m going to a) need help and b) make it simple, so give me your ideas, people!  My initial thought was to raid the archives, take a load of photos and just post them rather than having to write lots for each day – that way I could spend an hour or two every couple of weeks and schedule ahead.  I could also broaden it out and persuade other people to blog or highlights from some of the 125 events happening on campus.

Picking things that might be of interest is also important – I’m not doing this for myself – so what would you like to see?  Post your comments below!