Tag Archives: Big Brief

Choice Part 7: Bite the hand that feeds you

I meant to blog about this last week but bank-holiday-weekend-fever caught up with me. 1st May was RSS Day – aimed at raising awareness of feeds and how they can be used to stay connected to websites that interest you.

I’ve blogged before about the topic and said then we’d be introducing more feeds in the future. Well we have – you can now subscribe to feeds of news, events and jobs so you can stay right up to date with what’s going on at Edge Hill. In most cases there are multiple feeds available allowing you to narrow down to just what interests you.

If you’re new to feeds then this video from the folks at the Common Craft show to see how they work and can benefit you:

To justify this post being part of the “Choice” series, I should probably say a little more about the developments in the new site. We’re providing feeds initially for areas of the site that are now in databases. The jobs website has been like this for a while but news and events are now structured properly to allow us to create a feed directly from the database. We’re using a plugin for symfony called sfFeed2Plugin which allows easy creation and manipulation of feeds and saves us from having to worry about the finer details of the Atom specification.

We’re going to provide more ways of using our data in the way you want in the future, including some stuff for the Institutional Web Management Workshop in July so stay tuned for more about that.

Choice Part 6: Lucene in the sky with diamonds

Search is one of the key ways that visitors find what they’re looking for on our websites. A good search engine can quickly and acurately direct the user to the right place and make for a more efficient and productive experience.

In the past we’ve used Novell’s QuickFinder search service to spider the site, supplemented by a couple of custom search systems for things like courses. I’ve never been entirely happy with the results that QuickFinder provides.

Recently in Higher Education and beyond, there has been a trend towards Google’s search appliance and their hosted solutions. Both of these are excellent in terms of raw power – they will happily index every page on a site and searches are quick and mostly relevant. But there’s more to a good search engine than the size of the index – they must provide the results you’re looking for and present them in an easy to understand way. Here’s a fairly typical example of the top search result for a search for “Computing” (I’ve removed identifying names!):

For Edge Hill it’s important that prospective students are able to find what they’re looking for. So in the above example it’s good that it has picked a page about the academic department rather than what at Edge Hill would be IT Services, but it’s actually the Faculty page giving the briefest of details. The summary doesn’t help at all – the spider has picked up details from the page header including the alternative text from the logo and the breadcrumb trail.

What we want are relevant results which allow the visitor to quickly identify what pages have been found with information that’s relevant to the results, not just scraped text. Some search engines are starting to do this – when Google finds videos it will show a thumbnail and allow you to play the video inline – so we can use some of these ideas when creating our own search system. Now let’s get a bit more technical!

Our website can be split into two types of information – structured and unstructured. When I say unstructured, I don’t mean that it’s hundreds of pages put online without any consideration – I’m talking about web pages of content that aren’t stored in a database. Structured information is pulled out from one of our databases – things like news, events or courses. Structured content is what most search engines find difficult because they don’t “know” what a page is all about, but we do, so we can tell our search engine what information is important and how we should represent it.

For our new website, we’ve introduced a new search system based on Zend Lucene. Lucene isn’t a full blown search engine, but it’s a library you can build on to provide full text indexing of almost anything you want. We’re using a symfony plugin which packages a lot of search functionality to allow us to index news, events, courses and other information directly from the database. We have control over what information is indexed for each type and the weightings applied to them. For example we give courses a slightly higher weighting than news.

For static content we have a custom spider which trawls all the other pages on the site and adds them to the index. This work like any other search engine, following links and determining which text is relevant. We try to exclude the header, footer and navigation from the index as this contains text which is common to many pages and adds little to the value of the page.

We can also do a lot with the search interface itself. Firstly, different types of result show different information. For example a course result shows the UCAS code, qualification, which campuses it runs at and allows the course to be added to the My Courses basket for comparison. News and events shows similar custom results while static pages show the usual snippet of text from the page, but without irrelevant text from outside the content area creeping in.

Overall the new search seems to be working quite well – we’re able to embed it into the rest of the site more than we’ve done in the past and provide custom search boxes for courses and news. There’s still work to do on it though to improve the accuracy of results, so if you’ve tried the search and not found what you were looking for easily, please let us know.

Choice Part 5: Pushing the boundaries?

Edge Hill weren’t the only people to launch a website redesign in the last week. On Monday, the BBC News website had it’s biggest redesign in years. Personally, I quite like the new design but they’ve come under a lot of flak for certain decisions.

Martin Belham blogged 60% of commenters hate the new BBC News design. I’ve read a number of the comments and it’s no exaggeration to say that some people are very unhappy!

There are certain similarities between our new design and BBC News so why did we make the decisions we did?

