New default WordPress theme: Fourteen Eleven

WordPress theme: Fourteen Eleven

WordPress theme: Fourteen Eleven

With the increase in mobile devices accessing the University website, I’ve spent a couple of hours this week working on a St Andrews themed responsive WordPress theme for our central WordPress multi site installation, WordPress @ St Andrews.

Imaginatively titled Fourteen Eleven this is a child theme of one of the default WordPress themes: Twenty Eleven.

This theme is clean, lightweight, and optimised for mobile use. It offers 12 St Andrews-themed headers, which can also be shown randomly if required. Or upload your own.

Twelve St Andrews themed headers. Or upload your own.

Twelve St Andrews themed headers. Or upload your own.

Next week’s task is to rebrand the Fourteen Thirteen (1413) theme as Fourteen Ten (1410) as it is actually a child of the default WordPress theme Twenty Ten, rather than Twenty Thirteen. This should help us keep track of which theme is a child of which.

The usability of photos and URLs

Usability mistakes to avoid when using photos in your website

There is often a temptation to use photos to brighten up a page without giving much thought to whether it helps serve a real purpose, or whether it might even be detrimental to the page. This article contains several useful tips about how to use the right photos, and what to avoid when using images on a webpage.

URLs are for people, not computers

URLs (the technical name for web addresses) are highly important for computers as they uniquely identify every page on the web. The content of URLs is also hugely important for search engine rankings. But many users also find them a useful way to navigate a website.

URL as UI

Some useful tips on creating good URLs from a usability point of view. This is a very old article, but the advice still holds true.

Microsoft Research have conducted an eyetracking study of search engine use that found that people spend 24% of their gaze time looking at the URLs in the search results.

Creating quick and easy placeholder images

Placeholder image

We have all been there. You are working on a test webpage, and you need to create a placeholder image to test out how it would look. What can you do?

You could always go on the hunt for a suitable stock image. But this can be time consuming and distracting.

So I went looking for a basic placeholder image that could be re-sized and re-used on a variety of different pages, and could represent a variety of different images. I was thinking of the sort of image often found in wireframes, which normally replace images with a plain rectangle with a cross going through it.

But instead I came across the hugely useful Placehold.it tool. This discovery has caused great excitement at web team HQ!

It is quite easy to use. Each placeholder image URL begins http://placehold.it/ — then you can just add the x and y dimensions to the end of the URL. For instance, the 640px × 360px image at the top of this post can be generated using the URL http://placehold.it/640x360

You can choose to add just a width to the URL, which will create a square image.

Example placeholder image

There are further useful customisation options. You can change the colours of the background and the text by adding hex values. Here is an image created using St Andrews Blue as the background color and white as the text colour: http://placehold.it/125x70/00539b/ffffff

Hello world!

You can even add your own text in place of the image dimensions: http://placehold.it/308x173/ee3224/ffffff&text=Hello+world

All of the customisation options have got us excited, but I can think of a few more features that would improve it even further.

  • The ability to set a width and an aspect ratio, for those times when you know you need a 16:9 image but just can’t be bothered to get the calculator out.
  • The ability to select a different font. The one used is groovy and all, but sometimes a more neutral font like Verdana might be better for testing webpages.
  • Perhaps the ability to add rounded corners? OK, now I am being really demanding…

Image of a cat

If blocks of colour are not your cup of tea, we have since been told about Placekitten, which was inspired by Placehold.it. This being the internet, Placekitten automatically generates an image of a cat for you to place on your test webpage.

I am often told that I ought to add more images to my blog posts. Now I really have no excuse.

Now all that is needed to make our lives complete is for a website to offer placeholder images containing fire engines.