Xmas Digital Art Wallpapers

We are very close to the Christmas holidays again and I thought it’s about time to decorate my desktop while counting down the days. I’ve been browsing the web to see what is available and I found some awesome designs from VLADSTUDIO, which offers the usual kind of digital art given away as desktop decorations. Just to keep you and I on the Christmas spirit.

Download instructions are pretty obvious, and there are plenty of resolutions to choose from. The low quality wallpapers are free to download, the quality is good enough, but if you prefer the high quality you will need to register on their site. Unregistered users can download several different resolutions – 800×480, 800×600, 1024×600, 1024×768, 1152×864, 1280×1024, 1600×1200px.

These are for personal use on your desktop only! Do not use for anything else without the authors permission!

Snegovick

Christmas Nights Christmas Nights

Christmas VolcanoChristmas Volcano

Christmas TrainChristmas Train

Waiting For The Miracle
Waiting for the Miracle

Christmas Ice Skating
Ice Skating

Snow Man Snow Child
Snow Man Snow Child

Christmas Bag
Christmas Bag

Siberian Winter
Siberian Winter

A Small Gift For Christmas
A Small Gift for Xmas

Waiting for the Spring
Waiting for Spring

Where Christmas Gifts Are BornWhere Xmas Gifts are Born

Confluence Design Templates

25 by Leo Reynolds.In a previous post How to Skin a Wiki, I was adamant that the Wiki design should be basic: This assertion was based on principle, but furthermore on naivety, as I was a novice when it came to Wiki mark-up. I now have some understanding of the potential for more complex design layouts in Confluence.

Is this it?

I got a sense that clients were underwhelmed by the simplicity of a basic Wiki page, and also that there was no way of presenting familiar content in an interesting way. As Confluence allows you to create templates as a starting point for a page, we decided to create some layouts.

When we began training staff to use the Wiki , we demonstrated the templates and I found that they struck a chord. I felt they accentuated the potential of the Wiki , and helped soften the learning curve.

Homepages

There is a basic image with text layout; one that incorporates RSS feeds; and others that enable departments to emphasise specific sections within their site …

Example 1

lists

Example 2

pictureCards

A-Z lists and FAQs

These are pages that are commonly found on department sites. I expect there will be more examples like this that will also be made into templates.

A-Z Document List

az

FAQs

faqs

Macros

I also created a macro to display contact details, which outputs the same vcard mark-up that we use on the corporate site.

contact

Rise of the Mega Menu

Mega Menus might sound like McDonalds’ latest attempt to Super Size your life but not in the web design community.  Here we’re talking about a relatively new development to help navigation around websites.

For quite a long time drop down menus have been a popular navigation feature on the web – our corporate website has used them for many years and they go some way to solve the problem of linking to lots of information while using a small amount of screen space.  Drop down navigation isn’t without its problems – nine years ago, usability guru Jakob Nielson advised to use them sparingly – and mega menus are an attempt to do drop downs better.

Our interest in expanding navigation isn’t for the corporate website but GO. As part of the staff intranet to GO migration we are facing the problem of vastly increasing the amount of information available and guiding people to their required system.  The top global GO navigation that shows in most internally facing services and currently contains half a dozen links won’t scale when every department and system is available through GO.

This isn’t an overnight surprise and we’ve seen this coming for over a year but now is the right time to make changes.

I don’t believe “mega menu” is a standard term and many sites implement the idea in different ways but the general idea is to have an expanding menu area linking to many parts of a site.  The first example is an extension of standard drop-down navigation.

image

Typically there will be several menu items each with their own drop down containing a variety of information.  The larger area means there is greater flexibility in how links are shown.

The second type of mega menu can be seen on the BBC websites.  In early 2008 they added an “Explore the BBC” button to the masthead of their pages. Unlike mega drop down menus, this is a button you must click on and opens up to a selection of links:

image

The explore button in provides a mix of fixed popular subsites – iPlayer, News, TV etc – and time-limited promotional links – currently Strictly, Democracy Live and Merlin.  There’s also a link to their full A-Z list (the topic of a future blog post!).

Jakob Nielson has something to say about mega drop down menus as well and it’s useful advice which we have hopefully applied to our own implementation.

