I will elect anyone who promises to change EUSA's logo

If you’re a student at the University of Edinburgh, you’ve probably noticed that EUSA are about to hold elections by now (unless you never attend lectures, use Facebook or Twitter, go anywhere near any of the campuses, answer your door or…well, go outside). There are a total of 13 people campaigning to become sabbaticals – EUSA president, Vice President Services, Vice President Societies and Activities, and Vice President Academic Affairs – for the next year (there are also numerous other positions, but for the sake of brevity – and because most of the candidates for them don’t actually have websites – I’m omitting them from this post).

A number of these candidates have their own websites. An easy way for you to check why they think they should represent you at any time of the day is just a few clicks away.

Or is it?

I’ve decided to take a quick look at each of the campaign websites, and review them based on how I’d like to see a campaign website run. The main things I’m looking for are:

• Technical – is the site quick to load? Do all parts work properly? Are the URLs for pages sensible? Is it easy to find what you’re looking for?
• Design - does the campaign website maintain the campaign’s branding? Does it obey common web conventions, like clicking the logo to return to the homepage?
• Accessibility - for this part of the test I will be using WebAIM’s WAVE – this performs some analysis on how well the site will work for people using accessibility tools such as screen readers.

President

James McAsh

URL: JamesMcAsh.com

Very easy to find as it’s all over McAsh’s other channels, as well as being a logical choice. Also the first result in Google for ‘James McAsh’ – bonus points!

Technical

A very slow website – possibly the slowest of all. I can’t pinpoint exactly why, as the site appears to be hosted with Webfusion, a UK-based host not especially known for slowness – a quick audit in Chrome only tells me that the site does not utilise caching very well.

Design

A very clean design which ties well into McAsh’s campaign branding. CSS @font-face is possibly overused – though the headings and navigation look lovely in Voltaire, the body text readability is slightly impaired by it (Voltaire doesn’t really work at that size). Though link hover states are done well, utilising McAsh-yellow highlights, links in the text body are displayed in the same colour as the rest of the text, meaning they can occasionally be hard to pick out.

Accessibility
WAVE reported no problems.

Hugh Murdoch

URL: http://HughMurdochForPresident.blogspot.co.uk

Damn, that’s a long URL. Needlessly long. Difficult to find as it’s only recently become linked-to from the Facebook page (that and it would be completely ridiculous to put it on posters or give it out verbally).

Technical

As Blogger is handling the technical aspects of this, there’s not much to fault here. That said, the blog format does make it difficult to find actual policies, since blogs are intended primarily to display an assortment of different things in chronological order, and not to allow you to navigate quickly to specific information you’re looking for.

Design

Very yellow. Very yellow. Murdoch’s campaign isn’t really very yellow itself so this is slightly odd. The header at the top isn’t the campaign logo (which is there, but is relegated to the right-hand sidebar where it is rendered unnecessary by the large not-logo at the top). However, site readability is lovely.

Accessibility

WAVE found no errors.

James Wood

URL: none

Wood appears to have no web presence at all beyond the EUSA election statement – or, at least, has made any web presence very difficult to find.

Vice President Services

Max Crema

URL: MaxForVPS.co.uk

A logical domain name, though it was not simple for me to find, as Crema does not appear to refer to the URL in any other channel than the EUSA election statement. “MaxCrema.com” is not registered, and may have been an even better choice for SEO.

Technical

Page URLs are all needlessly suffixed with ‘.php’ – only really a minor complaint as, provided this doesn’t change, it’s reasonable practice (though I would have personally preferred URLs without suffixes, but that’s just me).

Design

The site seems oddly narrow on a widescreen since it’s fixed to 815px, which is good for people still running at 800×600, but slightly unnecessary for roughly 92% of the entire web.  But this 815px thing doesn’t seem to have been designed with web accessibility in mind, as the height of the header and YouTube video puts all the introductory material below the fold, even on my relatively large Acer monitor. The size of the header is mostly due to the large “MAX” text, which links it well to the rest of the campaign – though would be even better if it had been rendered in the actual campaign font.

Accessibility

WAVE reported 2 errors: the Facebook and Twitter links are just images and do not have any associated alternative text. Not a massive problem, however.

Peter Thibault

URL: TotesForThibault.co.uk

A very unusual domain name…reflecting the oddly-named “Totes for Thibault” campaign. It is difficult to communicate this domain name verbally.

Technical

