Archive for September 2009

Course Finder Demo App for Iphone

September 30th, 2009

Iphone version: Select Course Type. Select Course from A-Z list

Iphone version: Select Course Type. Select Course from A-Z list

Course Finder Demo App for Iphone

Here’s the Iphone & Touch version of the newly spruced Course Finder. The function is far more simple than the conventional web version, just select your award and then locate a course from the list.

The labelled buttons and alphabetical list format closely mirrors the Iphone’s internal layouts. The latter was achieved quickly using the excellent Contact List on Webkit package from cubiq.org.

For this project to be adopted it will need to be presented with full corporate branding. Something I have thus far steered clear of. However, the greater task of search integration is my next priority.

For full details of the project click here: Guerilla Gardening.

Course Finder Demo

September 30th, 2009

Here’s the presentable, standalone variant of the demonstration Course Finder I showed at BathCamp.

note: Compatibility View required for IE8, I’m working to fix this now.

It’s probably best viewed on this project’s category page.

Tested in a handful of browsers including IE8, Firefox, Chrom and Opera.

The Iphone demo web application will follow shortly.

Designing for Previews

September 29th, 2009

For some time now I’ve been thinking about writing a post on designing for previews, those small boxes that pop-up over links on all kinds of sites.


My mind has been focussed by a few chance events that have lead to a striking example of the difference that adding a few design elements to a layout can make.

My (current!) blog layout is fairly simple, I’ve stripped back foreground images and simply have a title ‘tab’. For reading, it’s probably fine, but in a thumbnail preview at under 300 x 200 pixel dimensions, the layout does me few favours in grabbing and retaining viewer attention and inciting, inviting them to click.

We have precious little time to grab reader attention at higher resolutions, never mind when they’re taking a split-second to peek through the letter box.

So when you consider the great pains many of us go to create pixel-perfect, high usability, flexible or fixed layouts to get our brand, our ideas or our tone expressed it makes sense to make sure that when you have content worth linking to that it does the same.

So the story of this post goes like this: I took a photo on the Sunday at BathCamp, of the stencil they used to brand our complimentary camping chairs. A marketing masterpiece in their own right, snaps of these chairs bearing the BathCamp logo are turning up everywhere.

Blissfully.Me blog link preview

Blissfully.Me blog link preview

The next day I wrote up my thoughts on BathCamp, and sent them live. Shortly after publish (nothing’s ever really finished is it?) I added the stencil snap.

This morning I see a link to my post on Ann Oldroyd’s Blissfully.me blog, and saw my page appear in a pop-up when I hovered over the link.

Without that image the small type, small header, no medium-sized design elements would have made the page look simply like a page of text.

With it, it makes that one post  signify in no uncertain terms what the posts about and adds some visual interest to another otherwise textual page. In some ways image is enhanced by the lack of surrounding interface elements.

The previewed post

The previewed post

Words are useless when you can’t read them, so in my case previews clearly matter. In this instance the preview service understands this and has picked out keywords to aid the reader.

All of this will be considered with every new post, new site I develop and with any future redesigns I undertake.

BathCamp 2009, Buckland Dinham

September 28th, 2009

Just back from BathCamp and keen to blog the things that most impressed me. This was my first time at BathCamp and my first ever BarCamp so was not sure what to expect.


Excellent meal at The Bell in good company then retired to the Media Barn for a spell before climbing under canvas nylon.


Woke early helped with the registration prep’, thick coffee n’ Croissants then straight into talks.

Giles Turnbull’s talk about his part in the URL Shortening phenomenon was good, especially how he linked it to digital and hardcopy preservation and the ways in which we retain, discover and prize certain formats (papers, journals, newspapers) of old data. He then introduced the Newspaper Club to us, and how it’s helping create traditional format versions of digital content.

Dan Hilton talked about clients – how they understand and interpret digital media, often come to inappropriate conclusions on cross-media marketing; and agencies – how they’re often too willing to benefit from clients misunderstanding of the field, and ways that both can work better to make the most of the medium.

During questions Dan also pointed out the ways media providers are sharing cookie information to market recently viewed items on previously visited shop sites amongst similar content across other sites, reminding visitors of products they’ve examined.

Rick Hurst’s talk about the features and uses of JQuery interested me as it mirrored much of what I’ve been doing in recent weeks with the Guerrilla Gardening project, with the problems of access to data, hijacking HTML content for UI enhancement and problems formatting data from Content Management Systems.

I’m now reassured that switching to JQuery from Prototype will be trivial as DOM traversal, helpers, chaining, events and actions barely seem to differ between the two.