Our planned approach is somewhere between the two design patterns.  We’re experimenting with ways to add “More” to the GO navigation.  We’re currently testing solutions and hope to launch something in the next few weeks.

What’s Up Docs?

image There are big changes coming to the staff intranet!  The staff intranet, also known as “docs”, is the default homepage for staff on campus and has served us well for the last… actually I don’t know how many years!  But it’s becoming increasingly apparent that the systems – both process and technical – are not able to scale with the growth of the University and with the increasing reliance on the web as a publishing point.

Along side the staff intranet, for the last three years we have had GO, our portal system available to both staff and students offering single sign on access to a range of web-based services from Edge Hill.  While it’s been possible to access the intranet via GO, it’s never been well integrated but our changes will move to a single platform.

For about a year we’ve been slowly growing our use of Confluence, an enterprise wiki system which will manage most of the content available through GO.  To date the Faculty of Health has been the largest user as part of their extranet project but over the next few months we will be implementing the migration of the contents of the staff intranet into Confluence.

We’ll be using this opportunity to give sites a good winter clean and give access to departments to enable them to easily create and update pages and link to files, all through a web interface.  The wiki offers a number of other benefits such as searching across pages and documents, and – of course – integrates with many other services available through GO.

GO and the staff intranet are very different beasts and so we’ll be making further developments to aid the transition.  Some of these might be temporary such as a new default homepage for people who haven’t yet taken advantage of the personalisation available through GO.  Other changes will apply to everyone including students.

I’m pretty excited by the changes that are coming and we’ll be introducing some possibly as soon as early December so stay tuned to find out more!

Burning down the house

image

This week Web Services started a new way of running some of the projects we undertake.  It’s still early days (five of them!) but I thought it might be useful to explain what we’re doing so that we can reference it in future.

The system we’ve adopted is called Scrum – the name comes from the game of rugby – and is a commonly used agile development technique.

As with any project management system there’s a whole load of terminology and scrum is no exception.  We’ve got pigs and chickens, scrum masters, product owners, sprints, backlogs and daily standups!  I’m not going to explain everything now but here’s a few of the things we’ve done this week.  I’m sure we’re doing some things “wrong”, but that doesn’t bother me too much.

The first project we’ve introduced this technique to is the migration of the staff intranet into GO.  We’ve set ourselves an ambitious timescale to get it moved across by the end of the year and it has a good balance of development, design, content creation and training meaning everyone in the team is involved.  Again, there will be more information about the intranet to GO migration coming out soon!

I was advised by Alison Wildish Kerwin (formerly of this parish) that the roles of product owner and scrum master should be distinct so Steve, whose work for the Faculty of Health involves a lot of development work on GO, agreed to take on the latter role.

The process started off at the end of last week when Steve and I – now undertaking the role of product owner – met to draw up the product backlog.  This is the list of things that need to be done on the project.  We already had lots of things to do to GO and added in a bunch of jobs related to the migration.  We tried to make sure each job was well defined so that anyone undertaking the task could get going straight away.

Fast forward to Monday morning, 10am and our first team scrum meeting.  After I’d explained what I understood it to be about we took a break to play poker.

Planning Poker CardsBefore I get into trouble, we weren’t sat round a table with a stack of chips playing Texas hold’em, we were playing Planning Poker.  This is a way for the team to collectively decide how difficult each task is.  In our case we’re using story points instead of time as a measure of complexity as everyone has different skills so what takes me a few hours might be done by someone else in a matter of minutes, but the complexity doesn’t change.

Aside: I’ve seen some really nice planning poker cards from Moo and other companies but I’m cheap and don’t want to pay $$$ for them so I made a set with a marker pen and some of the hundreds of old business cards that are in my drawer!

In Planning Poker, each task is read out and players each choose a card.  If there is a consensus, the ticket is allocated that point score, otherwise the highest and lowest players are given the opportunity to argue their case.  The process is repeated until there is agreement before moving on to the next ticket.

Once this was finished I quickly sorted through the tickets and gave each a priority from one to five before passing the product backlog back to the team to select tasks.  Some tasks were selected by individuals, others by pairs to undertake during the first sprint.  I didn’t try to influence this process too much but if a job was selected, it had to be completed by the end of the week.

Nine tasks totally 65 story points were selected to form the Sprint #1 backlog and the project was now underway.

