Moving our team task board online to Trello

For the last few years the Web team have been using, and adapting, a form of Agile/Kanban board to manage what tasks need to be done and by whom. It has served us very well, but this week we moved it online to Trello, a free, hosted service from Fog Creek Software.

Why we went digital

When we started using the board the Web team consisted of three people: Steve the Web Manager, me (Gareth) the Assistant Web Manager, and Chris the Web software developer.

We all sat in the same room together, and the board was just a few steps away from our desks. It was handy, and quick, and accessibly. But as the team has grown we’ve now spilled out into an office on another floor of the same building.

It’s not quite so easy now for all five members of the team to add to or move tickets around the board. Occasionally some of us work from home too.

The main catalyst, however, was in response to a recent crisis in which our intrepid leader, Steve, fell of a ladder and broke his foot (you can see photos of his recent x-rays on TwitPic). He could be working from home for some time now and we wanted to make him feel included so we moved to Trello.

Trello

It was pretty painless to set up and add users to our newly created organisation and board. I then spent a couple of hours migrating our open tickets over from the whiteboard into Trello.

Labelling and assigning tasks to users was simple thanks to Trello’s excellent keyboard shortcuts.

I did wonder if I’d miss physically moving cards from one column to the next, but Trello has a neat little trick whereby when you ‘pick up’ a card it rotates it a little to indicate that it’s been picked-up. It’s really effective and surprisingly satisfying:

We’ve decided to trial working with Trello for a few months, certainly while Steve is recovering and may have to work from home.

So far the response from the rest of the team has been very positive (after we switched off email notifications). It’s attractive, it’s simple and it’s intuitive. No doubt we’ll report back in a few months with our thoughts on how the move from analogue to digital has gone.

Using XAMPP web server

As we all (should) know testing out software on live environments isn’t particularly sensible. For the last five years in the office, and longer at home, I’ve been running XAMPP from Apache Friends as a test server on my PC.

XAMPP includes Apache httpd web server plus MySQL, PHP and Perl in an easy to install package (available for Windows, Mac, Linux and Solaris).

I don’t know about you but I’ve spent hours trying to get Apache, MySQL and PHP to speak to one another on a number of PCs. Sometimes without any success, other times after a lot of reading and config file editing. That was when I discovered XAMPP. No more delving into config files to try to coax life into your *AMPP server. Out of the box XAMPP just works.

The latest version for Windows, XAMPP 1.7.4 includes the following:

• Apache httpd 2.2.17
• MySQL 5.5.8
• PHP 5.3.5
• phpMyAdmin 3.3.9
• FileZilla FTP Server 0.9.37
• Tomcat 7.0.3 (with mod_proxy_ajp as connector)

Security

This simplicity, however, comes at a cost: security. As they repeatedly stress on their website

“XAMPP is not meant for production use but only for developers in a development environment. XAMPP is configured is to be as open as possible and to allow the web developer anything he/she wants. For development environments this is great but in a production environment it could be fatal.”

The missing secure elements in XAMPP are:

• The MySQL administrator (root) has no password.
• The MySQL daemon is accessible via network.
• phpMyAdmin is accessible via network.
• The XAMPP demo page is accessible via network.
• The default users of Mercury and FileZilla are known.

Security holes which can, of course, all be patched. XAMPP comes with a security status page which allows you to see how secure it currently is.

Setting a root password on MySQL and protecting the XAMPP directory is as simple as clicking a link and filling in a couple of forms.

Conclusion

I’ve found XAMPP to be really useful, particularly for testing PHP code, developing WordPress themes and learning new Web apps.

If you don’t fancy XAMPP then there is also WampServer. Or you can get your hands dirty and delve into the config files… but remember: in the config files no-one can hear you scream.

Keeping a collection of screenshots for inspiration

Example collage of website screenshots that I use for design inspiration.

Back in late 2008 I read an interview with a Web designer who advocated keeping a scrapbook of cool designs that you’ve seen so that when the time came for Needing Inspiration™ you already had a volume of stuff to look through and be wowed by. It was a discipline that he’d picked up from art college, seemingly.

What a brilliant idea I thought and promptly started my own collection.