Although the site (generally) fits into this odd fixed-height website and so doesn’t require a great deal of scrolling, the navigation is a bit oddly-placed. Additionally, the navigation text consists of images with no rollover state at all – rather confusing that “Manifesto” isn’t clickable here but “About Me” (which looks broadly similar) is. And lastly, another navigation problem: the logo does not link back to the homepage (in fact, there is NO link back to the homepage on any page of the site.

I will also point out that the alliterative name “Totes for Thibault” doesn’t work properly unless you already know how to pronounce ‘Thibault’ – which I suspect a lot of people don’t. Heh.

Design

Well, it looks right next to campaign material – but is Thibault’s campaign actually called “Peter Thibault for Vice President Services” (as campaign materials suggest) or is it called “Totes for Thibault” (as the site URL suggests)? Both have equal prominence on the homepage.

The site also makes extensive use of a massive no-no in web design: underlined text which isn’t a link. Even worse, some of the underlined text that isn’t a link is blue. *shudders*

Accessibility

WAVE reports a massive 18 errors for the page. This is caused by the entire layout being inside a table, and consisting mostly of images with no alternative text: this site would be very difficult to comprehend for a screenreader.

Josh Jones

URL: JoshForVPS.co.uk

A logical domain choice as both ‘joshjones.com’ and ‘joshjones.co.uk’ are already registered.

Technical

I can’t really fault anything technically with the site…but that’s because it’s just a modified Blogger template. Navigation is blog-style (which, I will point out, means there is no link to Jones’ policies).

Design

TILED BACKGROUND IMAGE! TILED BACKGROUND IMAGE! OH GOD NO!

But yes, the tiled campaign logo in the background is rather distracting with the contrasting black-red combo. Aside from that, the site does not actually seem to have been “designed” as such beyond changing the header colour to red from a Blogger default template.

Accessibility

No errors reported by WAVE.

John Youngs

URL: vote.JohnYoungs.me

A rather unusual URL in that it’s in the .me TLD…and that it’s a subdomain of an existing blog. Not easily memorised, though it is well-publicised so it wasn’t difficult for me to find at all.

Technical

The navigation does not seem to have a logical order (where is ‘Home’?), and is occasionally unhelpful (what would you expect ‘ME’ in capitals to link to? Why is there an entire menu item for ‘Posters’ – why would I come to the site to look at posters?). Additionally, the main page seems to be blog-oriented (which, as I’ve mentioned, is often unsuited to getting people to the information they want) and displayed in an odd horizontal fashion.

Oh, and that ‘Facebook’ link directs you to a page with a link to Facebook on it. Hmm.

Design

The fonts are very small. WAVE most likely won’t pick up on that as an accessibility issue  but I do see it as one, even if you can just hit Ctrl and + a few times.

The site is very ‘text-driven’ aside from the very large pictures of John Youngs at the top, pushing much of the actual site content under the fold. On. Every. Page.

On some pages – notably the ‘full manifesto’ page – this text-driven feel turns into just a wall of text.

If anything, it does sort-of adhere to the campaign look-and-feel, although that look-and-feel does not seem to be headed with an actual logo, and seems a bit loosely defined.

Accessibility

WAVE raised one issue – the search box at the bottom of the page (which doesn’t seem to serve much purpose given the site consists of 5 pages) does not have an associated button.

Jacob Bloomfield

URL: JacobBloomfield.com

The most obvious domain name choice. Everyone knows what’s going to be at JacobBloomfield.com.

Technical

Technically perfect.

Design

Jacob Bloomfield clearly does not require design evaluation.

Accessibility

3 errors reported by WAVE. However, I get the feeling WAVE doesn’t know what it’s doing.

Vice President Societies and Activities

Kate Harris

URL: KateForVPSA.co.uk

The most obvious domain name choice given ‘kateharris.com’ and the associated .co.uk are already registered.

Technical

When it loads, it loads very quickly. But it doesn’t always load – after visiting a few times, I’ve noticed that there are often DNS resolution errors. At a guess, I’d say there’s a problem with the nameserver configuration.

Otherwise, this is a nicely-run WordPress site. Navigation is done well (and in a logical order) – although I would question the necessity of a search box for such a small site.

The ‘Get Involved’ page makes it very clear how to get involved, and indeed speeds up the process of doing so.

Design

In common with other former-Defend-Edinburgh campaigns, shares design elements with the old campaign – this site in particular is using a modified version of the Shell Lite WordPress template as Defend Edinburgh did.

In any case, it’s well-connected with the campaign branding, being nice and purple and displaying the logo in all its curly-K-and-A’d glory (though a bit of extra whitespace…or purple-space…around the logo wouldn’t go amiss). The additional images on the manifesto page are a nice touch and clearly separate the sections. However, the campaign blog has less of a clear separation between posts, and particularly lacking was the ability to go from ‘Campaign Blog’ view to viewing a single post (making it impossible to share an individual post without already knowing the URL, or searching for the post title).

Accessibility

WAVE reports two problems: the large campaign logo does not have any alt-text, and the search box does not have a label explaining that it is a search box (a JavaScript technique is used to display ‘search here…’ in the box, but it does not do it in a screen-reader friendly way).

Hazel Marzetti

URL: HazelMarzetti.com

The most obvious domain name choice. Not on the first page of a Google search for ‘Hazel Marzetti’ though.

Technical

For some odd reason all the links on this site point to “http://www.neotryte.com/hazel” – possibly the ‘real’ hosting location for the site. If you try replacing this in the page URL with ‘hazelmarzetti.com’, you receive an internal server error message – meaning sharing any URLs other than the site homepage would oddly require referring to it using the Neotryte domain name.

Uses JavaScript submenus, which are regarded as a bad idea for navigation as it slows down user flow. Indeed, navigating the policies on this site seems slow since many of them are on separate pages hidden under submenus.

Design

Another tiled-background design – this one uses Marzetti’s “green hand” campaign logo and really makes it look rather busy and distracting.

Works well with other campaign material, although the site is relatively toned-down compared to the solid bright green seen elsewhere. And I’m not entirely sure what the “green hand” is supposed to mean.

Accessibility

WAVE reports 4 errors: the coloured handprint images above each section (below the fold in this image) are linked to specific policies, but don’t contain alt-text to explain what they’re linking to.

Vice President Academic Affairs

Alex Munyard

URL: AlexMunyard.com

An obvious URL choice which has already reached a high position on Google for ‘Alex Munyard’.

Technical

Breaks convention slightly by having the navigation on the right hand sidebar. However, despite being a WordPress blog, has not succumbed entirely to the blog layout.

Design

Purple! It matches the campaign colours, and the top of the homepage has the campaign logo very visible. However, this is actually a long way down the page – as you can see in my screenshot, the policies are actually chopped off below the fold. Additionally, the campaign logo does not appear on any page other than the homepage – clicking a link to any other page will land you on a page where it may not immediately be obvious which campaign you’re looking at (or, depending on the context, a campaign at all!).

Additionally, purple links on a dark purple background are not very readable at all to me, and I don’t have many problems with low-contrast – to someone who does, the links may be invisible.

Accessibility

No errors reported by WAVE.

Andrew Burnie

URL: AndrewBurnie.com

The most obvious domain choice. Already high on Google results for ‘Andrew Burnie’ due to the domain’s previous association with the ‘No Shortened Exam Period’ campaign (remnants of which are still visible on the site).

Technical

Slight delay in page load (possibly as the site appears to be hosted with GoDaddy, a US host). Other than this, it’s…well, it’s a default WordPress installation, which is why it looks very like this site does.

Again, the site is laid out as a blog from the homepage – additionally, the navigation contains…no items. That said, all that’s relevant to the campaign on the site is the most recent blog post. Could this not have been replaced almost entirely with a single-page site?

Design

There’s not much to comment on with regard to the design – it’s just the default WordPress theme with the background colour changed and a different photo uploaded in the showcase position (with policy text in the image – a bad idea for accessibility). It’s yellow, which sort-of associates it with the campaign, but it doesn’t contain the actual campaign ‘logo’.

Accessibility

No errors from WAVE (to be expected given it’s the default WP theme).

Innes MacLeod

URL: InnesMacleod.x10.mx

To be fair on MacLeod, the domain ‘InnesForVPAA.co.uk’ was clearly intended to point here, but it redirects your browser to this abomination of a URL. Not only does it use the TLD for Mexico (.mx) but it also gives away the site host – x10hosting, a free web hosting provider.  Not the best choice.

Technical

Aside from the odd URL, the site is organised in a logical manner and the page URLs make sense, although are suffixed with a ‘.htm’ – however, this suffix is less of a problem than Max Crema’s ‘.php’ as these are less likely to change.

Design

As with other former Defend Edinburgh candidates, the site shares some design ideas with the old campaign – here it’s the use of the Coolvetica font used in the (in?)famous black-and-white posters – as well as the black-and-white itself. And let’s be honest – it is actually quite a nice design, although it does appear to have left MacLeod without an actual campaign logo as such.

Accessibility

WAVE reports 3 errors – the Facebook and Twitter links are images missing alt-text, and the image of MacLeod himself at the right-hand-side is also missing alt-text.

–

So there you go. That was my little attempt at nitpicking the web design of all the sabbatical candidates. If you have any comments, do leave them below. And remember to vote – after actually reading the policies – on MyEd betweeen the 27th and 29th of March 2012.

Using possibly the most annoying way to do authentication ever, Keycom makes you enter a username and password by force-redirecting you every time you decide to connect to the wireless network, or indeed the wired network, in the flat you’re paying to live in. This means that, should the web server Keycom are using to serve this page break (and it has), we all lose internet access. Keycom also enforce this by blocking all alternative DNS servers – a query made to Google Public DNS through their network will be responded to by, yes, the Keycom DNS server. All in the name of trying to get you to pay £100 for 1 academic year’s worth of 50Mbps internet (an offer which I lacked the capacity to refuse).

But I digress. As any good programmer will know, a problem like this can be easily fixed. You know exactly when it’s going to happen (every time you connect to the wireless or wired network in your flat) and you know exactly how to resolve it  (enter your username and password).

So we just have to get your Android device to solve the problem using a program, rather than having you open up the browser, get redirected, try to remember your password (did I mention you can’t change the password?) and type it in. And here’s where Tasker (£3.99, Android Market) comes in.

Tasker is a relatively small app which can do a whole lot of things. The premise is simple: set up profiles for when something happens, link the profile to a task, and Tasker will perform the task when the thing happens.

Once you’ve downloaded Tasker, opened it, and got past the introductory screens, you should reach something like this:

To begin, tap the + icon to add a new profile. It will ask you to enter a name – I’m just going to call this one ‘Keycom’.

Select State from the context menu, then Net from the menu that appears. Since we want this action to run after we’ve connected to the network, tap Wifi Connected from this menu.

Since we only want this to run when we connect to the Keycom wireless, we’ll enter its SSID into the top SSID field: ‘KeySurf’. You could alternatively enter the MAC address of the router in your flat if you knew it, but this way it works with any KeySurf wireless (such as if you visited a friend in university accommodation).

You will then be prompted to add a task by Tasker. I’m just going to use the name ‘Keysurf Login‘.

Tap the + button to add an action to the task, and choose Net then HTTP POST from the menu that appears. As the login form you’re redirected to uses HTTP POST to send data to a server, all we’re doing here is emulating its behaviour. We just need to tell it what data to send, and where. This information comes directly from the HTML login form itself – this is how the opening tag looks in the HTML source:

<form action="/goform/HtmlLoginRequest" method="post">

This tells us we need to submit the form data to the URL “/goform/HtmlLoginRequest” (located on the same server as the login form page) using HTTP POST. In addition, the username and password fields are as follows:

<input type="text" name="username" class="shadowbox" />

<input type="password" name="password" maxlength="16" class="shadowbox />

Here, the name option is the important bit. These are the variables to POST to the server. These can be called anything, but – like many websites – Keycom opt for lowercase “username” and “password”.

We can gather from the above, then, that we need the following data:

Server:Port: login.keycom.co.uk:8080 (this is the server where the login form, and therefore the place to POST our data, is located)

Path: goform/HtmlLoginRequest (no trailing slash. The login form POSTs to this URL to log you in, so we will send the same data there)

Data: username=(your username)

password=(your password)

(each variable should be entered on a new line)

Once you have filled in these three fields (you can ignore the rest), confirm the action using the green tick button and then confirm the task you added the action to. Connecting to a wireless network named KeySurf should then trigger the Keycom profile, and sign you in to Keycom automatically.

Unfortunately, this will only work for an Android device. It will not log you in on any other device (even if you’re already logged in on the device) – though I am working on getting a script that does the same thing on Linux.

I have decided that, instead of trying to write posts incredibly formally and with strictly-defined structure, and failing miserably due to the amount of effort it takes for me to do so – I mean, I never actually developed any sort of rules, so I was inventing them on the spot – this blog will contain a series of posts developed using the formula:

If I think about it, I can write a post about it, regardless of how long or short that thought was.

The most important element which has been removed from the formula is the idea of tailoring the posts to an audience. I have tried that, and quickly discovered that my audience is “no-one” – including them in the formula, therefore, results in absolutely no posts whatsoever.

But nevertheless, I hope someone will stumble across a post of mine someday and enjoy it. I wouldn’t write them otherwise.

Here’s to a productive (fingers crossed) 2012!