First up is the move to designing for larger screens. Our old homepage design was fixed width to fit on screens 800 pixels wide. Our new design fills the screen at 1024 pixels wide. Why the change? Over the last few years there has been a massive growth in adoption of LCD screens – these almost all have a native resolution of 1024 or above. Less than 4% of visitors have a screen resolution of 800×600 and that’s going down all the time. On the other hand, over half our users have resolutions above 1024 pixels wide leading to an inefficient use of space.

So we decided that our design should be aimed at 1024, and after some vigorous internal debate, that we should use some JavaScript magic to create a version for 800×600 as well. So if you’re one of the 3.72% of users with a low resolution, you’ll find that the homepage design is slightly different to normal.

The wider design allows us to add more to the page, but why not design for fluid widths? Fluid layouts are where the web page expands to fill the size of your browser window. We’ve used this technique on content pages and you can still see it on, for example, Faculty pages which aren’t yet in the new template. The theory behind fluid layouts is sound – the user controls how the page looks – but in practice it’s difficult for developers and designers, especially where pages are dynamically generated.

Choosing which browsers to support was also a difficult decision for us. There is a careful balance between providing the best user experience for the majority of people or catering for the long tail. The majority of visitors use Microsoft’s Internet Explorer. Over two thirds of IE users are now using version 7 and usage of IE 6 is dropping every month.

So quite late on in the development process we decided to downgrade support for IE 6 to make browsing the site more reliable. The entire site is still accessible but some visual effects are missing. We may be able to reintroduce some of these in the coming weeks, but I would urge anyone still running IE6 to upgrade either to version 7, or another browser such as Firefox, Opera or Safari.

Speaking of Safari, the site also works best with version 3 which despite Apple’s slightly questionable deployment techniques is actually a very good web browser.

I’ll leave it there for now. If you have any comments on the new design, leave a comment, even if you think we’re “turning the Web into a Fisher-Price wonderland for simpletons” 🙂

Choice Part 4: eProspectus

So on to the first of our web applications! Unsurprisingly, quite a large (and important) part of our audience is people interested in studying at Edge Hill and the courses we offer so it’s important that the website makes it easy for visitors to find the information they need. To meet this requirement, a lot of work has been done on the “Study” area of the site. It’s fair to say that we’ve almost completely overhauled every aspect from content to design and navigation.

I’m not going to take the credit for this – there’s other people who’ve poured over every paragraph, photo and link to get it as good as possible – but I will talk about (and take the credit for ;-)) some of the systems we’ve developed. Just like the paper prospectus, sitting at the back of all the beautifully designed copy and images is the course listings. It might not be sexy, but it’s an important part of the process students go through before they apply to Edge Hill.

We’ve had an online course database for a number of years but the Big Brief has given us the opportunity to redevelop it from scatch and look at how people find the courses they’re interested in, the best ways to present information and some less interesting things on the backend that will make managing the information easier.

XCRI Over the last few years there has been much discussion and development in the HE community of ways of expressing and sharing course related information. Initial developments were maybe a little ambitious, encompassing DCDs and module information. More recently work has been done on a more focussed project – XCRI CAP – which is looking at the course marketing side of the equation and seems to be much more managable.

With a growing buzz surrounding XCRI CAP we decided late last summer that it was the way to go when implementing our new eProspectus and just before Christmas we applied for and won JISC funding for a mini project to integrate CAP 1.1 with our systems.

Course information is now completely served from a database. The database structure is based on the information we require to produce XCRI feeds (which will be coming very soon!) so we store details not just of what courses we offer, but different presentations (for example 2008 or 2009 entry, where entry requirements might be different). With course information available in the database, we’re able to embed lists of courses into the relevant areas across the site so updating the eProspectus updates all the pages that use it.

The new back end has allowed us to add some new features to help visitors find what they’re looking for. As well as the A to Z list, you can now get lists of keywords or tags. Tagging is a useful way of navigating around information and we’re using it in a number of ways both internally and externally. We’ll talk about tags in the future because it’s an important part of working with the web.

The My Courses feature is still in development. Currently it allows you to add a number of courses to a “shopping basket and then compare some key details about them. In the future, we’ll be using this to provide a personalised downloadable prospectus and allow you to save the information for future reference. For applicants this is one of the first points where they start to engage with Edge Hill online.

The search engine deserves an entire post of its own but from the eProspectus side, search results are fully integrated with the entire site search yet contain information relevant to courses rather than simply a summary extract.

Once you’ve found the course you’re interested in the course details page is broken down into hopefully manageable chunks. Different years of entry have separate summaries; module information which not everyone will be interested is shifted to a separate tab.

So that’s it for our first newly redeveloped application. If you’ve got any comments or questions, please leave a comment.

Choice Part 3: Design Objectives

Overview

The main objective of the redesign was to include the :choice branding, and to create a consistent visual association with the printed prospectus. We hope to establish a look and feel that will continue in forthcoming marketing campaigns.