Caz Mockett showed us how she uses Blurb for high-quality self publishing of her photographic content. The results were impressive, something I may pursue for future art projects.

Rich Quick talks HTML Email

Rich Quick talks HTML Email

Chris Leonard presented his thoughts on providing publishing & discussion of scientific research outside of the conventional journal, using extant services as a starting point he discussed ways to provide effective peer review, reward schemes and metrics.

Rich Quick presented insights from his recent work on HTML emails for a number of clients. How we need to work HTML in ways that would make us sick to even to think about normally, considerations on the range of major desktop and web mail clients, quirks of each, how to make the best of the anticipated viewport with appropriate calls to action, A-B Split testing to provide feedback on more effective layouts.

Rich also discussed the issues of permission based marketing, legal and privacy concerns as well as the use of online services such as Campaign Monitor.

Saturday night saw a great barbecue, sponsored beer and cider, a band and a camp fire under a clear sky lasting into the early hours.  Pleasing to meet such a diverse bunch of dedicated, motivated and knowledgeable people doing interesting work and more than willing to share it with their peers.

Camp fire beneath The Plough

Camp fire beneath The Plough


Excellent breakfast helped everyone recover from the night before, then I attended Alex T’s talk on the fun he’s been having using a PHP/MySQL API to track Forex currency trading.

Sunday Tracks, BathCamp

Sunday's tracks

After which I gave my (first, ever) BarCamp talk about the work I’ve been doing to improve the University Course Finder using html hijacking techniques, making data sources from the CMS and using AJAX and JSON to provide an enhanced user-experience with zero impact upon the usual management of course information. More information on this ongoing project can be found in the Guerrilla Gardening category.

Shortly after we said our goodbyes and began to head home. In the last twenty-four hours I’ve  probably gained more insight into the tools and techniques I use now and will go on to use than I have in months. it’s also good to see those areas where you’re exactly on track with your own developments and be able to help others with theirs.

More photos on Flickr of BathCamp09.

Planting courses in the Guerrilla Garden

September 18th, 2009

Prototype growing nicely

View the category Guerrilla Gardening for the full story

Here’re some screens of the new AJAX driven course finder. I’ll shortly add a hosted example but in the meantime the screens are sufficient to discuss some of the observations made now that development has begun.

First load

The Undergraduate Courses are pre-loaded on first view

The Undergraduate Courses are pre-loaded on first view

A-Z Links – filtration and index


It became apparent quickly that having the A-Z links work the same as the Search Field (filtering by word beginning) could be confusing. For example with 5 Courses to view, a word-beginning filtration could show 5 courses who’s titles begin with A.

So the A-Z links operate as before, they filter purely on title starting letter.

I intend to change this however, from a filter that removes non-matches to a scroll mechanism: rolling the full Course List down to the starting letter, not unlike a thumb-tab in an address book.

Search Field Filtration


Typing in the Search Field removes any course that doesn’t contain the words being typed. It’s rudimentary right now, filtering only on complete phrases starting with word-beginnings, but the quantity of content being dealt with, and the nature of the search requirements could mean that this is lightweight approach could suffice.

Initial testing with a single volunteer was positive.

The … Iphone

The layout used for prototyping is deliberately flexible to cater for varying screen sizes and devices. Overall the layout worked well on the smaller screen, of course buttons sizes will need to be increased for SSDD users.

I had to test the initial offering on a device, and had made an oversight I won’t be repeating. Using the onscreen keyboard obscures the dynamically updating list of courses, until you click the ‘done’ button. Additionally, autocomplete was trying to make a word on my behalf when all I wanted was the first few letters to narrow my results.

The on-screen keyboard renders the dynamic as-you-type filter useless until you've finished typing

The on-screen keyboard renders the dynamic as-you-type filter useless until you've finished typing

For mobile devices then providing just the A-Z Links will be a faster mechanism, and we can save the overhead of the periodic updater routine for those users too.

JS/DOM event handling

At present no controls are placed on the tabs aside from firing the AJAX requests, but the actions in the Search Fields and A-Z Links are mutually exclusive, especially with the periodic updater running, so require additional safety measures.

Clicking an A-Z Link disables the periodic updater. Actions in the Search Field restore the periodic updater and reset the visual state of the A-Z Links.

What’s Next

A live working example, more on the mobile usage, and a little user-acceptance testing.

Guerilla Gardening, day three – UI refinement

September 13th, 2009

Got content.  Got concept.

View the category Guerrilla Gardening for the full story

On day one I had a rough plan of how to make the improvements to the Courses UI.

The various search, A-Z and listing interfaces, combined

