How To Skin A Wiki

Lay the Wiki on its back on a flat surface, and pinch the skin at the loose part in the lower belly………

Only joking, as we know a wiki isn’t a furry woodland critter that makes a durable Davy Crockett style hat. A Wiki is a website, with pages that can be easily updated via an interface, using simplified mark-up language. We are using Confluence, a “simple, powerful wiki that lets you create and share pages, documents and rich content with your team.”

What is the Difference between Designing and Skinning?

I’d define skinning as styling pages that already exist, a bit like redecorating a hall with outdated floral borders along the skirting boards. Whereas design is a process, where every stage is considered, from conception to sign-off.

I have already written about when you should and shouldn’t re-skin a site, it is generally frowned upon unless fresh functionality is being added. Skinning a wiki is different; it is a way of creating a bespoke skin that is true to the branding of your company or institution.


  • I wanted to approach the project as if I were designing for the corporate site. Even though I knew I would be working with pre existing code and structure, I still wanted to work from a finished design developed in Photoshop.
  • I wanted to work with the same web fonts as the corporate site: Arial for headings and Verdana for regular text. Also to use consistent spacing, line-heights, link-colours etc
  • I wanted to create a look and feel consistent with the GO portal, to contrive the semblance of a single application when navigating between the two.

Photoshop Designs

As noted in my previous post about GO, I’ve been determined to dispense with any conspicuous decoration, especially repeated background images and drop-shadows, I wanted the design to have a clear, utilitarian quality.

standard layout

The wiki breadcrumb and dropdown menus match the tabs in GO. The background images are white PNGs with their alpha transparency set to 30%; the background colour of the header can be altered, and consequently the tab’s transparent background image appears as a tint of that colour.

An example of this colour effect with the skin applied to the mail system:

Web Mail

The wiki will include intranet sites for University departments; they will be accessed via customised GO panels. We intend these sub-sites to have visually interesting and instantly navigable homepages.

Applying the design to Confluence

I soon realised that my idealistic intentions were a little impractical, when I noted the amount of page layouts, and methods of displaying data that Confluence offered. To try to design up front for every consequence was naïve, so I decided to stick to the most basic layouts only, and then play it by ear.

Confluence has a whole heap of style sheets with many generations of classes. Without Firebug and the Web Developer toolbar for Firefox, it would have been like deciphering the riddle of the sphinx.

As designers tend to do, I started from the top. Getting the breadcrumb, search-bar and drop-down menus to look indistinguishable from GO, this seemed fairly straightforward; then I cross checked it in IE7 and Opera and I quickly remembered how much easier it is to style your own code.

After this I concentrated on the basics: headings, paragraphs, lists, links, tables and forms, really trying not to be drawn toward the more idiosyncratic elements. When I approached elements that were unconsidered in the preparatory stage, I tried to apply principles that were consistent with what I already had. I removed borders, margins and text indents that busied the page composition, defining spatial consistency and alignment.

Was I Successful?

Well I’m still trying to iron out some cross browser quirks, especially where elements are floated, and CSS attributes have been inherited in varying orders, so this question is slightly premature. This will be an ongoing project that will throw up conflicts as different departments evaluate how they want their content to be displayed.

Evaluating things from how it looks in Firefox, I’m fairly pleased with the results; the pages look less like Confluence pages, and more like Edge Hill web pages, but there are still many echoes of the default look and feel. I think I have been successful in spacing the layout so that the pages flow better, and are easier to speed-read and analyse at a glance.

Where Now?

  • Internal faculty and departmental sites will gradually be moved into Confluence over the coming months replacing the current intranet.
  • The skin will be adapted appropriately for other systems like online mail and Blackboard.

What should @edgehill do on Twitter?

Following on from my post about growing usage of Twiter, today I’ll look at how we might use Twitter at Edge Hill.

We set up an account for Edge Hill back in May and since then we’ve used it mainly to publish links to news stories (using Twitter Feed), and occasionally interacting with people.

The number of followers has crept up – 174 at the time of writing – but many of them are other universities and colleges or possible spammers. Admittedly numbers aren’t everything but I think that’s indicative of us not using Twitter as well as we can.

