stef's posterous

I see that UCE have a new website

So, the eagerly awaited redesign of the UCE Birmingham website has arrived - I know that a lot of people have been waiting for this for some time, and I was surprised to see it suddenly appear today while I was checking out a link to BIAD (Birmingham Institute of Art and Design). The old UCE site was way out of date and had become something of a design by committee group nightmare, with inconsistent navigation, radically differing department websites, animated gifs, random artifacts, link-rot and other assorted problems of having a website that has grown organically over a long period of time. So I heard that there had been a decision to produce an all-encompassing UCE website to bring the site up to modern web standards, and I think that following a review of the university's departments' sites, the decision was made to take all of the web production in-house, which is a smart move in some ways because it saves costs, centralises design, technology, data and design decisions, but in my experience can limit the individuality of the separate bodies contained within the the group - in this case the faculties/departments/schools. I've been working with UCE on a number of projects for some time now - the School of Acting, the Business School, with Integra at the Conservatoire, on New Generation Arts, and on various creative industries projects that are supported by the university including Plus and Digital Central. So I guess you could say I know a little about the university and what it's about. Seeing the site today and knowing all of the good work that it's involved in, I have to say that I'm disappointed. I was hoping for a whole lot more. So, I thought I'd do a short (and entirely unofficial and personal) critique of the new site for the record, so here we go (this really is off the top of my head): First impressions I think my first reaction was pretty much "Yikes!" Information overload, with little structure to tell me what to look at first. For a site that has just launched it looks horribly like a design-by-committee portal page with everything on the page demanding attention and competing with the other elements around. Like a band where everyone's a prima donna - you get drum solos, guitar solos and vocal wailing simultaneously. There's no room for the content to breathe, the images vary between large campaign based images and poor quality square crops of people. The text looks badly placed (don't they have a typography degree at UCE?) and it's messily sized. Why are there two main navigation strips? The top strip looks like a navigation, but the left hand menu also seems to list site-wide content. Everything looks like a Google ad, so bizarrely my eye (being used to ignoring Google ads) completely avoids the right hand column, expecting it to be "Buy University Degrees", etc. Brand building seems to be the order of the day. I'm counting four instances of the logo on the home page. Building a brand isn't about getting a logo in every available space on your home page. One is perfectly acceptable. And when you go to the internal pages... hm, it just looks a little, well, boring. Where's the story? The vibrancy? So first impressions - amateur, boring, busy, cluttered, messy, confusing. What's the code like? Ahem. Guys? Since 2000 (that's over seven years ago now) the W3C (the guys who tell us what we should or shouldn't do when building websites) have said: "Do not use tables for layout unless the table makes sense when linearized." What this means is that at no point in any modern website should the following appear at any point when you're browsing a website and you go to your View menu and choose "View Source".

<table width="760" border="0" 
cellspacing="0" cellpadding="0" 
summary="table used for layout">

I am not joking. Whoever built this site knew full well that they were using web techniques which became obsolete in 2000. The entire site is built on tables, but I guess unless you are a geek you won't understand what a travesty of poor coding that is. Suffice to say that whoever has paid for this should be asking a few questions. How about "inline styles" - another technique that went out of the window in 2000 (in fact item number 1 in the W3C guidelines)? I guess we shouldn't be seeing things like

style="border-bottom:1px solid #8e8e8e; border-right:1px solid #8e8e8e;"

appearing around the place...? What do I think of the design? Subjectively speaking, and this is my own personal view, it looks like the stylesheet hasn't quite loaded. The layout of the pages is, erm, a little on the dull side to say the least. I mean, UCE has competition here... The site uses standard web-browser-blue for its links, the layout seems clunky and poorly spaced, it looks generally messy and untidy, maybe it's because I'm on a Mac, so who knows? Particularly, these parts of the site irritate my design sensibilities: Centred text in the footer (making it harder to scan for the phone number). How about left aligning this and starting the line with Main switchboard: etc.? Logos being scaled disproportionately. I'm sure that's against corporate guidelines. Badly compressed images. I've screen-grabbed this example from the home page (there are a fair few more), but on the site, this is a PNG. Which for the uninitiated is an image format that means you don't have to suffer jagged edges and nasty blurry glitches in your images on websites. These gradient things are all very cool and everything when used in a "web too oh" way, but not here. and not with that bit depth. Lack of gutters. Text and images need room to breathe. A solid grid-based layout with plenty of 'gutter' (white space) between each column allows the eye to flow easily from section to section of a page, scanning for relevant content. A poor layout, with over-reliance of separating lines and narrow gutters will distract the eye, put barriers in the way, and slow you down. I call this linkortitleitis. In the above images what are the links and what are the titles? Would you click on About Birmingham, would you click on "Getting to and around Birmingham". The question in this case isn't either-or. Nothing here looks like a link, yet the About Birmingham is the main title for the page, and "Getting around" is a link to a sub-page. Let's hope there aren't any expensive Google Ad campaigns with conversion tracking running on any of these pages... There are some really dull pages, and it looks like some of the standard HTML formatting just hasn't been designed. Here's a page listing all of the University's faculties. It's the single page on the site describing the structure of the university, and has the potential to sell the offerings of all of these separate institutions with emotive photography, exciting content, etc. Instead we have an un-styled list with no additional line-spacing between each item. Slice and dice? Surely not! This is a technique, again that disappeared around 2000. You're trying to do a fancy layout with some 'cool' looking curves and vectors (again - subjective opinion but didn't silly swooshy lines go out with Oakley and Nike ads in 1999?), but you've got to put some stuff that actually works over it (d'oh!). So you use 'slice and dice' a technique that's often taught to people who think that using Dreamweaver to make websites is a good commercial decision. If you increase your font size in your browser you can see it in action... Basically this is not needed and related to the 'don't use tables for layout' issue. Generally a bad idea. Oh and notice how the menu items pop out of their tabs - that's not so great either. Does the navigation work? Clicking on item 3, "Current Students", in the main menu, takes you nowhere. Try typing the word "Birmingham" into the box on this page. Cool - no results! Imagining I am a prospective student, would I come here? Obviously the in-site ads take a note out of MySpace's capitalisation guidelines. Taking BIAD as an example, who up until recently had a very passable website which looked unique, well-designed, attractive and young. If I now take a look at the main page of the faculty on the new site and think to myself "do I want to go and do that masters I always thought about?" the answer is plainly "no". Compare the new site with the old BIAD site and see what I mean. <edit - I've just found a few more things so I'm including them here> Favourite icon This is the neat little icon that you see on most sites that appears next to the web address and/or in the tab if you're using a modern browser. A big blue square? Popup windows Using popup windows is sloppy. It basically says to your user 'oh we _forgot_ about that... where shall we put it?' Plus, if you're using a modern browser, the chances are that you have a "Popup blocker" turned on to get rid of adverts that some sites throw at you while you are browsing them. Windows-only video To make matters worse, the popup for the Clearing Video on the home page (which is randomly smaller if you are not using Internet Explorer for some reason) contains a video in WMV format. If you're not on Windows you don't see anything at all. In the modern world, where YouTube, Vimeo and other video sharing sites use Flash video (cross-platform, easy to use, lightweight, wide user base) shouldn't a university be following suit? Instead we have a video stream that cuts out at proportion of your site visitors - Mac users mainly, and don't most academic networks ban this kind of stream? So as well as disabled and partially sighted users not being catered for, we can add Mac users to the list. Stock images of Americans This is the usual trick. In the meeting: "We need to show that we are culturally diverse. I need an image of a black man, a white woman, an asian man, a black woman" "How about someone who is vertically challenged?" "Err... I don't think 'vertically challenged' is the right word - isn't the term a dwarf?" "Either way - find me that image". Fire up Getty images or Corbis and hey presto - some Americans appear. Randomised header images You'll have to randomly click the menu tabs to see this image appear. For some reason all of the main header images are on a time-based rotation so that you get confused between which page you're on and which one you were on last. Sometimes it even looks like the page hasn't loaded and you find yourself sitting there waiting for it to load. </edit> What to do? UCE have been consistently positioning themselves as the best learning environment for potential creative industries professionals in Birmingham and the West Midlands. In my opinion this new site is a step backwards because it removes the personality and individuality of the constituting departments and faculties, resulting in a dull, un-targeted, uninteresting site that does nothing to attract potential students in a highly competitive marketplace. It's badly put together, doesn't meet W3C guidelines on the most basic levels, makes a nod towards accessibility standards in places, ignores the UK guidelines for university websites and does nothing to further the image of a university at the centre of the push for making Birmingham an established player in UK creative industries. I'm writing this purely because I want to see Birmingham's reputation improve and for more and more people interested in the creative industries to locate and study here. My advice - whoever is in charge of the budget for this project should be asking some serious questions of their developer. Why are they using out-dated web development techniques? Why has the site gone out without being rigorously tested on users and staff? What price design and individuality of the various departments? What message is being sent out with such a poor visual layout? If you accept this level of design now, how long will you have to wait for the _next_ redesign? How out of date will the site look _then_? What do BIAD think of the site? Surely they've got a few talented people who know what they're doing with a website hanging around? Ask them to lend a hand? Or is this a student project? Speak to HR? Hire a good designer to work on the site? Hang on - student project.... good designer.... alumni.... shame I went to Birmingham University, but I'm sure there are other people in the city who'd leap at the chance to spruce up this site! Who knows, maybe this constructive criticism might be heard by those who make the decisions about the UCE web strategy and we might see the site improve over time. Let's hope so, or companies like mine will begin to suffer the effects of not just 'graduate drift' but 'undergraduate city avoidance'.