The various search, A-Z and listing interfaces, combined

How it’ll work

The pencil sketch above is a fair representation of my plan – each Course Type available is clearly visible near the top of the view. The Undergraduate courses tab is activated by default, and the full list of clickable Undergraduate Course titles appears in the ‘results’ box below.

Switching tabs loads the Course listings for that Course Type into the results box, and the A-Z and Search box now operate on the new listings.

Typing into the Search input box filters the current listings by the phrase you’re typing, but if you click ’search’, you are taken to the search page and your query results are shown (I’ll return to this later).

In the absence of Javascript, the interface should be split back into the sequential copies of the A-Z links per Course Type, the way it appears now, and all functionality back to basics.

Refining the proposed UI

Looking at the diagram, I wonder how I’ll fit a whole alphabet in the space, alongside a search box and submit button. I may have to sacrifice the  scant advantage it brings in order to make the page easier to understand.

However the A-Z links are a feature of the page as it now stands, so will be part of the original and non-javascript views at the very least. I could perhaps make the options (re-) appear when a control is moused over or clicked. For the moment the feature will be developed whether or not it makes it to the final cut.

As-you-type Course Filtering

If retained, the A-Z links will act as shortcuts to the filtering action of the Search input box. This will be an improvement over their current action, which returns pages of links based on the first letter of the course title.

Right now, clicking on ‘A‘ will give you Applied Psychology, but not History of Art and Museum Studies.

The javascript filtering should instead detect the chosen letter at both the string and word beginnings. Clicking on ‘A’  would give you Nursing BA – Adult, Graphic Arts and Pharmaceutical Analysis.

It will also include every course with ‘and‘ in it, so some common word exclusion will be necessary too.

Returning Search results

Right now Search results are displayed in the Search context – our query takes you away from the current page to the search server and a web page is generated to show results. This new scheme’s aim is to keep navigation within the Course Area, retaining appropriate navigation.

Using the Search facility’s API, the results should be retrieved as XML, parsed and formatted then shown in the same Course listings ‘results’. This means we’ll need to highlight the difference between search results and Course listings.

The next stage will be getting some working examples going. First though I’ll need to note the order of the dynamic events incorrect rendering of the tabs and results.

Order of events in the JS driven UI

The page hinges on the Course Type, so switching Course Type can trigger resets of other elements such as the text in the search area. It’s probably best to clear the results area too – in readiness for new AJAX loaded data, and allowing the visual change in the tab from inactive to active to occur only on successful load of that data – otherwise network issues could result in a very confused page.

In addition to the clickable events, there’s the periodic routine checking the contents of the Search box and filtering the list accordingly.

I’ve tried to anticipate what should happen along with each event below:

Event reactions
Tab Selection
Active tab No action.
Inactive tab Disable A-Z links, disable periodic Search box routine, clear Search and results areas, display loading message/icon, load data into results area, use signal in results to switch to make tab active, make others inactive, re-activate A-Z links and periodic Search box routine, clear loading message, displaymessage/icon to denote listing type as ‘Courses’.
A-Z link click Replace content of Search box with selected letter. Start the periodic search box routine.
Search box focus Start the periodic search box routine.
Periodic Search box routine Take contents, format for filtering (remove common words and inappropriate characters), set the display of matching/non-matching courses appropriately.
Search Submit box click Disable A-Z links, ‘fade’ A-Z links buttons to show they’re not available in this context, disable periodic Search box routine, clear results area, load data into results area, use signal in results to switch to display message/icon to denote listing type as ‘Search Results’.

That’s enough forward planning for the moment. It’s time to start prototyping.

Guerrilla Gardening, day two

September 9th, 2009

View the category Guerrilla Gardening for the full story

Adapting the Course page content

Any hopes of getting hold of a clean and complete data source of every course’s details were soon dashed. The CMS – which of course thinks in pages in most instances. This is great as it makes updates and devolving of content submission far easier, but I need to work around it.

Title, URL, and Course Type

The CMS will easily give up Course Title and URL, but accessing award, availability for clearing and other attributes of the pages would require far more work, possibly HTTP spidering.

The structure we gave to the Courses area when last reworked thankfully lends itself well to grabbing these additional attributes -  denoted by their publication. Each of the three Course Types are published to a location determined by its award type:

<site root>/courses/undergraduate/

<site root>/courses/postgraduate/

<site root>/courses/cpd/

With a new templated page in the CMS connected to the content of the Course pages,  I can quickly generate a rough data source for Course Title and URL into a list. I can bypass the Compliance and tidy management tools for the template, allowing me to make whatever document format I need from the source.

Availability for Clearing