I keep two collections:

1. One is for stuff that I cut out of newspapers and magazines that I glue into an A4 Black n’ Red spiral-bound notebook (simply because that’s what I had to hand).
2. The other is for screenshots that I store in Dropbox in a directory called ‘Cool designs (inspiration)’.

I started to use Flickr for storing the screenshots but Flickr requires that you own the images, and technically I don’t as they often contain copyrighted designs. Also Flickr requires online access (which I can’t always guarantee) and it’s relatively slow for this process. I’m currently using the image viewer in Google Picasa to quickly navigate through the screenshots.

To grab the screenshots themselves I generally use SnagIt —it’s especially useful for long screens that require scrolling, SnagIt captures it automatically—but occasionally I resort to the good old Windows shortcut Alt+PrtScn.

These collections of screenshots and my scrapbook I find really, really useful. At the moment I’m working on a redesign of the University’s sport website and this has been a great resource to give me ideas and suggest alternative ways of laying out information. I recommend it highly.

Two useful resources when planning Web projects

Web ReDesign 2.0

A few years ago I came across this really excellent book by Kelly Goto and Emily Cotler: Web ReDesign 2.0: Workflow that Works (New Riders, 2005).

In 10 chapters Kelly and Emily lead you through the workflow of a complete website redesign. They break the process down into five phases:

1. Define the project.
2. Develop site structure.
3. Design visual interface.
4. Build and integrate.
5. Launch and beyond.

I’ve increasingly found this framework to be really useful, not only for website redesigns but for developing new sites too. I now think in terms of five phases for most Web-related projects that I work on. I’ve found it also provides a very simple overview for clients to help them understand where we are in the overall project lifecycle.

I now have the book sitting on my desk at all times, within easy reach. Their website also has a number of downloadable resources such as a client survey, tech check list, budget tracker, etc.

Web Design Sketchbook

Another resource that I’m finding really useful particularly during phase 1 (define the project) is the Web Design Sketchbook from 37 Media.

The first nine pages contain questions to ask the client, which I’ve found really help you understand the project better. Questions such as:

• What objectives are you trying to achieve with this site design / redesign?
• What is the primary “action” the site visitor should take when coming to your site (e.g. make a purchase, become a member, search for information)?
• If you could communicate only one message to visitors, what would it be?
• What should users think or feel when they look at the design of you site?

The final page of questions includes a list of word pairs to help you determine the tone of the site, e.g.

• conservative or progressive
• cold or warm
• spontaneous or orderly
• trendy or classic

The second half of the book contains what they call “layout brainstorming pages with full browser chrome and grids to better plan how your site will look and operate when it’s finished”. A nifty idea.

You can order the sketchbook in two varieties (single project at US $12 or a full 104 page sketchbook for US $25) or you can download and print out the free version, which is released under a Creative Commons license.

Build your own

These resources have inspired us to build our own, drawing on resources from each as well as our own experience and requirements here at St Andrews. When we have I’ll post a link to it here.

What would you include in a Web project workbook?

An unfamiliar view of St Andrews

A few weeks ago I spotted this photo called, simply, “St Andrews” on the Our Scotland website; it was taken by Chris Cuthbert.

What I love about it is that it’s not a familiar view of St Andrews. I had to think for a moment where it was taken from. Most photographs of the harbour are taken either from or include the pier. This one has been taken from near the East Sands looking towards Balfour Place, The Shore, and Shorehead.

This post has got nothing to do with the Web. I just thought it was a beautiful photo and worthy of sharing.

This week I are been mostly…

Above: Our current list of outstanding support calls.

In the style of The Fast Show: this week I are been mostly… answering support calls.

Many people suspect that the Web team summers are quiet affairs, with plenty of peace and quiet to get on with projects. Sadly that’s not the case, and particular while we’re playing ‘holiday tennis’ with one another. (By the time I return from holiday on Monday 15 August I will not have seen my colleague, Steve Evans, for 6 weeks.)

So, for the last two weeks, while I’ve been desperate to get on with various projects (redesign of the Sport and Athletic Union pages, for example) all I’ve done is answer support calls as the Web team strength has fluctuated around the 40-60% mark.