For this project we have collaborated with Splinter, a Liverpool based design agency. We now hopefully have a style guide that works online and in print, playing to the strengths of both mediums.

Structural Changes

We have redeveloped the Study area of the site, News and Events, and the online prospectus:

www.edgehill.ac.uk/study
www.edgehill.ac.uk/news
www.edgehill.ac.uk/study/courses

Each area has a homepage with a relevant interface. Study for example is aimed at prospective students; it is for marketing the university and is very visual, highlighting the campus, facilities and student life. The Courses area only includes course specific search options, and information.

We would like every area of the site to have a strong and relevant homepage, this will be part of the next phase of the project.

Interactive Pages

Splinter have provided an interactive means of promoting Edge Hill’s facilities and quality of provision:

www.edgehill.ac.uk/study/life
www.edgehill.ac.uk/study/campus

We are hoping to increase the amount of video, audio, and interactive media on the site. Again, this will be part of the ongoing project.

Choice Part 2: A new platform

For years, most of the corporate website has been produced as static web pages using Dreamweaver. This has worked well – we’re able to ensure the design is tight, content correct and the site doesn’t grow to an unmanageable size.

To help manage content on the site, Web Services have produced a few key applications – news, eProspectus, job vacancies for example – and while they’ve worked great for each area, integration with the corporate site hasn’t gone much further than matching the template and manually linking between the static content and the dynamic applications.

With the Big Brief we’ve had the chance to build dynamic web applications into the core of the website. Instead of being an add on, our main website is dynamic and existing content is linked in. This allows pages on the site to fully embed content – for example we can have news and events on the homepage, or Faculty sites can list the courses they offer.

For the corporate website we’ve extended our use of the symfony web framework. We’ve been using symfony for about 18 months, first for Education Partnership, then the Hi applicant website and the GO portal. I’ve posted before about some of the advantages it gives us, but it’s developed significantly over the last year and we’re starting to really see some of the benefits in terms of consistent coding standards, making use of plugins so that we’re not reinventing the wheel and allowing us to rapidly build new systems that integrate with the rest of the website.

Introducing symfony to the core of the corporate website is just the first step in making it more dynamic. We’re working on allowing visitors to the site to login to gain access to more personalised information, not just for staff and students, but for applicants, partners and other users of the site. The applications we’ve developed will allow dynamic content to be spread around the site – for example courses for a department, news feeds or relevant events.

In the next couple of posts we’ll be talking about some of the applications you’ll see on the site and then maybe, just maybe, I’ll talk some more about future plans!

Choice Part 1: The Big Brief

Today we’re launching a brand new design for the Edge Hill University website, this marks the most significant revision of the corporate site since we gained University status.

Major developments of the website include a new ‘study’ area, some additional applications and functionality – search, news, events, and the eProspectus system has had a complete overhaul. In addition, the site has a new, fresh look and feel with redesigned navigation.

The redesign takes advantage of new features available to the current releases of web browsers (IE7, etc), but the site will still function on older machines (although some visual features may not perform as well). For example, if you have the older Internet Explorer v6, or JavaScript disabled in the browser, you may find that some of the graphics won’t have rounded corners – but all the content is still accessible.

The “Big Brief” commissioned Splinter to produce the paper Prospectus and a new design for the corporate website. This produced the “Choice” branding which I’m sure Roy will be talking about over the next few weeks.

As with any new deployment of this scale, there may be the odd teething problem and we’d ask colleagues to assist by reporting any content queries or updates to the Web Services Division, and any browser-related issues to the IT Services Helpdesk.

Over the next few posts we’ll be talking about some of the new developments we’ve made and what they’ll bring for users, for faculties and departments and for the institution, so keep checking back and find out what we’ve been doing for the last few months!

Please feel free to email your views, comments and feedback to webteam@edgehill.ac.uk or leave a comment right here!

Preparing for the Big Brief: CSS Sprites

In one of my previous posts I embarrassingly listed the use of Image Maps as one of Nate Koechley’s ten tips for making web pages load faster, what I meant was CSS Sprites.

We will be using CSS Sprites to organise common graphic elements in the Choice Campaign website. They are a really easy way of grouping buttons with their corresponding rollover states onto a single master graphic, rather than slicing everything up.

Taking an HTML element like a DIV, you specify its width and height with CSS. Then using the CSS Background selector, you set the Master graphic as the background image. Following this you offset the background image using minus pixel values along the X and Y axes so that the top left hand corner of your button fits the top left hand corner of your div. You apply these values to the hover state of an anchor to create a rollover.

There is a good tutorial on A List Apart: http://www.alistapart.com/articles/sprites/

This will save a lot of time when preparing graphics in Photoshop, and will reduce the amount of CSS I will have to write, leading to faster page loads.