For a short time each year the Clearing attribute comes into play. The courses available for Clearing are a subset of undergraduate courses, created by adding an attribute to each page.

Another great feature of the CMS is keyword assignment, which allows pages to be aggregated into lists of links and titlesfor use elsewhere.

Keyword assignment list creation in the CMS

Keyword assignment list creation in the CMS

The Clearing keyword allows me to create such a list, giving me my final data source.

For the moment I’ll leave each output page as a simple HTML list of the format:

  <li><a href="courseurl_1">Course Name 1 <a/></li>
  <li><a href="courseurl_2">Course Name 2 <a/></li>

With a snapshot of data output to files, I can begin to put together some of the proposed components. An added bonus here is that my simple data sources have by necessity been separated by Course Type, which is no bad thing as that’s the fisrt fork in the road for most visitors to the Courses pages.

With luck, more tomorrow.

Guerilla Gardening, day one

September 8th, 2009

Plot Chosen. The Courses area.

View the category Guerrilla Gardening for the full story

It’s a high traffic part of the site presenting probably the most important pre-application content we have.  Over the years it’s had gradual improvements, most notably a modified mooTools accordion feature to accommodate the various Course Types in easily identified compartments which open and close with a click.

The page content is fully accessible without Javascript, and is fine for screen readers.

By Default all accordion boxes are closed, except the Search All Courses box

By Default all accordion boxes are closed, except the Search All Courses box

The Course Page

The purpose of the page is – unsurprisingly – to effectively get a prospective applicant to the course or courses that interest them, it should be so usable, you don’t even know how you arrived at the course you came for.

When first loaded four compartments are visible, with Undergraduate courses, Postgraduate courses and CPD (Continuing Professional Development) all represented in a closed state.

By default the bottom box is open, providing a course search facility.

The Undergraduate Section open, showing the A-Z Listings links

The Undergraduate Section open, showing the A-Z Listings links

Opening any Course Type shows a clickable alphabet, clicking on the letter ‘A’ in Undergraduate takes you to the undergraduate ‘A’ Listings page.

While only one set of A-Z links  is ever visible, there are three sets of Alphabetised links embedded in the page.

The Course Search does not filter by Course Type as the alphabetised links do. As it employs the website-wide search facility, it temporarily navigates the user away from the courses area to display search results within the usual search page,  related side links, which makes return navigation problematic.

A typical use case involving searching for multiple courses might take a user across two pages before reaching the course page and the a single return step to the Courses Home.

The (Rough) Plan

Rough Draft of the proposed layout

Rough Draft of the proposed layout

Off the top of my head, I’d like to:

  • remove the repeating elements presented on the page
  • develop a dynamic single-view for all courses, with minimal clicks or page loads
  • keep the search results within the Courses part of the site
  • show links to courses from the outset, with no A-Z pages required
  • Maintain the usual editing and update regime via the CMS
  • Maintain accessibility

Whether or not it results in a deployable application doesn’t yet concern me so much as the steps necessary to achieve it – which in themselves will be useful later on.

As all the information resides in the Content Management System or its published pages, the first steps involve overcoming retrieval and formatting.

For starters I’ll need to:

  • Adapt the current Courses area content into some sort of re-usable data source
  • Use the data sources to populate an easy-to-use course selector
  • Justify my own time by developing some ideas for re-using the data elsewhere

Guerrilla Gardening the Institutional Web

September 4th, 2009

Something else was going on in Colchester around the time of IWMW 20009. While delegates of the Institutional Web Management Workshop were hearing the mantra ’seek forgiveness rather than permission’ for any improvements we’d like to make to our institutional web provision,  The Human Shrub was hard at work with some unapproved upgrades of his (or her) own.

Inspired by the guerrilla gardener I’ve decided to take some direct action on an area of our site. I’m going to tell no-one, and work by cover of darkness. I’ve yet to decide on an outfit.

The aim is to use spare time and all available methods to improve the look and feel, user interface and usability of the area in a non-invasive way, avoiding all the usual time constraints. By the end I hope to have something suitable to replace or update the area that all stakeholders will find difficult to refuse.  To do this:

  • All work must be carried out on breaks, out of hours or overnight
  • No live content will be touched, proof of concept will be devised & created as alternate services
  • Extant environment and systems will be respected – that means working with the CMS, with the means of editing and deployed using the normal methods
  • Ease of integration or implementation a major determinant of any approach (so no recreating the whole site as a Symfony plug-in)
  • As with any unofficial, unbidden and unapproved endeavour, the goals will shift & adapt as and when.
  • Horticultural metaphors will abound.