Sprints are short, iterative cycles in the project development where each final output should be a “finished” product.  I consider finished not necessarily to be something we’d release to the public but at least something that we’d show to stakeholders and clients.  In most scrum teams, sprints are 30 days long but I think this is probably too long for many web development projects where there are fewer hard software engineering problems.

So we have adopted one week sprints.  This may turn out to be too short but for now it’s giving us the opportunity to see how the cycles work in a shorter time.

Each day at exactly 11am we have our “daily standup”. So far there hasn’t been much standing up going on but I can let that slide.  Each person in the team has the opportunity to say:

  1. What they did yesterday
  2. What they’re doing today
  3. Any problems preventing them from achieving their goal

Sprint #1 Burndown ChartThese meetings last at most 15 minutes (and so far much shorter) but are really useful to give everyone an awareness of how the project is progressing. As tasks are completed they are closed in our ticket tracking system and we can update our burndown chart. This is a graph showing how many story points are outstanding each day and means we can see at a glance how work is progressing.

Today after the daily scrum meeting we took the remaining items from the product backlog (with a few additions) and started the next cycle, first playing planning poker, then choosing tickets to undertake next week.  For next week we’ve introduced one task from another project – Topics/125 – and we’ll be using scrum for more work over the next couple of months while we assess its long term effectiveness.

So that’s all for our first week of scrum! I need to thank Alison and Andy Male from the University of Bath Web Services.  They’ve been very patient in answering all my questions about how they use scrum over the last few weeks (and months!).

Hot or Not?

HeatmapInspired by University of Bath’s post about how they deleted the internet, last week we installed some heatmap software to plot where on a page users click.  We’ve had it running on a few pages and already some interesting patterns are showing.

We’ll be using these heatmaps to help up determine what’s working on the site and analyse behaviour patterns when migrating the intranet across to GO and in developing new designs for the homepage.

A stick of BarCamp Blackpool rock to the first person to identify which page the above heatmap comes from [excludes members of Web Services].

Copyright Liberation

Throughout the recent redesign of our departmental sites, we’ve used an array of images from Flickr, under Creative Commons licenses. This meant making additions to our copyright page that complied with the conditions.

We aimed to:

  • Display a thumbnail of the image and a link back to its original Flickr page
  • Credit the authour under the Attribution condition, and link to their profile page
  • Display all the CC conditions connected to the particular photograph

We decided to extract the data using the Flickr API, so that the information is accurate, and we can check if any of the conditions have been changed over time.

What is Creative Commons?

According to Wikipedia CC is a “non-profit organization devoted to expanding the range of creative works available for others to build upon legally and to share.”

It enables authors to relinquish the default “All Rights Reserved” copyright status of their work, but retain some rights; for example whether an image is used for commercial purposes; or is further adapted using Photoshop. People are motivated by a sense of creative community and openness.

Why use them on our site

We do use stock images when we need to communicate something visually, using absolute clarity. However, there are issues of cost and limitations of use, which make them impractical; also we know that our clients are media savvy, and turned off by some of the hackneyed symbolism used in stock photography.

By using images from Flickr, we have access to authentic pictures taken from personal experience.

A Good Example

On the History Department homepage there is an image of President Obama: we could have bought a small web-ready image from an established agency for around £50; but we wouldn’t have been allowed to adapt the image to fit our layout, and we’d have to remove it after an allotted time period. Furthermore the image is likely to have been formal and static.

By using an image by Flickr user Matt Wright, taken from the crowd at a Democrats rally, we have a dramatic image that we can adapt to our layout under the conditions of the license.

About Flickr API

Flickr offer one of the most comprehensive application programming interfaces (API) of any web service allowing anyone with a bit of knowledge to develop on top of their services to offer extra functionality or integrate with your own systems.  We’re not however using the main API.  Instead we’re making use of a new service offered by Flickr parent company Yahoo! – YQL or Yahoo! Query Language.  This service offers an SQL-like syntax to query the web.  For example to find out information about a photo, you could use the query:

select * from flickr.photos.info where photo_id='471634239'

That gets requested from a web service along with the return format – either XML or JSON – and they send back the resultset. No API keys are required making implementation a piece of cake. We’re doing it server side allowing us to cache the response to improve performance but YQL can also be implemented on the client using just JavaScript.