It’s been both a very satisfying and a mildly frustrating way to work. But that’s just the way it is just now, so no point in complaining.

(I did manage to get the Course Catalogue pages moved, though.)

600th anniversary and alumni websites

It’s been a quiet couple of weeks on the Web team blogging front. Which is the complete opposite of what it’s been like within the Web team: blinkered, and with heads down we’ve been racing to complete the 600th anniversary website before graduation (which started yesterday).

If you’ve put in a request by email and we’ve not replied as quickly as we might please accept our apologies. We’ve been working, at times and literally, around the clock to get the site done.

And not just one site, we’ve also had the Development/Alumni relations site to work on at the same time.

Once the sites are both live, and the dust has settled, I’ll blog about our experiences of working with an external design agency and what we learned about working together, as a team of five, on the same project.

What developers think of Internet Explorer

I like this self-deprecating advert from Microsoft about Internet Explorer 9.

Only today I was thinking how refreshing it is that I now don’t have to worry too much about testing webpages in Internet Explorer 9. Everything just works now.

Sure, it doesn’t have the same level of support for HTML5 and CSS3 that Chrome, Firefox and Opera have but it does the basics really well and doesn’t have the same weird quirks that IE7 and IE8 have that require obscure hacks and workarounds.

Besides, at the moment all the major browsers have varying levels of support for these new Web standards-in-the-making. That’s why we’ve got tools like Modernizr.

Let’s hope that Internet Explorer’s support of Web standards grows from strength to strength.

Either that or they see sense and move to using the WebKit rendering engine!

Upgrade to TerminalFour Site Manager 7.0 planned

This summer the Web team are planning to upgrade the University’s enterprise Web content management system to TerminalFour Site Manager 7.0.

One of the main features of Site Manager 7.0 is a completely redesigned user-interface which has been designed to be more intuitive and self-explanatory; this should be of particular help to people who use Site Manager only occasionally. Another significant addition is the ability to search for both content and media (images, videos, documents, etc.) by name.

As with all current upgrades, the plan is to upgrade the development server first, which will allow us to carry out extensive testing. We’ll let you know how we get on.

Improving navigation on the University website

We are currently working on a project that will provide a subtle but significant improvement in the navigation of the internal University websites (for current staff, students and postgraduates).

What we have just now

Currently, the majority of webpages aimed at internal audiences have a global navigation menu that is the same across the entire website.

The screenshot on the right shows the menu used for the Current Staff webpages. These are links to the 11 main categories that are presented on the Current Staff homepage.

While these links allow users to skip easily between different sections of the website, they are not very helpful at all when it comes to navigating through the pages that you are currently viewing.

What will be changing

Our aim is to reveal the true hierarchical structure of the webpages in the left hand navigational device. This will make it much easier to navigate through the website and drill down to content that is deeper in the hierarchy.

We already take this approach in many other parts of the website, including all of the pages aimed at external audiences. The example to the right shows a page within the pages aimed at prospective students.

All of the feedback about this has been positive, which has made us confident that this is the right thing to do.

The process of making these changes

Creating these new navigational menus is quite easy. It is simply a case of changing an option in the way the pages are set up.

However, we can’t ‘flick the switch’ yet. As soon as we began to look at this project, we realised that a lot of tidying up was required first. We are currently in the process of working to ensure that the structure is good and that content is up to date.

This requires a fair bit of work. We need to map out what is currently there, work out if anything needs to be changed and decide what should and shouldn’t display in navigation.

To assist in this, we have been using mindmapping software to map out the current behind-the-scenes structure of different parts of the website. To give you an idea of the scale, this is an image that shows how big the mindmap for the Money Matters section is — and this is nowhere close to being the largest section of the website.

Timescale

From this, we can quite easily see what pages currently exist and what needs to be done to improve the structure. We are at this stage of the project for most of the Current Staff website at the moment. But today we will be switching The Town and Beyond section over to the new approach.

Our hope is to have the new navigation system in place across all of the Current Staff website within the next couple of months. Over summer we will work to do the same on the Current Students and Current Postgraduates websites in time for the start of semester.