So what are other universities up to? In the UK it seems largely similar to us. Some are purely automated, others have teams managing tweets and responding to replies. Two that are fairly typical are Keele University and the University of Bath. The latter has, however, experienced an unexpected boost – UniofBath tripled their followers in under a week. How – because a load of snow dumped down on the city last week! As Alison Wildish explains:

[…] The bus and train services ground to a halt and as a result the University closed. During the morning the Communications team posted messages and updates on our internal homepage AND on Twitter. Alongside this the Customer Services team at Bath Bus Station updated their own Twitter account with the latest news on the buses. Both streams of information proved invaluable and as the day went on the number of ‘followers’ increased.

So what Edge Hill needs is 2′ of snow? Maybe it would help, but while that might be an initial draw, as Alison acknowledges, it’s not going to keep people coming back. What if the snow doesn’t come? How should we promote usage of Twiter?

  • Announce that we’re on Twitter: it’s only just dawned on me, but we’ve never made a formal announcement. Bath did this on Thursday mid way through the “crisis”.
  • Connect Twitter with our systems: we have the GO portal which could easily have a panel for our Twitter feed (it can already using RSS but let’s make it more accessible).
  • Diversify our messages: not every news story will interest everyone (sorry Paul, Angie and Mary!) so we should feature a broader range of the things going on at Edge Hill – events, conferences, open days, sports results, alumni – the list is endless.
  • Create a network of Twitter accounts: it’s quite likely that not everything will fit neatly into the main edgehill account – how about an account for the Students’ Union? SOLSTICE Conference have an account too, so let’s get them working together.

The likes of Chris Moyles (who’s added 40,000 followers in a week) are appealing to Edge Hill’s core demographic so we can infer that there must be some more students out there using Twitter. Let’s go find them!

Twitter goes mainstream?

Was this the moment Twitter went mainstream?

When Stephen Fry and Jonathan Ross start discussing niche social networks on primetime television then you know something is about to change. In what seems like a matter of days, Twitter has gone from the playground of geeks and social media nuts to the place to be seen for the famous and their stalkers alike.

Of course we’ve been plugging Twitter for ages – my first tweet was way back in May 2007:

I’m also at work.

Inspired isn’t it? I hadn’t worked out @replies but was talking to the only other person I followed at the time, Alison Wildish (formerly of this parish).

In the last series of posts about Twitter I covered a few of the ways I’d found it useful – things like networking with colleagues and contacts, crowd sourcing help and engaging with the back channel at conferences but since then I’ve found some of the ways I use Twitter have changed – I’ve gone beyond my own network.

My network of friends and followers on Twitter grew pretty organically over the last year but recently I’ve been less constrained by it. I didn’t realise it at the time, but one of the first examples of this was the US presidential election. Twitter added a special election site which allowed you to track tweeks about the candidates. On election night, I was watching TV, browsing the web, and keeping an eye on Twitter too. So was the BBC – the first time I’d heard it mentioned by them outside a technology programme.

When watching TV, I now find I often do a Twitter Search for the programme name to see what other people think of it – often with surprisingly differing opinions! [And anyone who says things like iPlayer will be the death of live TV is lying – there will always be a place for shared experiences].

Most recently, I’ve noticed a few Twitter phenomenon that have swept the nation:

  • #uksnow – reinforcing the world’s stereotype that British are obsessed with the weather, the #uksnow hashtag beat the Superbowl to become one of the hottest topics on Twitter.
  • Twestival – this Thursday, 12th February in over 150 cities around the world, Twitter Communities will come together to raise money for Charity:Water. The Liverpool one is being organised by Edge Hill’s very own Mandy Phillips and other people you might know will also be in attendence (but unfortunately not me – I’ll be a couple of hours into a very long drive up to the Scottish Highlands).
  • Celebrities – Fry, Ross, Philip Schofield, a gaggle of comedians and growing by the day. Chris Moyles gained over 38,000 followers in just five days.

Does this all add up to Twitter now being “mainstream”? For me, not yet, but it’s moving that way. Celebrity Twitterers are bringing in large numbers of new users, and while some may simply be using it to cut out Heat Magazine and get gossip direct from the source, others do seem to be engaging.

With a growing user base, perhaps it’s time to look again at how Edge Hill can make use of Twitter and if there’s things we can learn from other universities, or even celebrities. But that will have to wait until next time!