YQL isn’t just limited to extracting data from Flickr – many other Yahoo! properties are available and it can even be used to extract microformats and other data from any web page. Along with Yahoo! Pipes and Google Spreadsheets, it’s become a vital tool for anyone creating mashups of data.

ehche.ac.uk in 1999

ehche.ac.uk 1999-10In catching up on my feeds over the last week I came across an interesting diversion from Sitepoint looking at ten websites from ten years ago.

So using the Internet Archive Wayback Machine I pulled up previous copies of the Edge Hill website. Of course in 1999 the site was hosted at ehche.ac.uk but far more than the name has changed in the last ten years. If you look at homepages for 1999 it barely changed all year – we now change the main feature on the homepage a couple of times a week and news and events change almost daily. In certainly was simpler back then!

New Departmental Sites

We have been redesigning and reorganising our faculty and departmental websites over the last two months, and we are pleased to announce that the majority have gone live this morning:

Why Do This?

  1. Firstly we wanted to put the sites into our corporate-site design template; because we felt it was important to have consistent branding, navigation, search facility, and page-layout across all outward facing pages
  2. Secondly we have a system to extract news, events, staff profiles and multimedia from our database; we can now employ this across our new sites.
  3. Thirdly, we wanted to formalise the top level navigation, then utilise tabs on lower level pages to cater for the individual needs of the department. For example, the Performing Arts department has a greater need for visual media, than say Law and Criminology

Homepages

The sites have a main homepage modelled on the established grid, with boxes linking directly to: About the Faculty, Courses, Research, and News and Events. There is space for specific promotional needs if a new courses or publication are launched for example. For departments with a number of internal departments, like The Department of English and History; these are clearly listed on the homepage.

english outlined

Sub-Homepages

The sites have five basic sections About the Faculty, Courses, Research, News and Events, and Contact us; I wanted the About The Faculty and Courses areas to have a befitting sub-homepage with a marketing focus.

About the Faculty

I wanted to use a strong representative image, which either emphasised the attraction of the subject, or highlighted the exceptional facilities that Edge Hill has in that subject area; I also wanted a friendly welcome message from the head of department, along side their portrait and v-card details.
About The Department

Courses

The courses homepages differ according to the volume and complexity of the department’s portfolio: For example the faculties of Education and Health identify the client according to their professional level, whether they are entering study for the first time or pursuing professional development or extra qualifications.
Faculty of Health Courses

Sites within The faculty of Arts and Sciences, the portfolio of courses can be divided into Foundation, Undergraduate, and Postgraduate courses, or into subject areas:

Business School Courses
Courses themselves can have homepages, with tabs for subject specific content. These complement the online prospectus pages – where the focus is on providing information – with the capacity to display more visual content such as videos, photo galleries or other multimedia. They will also serve as landing pages when courses are promoted on social networking sites.

Advertising

Staff Profiles

The profiles are pulled from the database: they can be displayed as a thumbnail grid with contact details in tooltip boxes; or as lists with details displayed vertically, with large or small thumbnails. You can toggle between theses states using buttons.

English Staff

News and Events

Departmental news pages now use the same system as E42 our university magazine

NGAS News

Browser stats

Phil Wilson from the University of Bath has just published a summary of browser statistics so I thought it might be interesting to do a comparison.

We also use Google Analytics and it covers virtually every page on the site.  We don’t distinguish internal visitors so I’ll give figures for external and total.

External visitors:

Browser Visits Breakdown
Internet Explorer 79.65% IE6: 18.5%; IE7: 68.5%; IE8: 13%
Firefox 14.05%
Safari 3.78%
Chrome 1.89%
Opera 0.25%

All visitors:

Browser Visits Breakdown
Internet Explorer 80.30% IE6: 17%; IE7: 71%; IE8: 11.8%
Firefox 13.77% FX2: 6%; FX3: ~90%
Safari 3.55%
Chrome 1.80%
Opera 0.23%

Still far too many IE6 users both inside and outside the University. I will be very glad when it stops being a significant problem but browser share is dropping very slowly and none of the various proposals for encouraging people to upgrade seem very attractive to me.

Interestingly, looking at the stats for blogs.edgehill.ac.uk, Firefox usage jumps to 33.5% with IE at 56%.

>