Tag Archives: bbc

BBC News redesign

Yesterday the BBC launched a new design for their News website. They previewed it a week ago and comments seemed quite positive but on the launch announcement feedback wasn’t quite as positive:

hartpark wrote:
Hate the new look. Will start looking elsewhere for my news content.

Two years ago at the last design refresh Martin Belam analysed feedback and concluded that 60% was negative. I suspect this time it might be even higher.

Personally, I quite like the new design – I certainly don’t hate it – so it surprises me that so many people feel so strongly. Is it just the people who dislike it that feel motivated to comment?

Often where the BBC lead, many others will follow, so if we were to get “inspiration” from some of the things they’ve done, should we expect a similar reaction?

Interested in your comments about the new BBC News website!

Live Blogging the Budget

This week’s budget gave a good opportunity to see how different news organisations handled live reporting on their websites so I did a quick scan through a few TV and newspaper websites and screen grabbed what I could see.

The reason I’m interested is that the 125 anniversary has provided an opportunity for a large number of events on campus for some of these like the Manifesto for Change event to have a remote audience engaging online via streaming video and live chat.

The Virtual Revolution

When the BBC announced Digital Revolution, a new project to create a programme about the rise of the Web, I had high hopes that it would be something genuinely different to the way documentaries about computing are normally made.

The whole production process was put out in the open with a blog, a Twitter account and regular releases of the “rushes” from interviews. Guardian journalist Aleks Krotoski was to present and father of the Web Tim Berners-Lee was on board to drag in the crowds.

I’ve not kept up with the making of the series as closely as I’d have liked – I’ve watched the odd video and heard about some things on Twitter – but last night I saw the first episode in the four part series, now renamed The Virtual Revolution. Part One “The Great Levelling?” (repeated Monday and available on iPlayer now) tried to introduce the series and talked about the early beginnings of the Web – its academic origins, San Fran free living culture and the commercialisation of it.

The list of names they’ve interviewed for the series is impressive: Gates, Fry, Gore, Jobs, The Woz – people so famous they don’t need first names. Connecting them is a narrative attempting to explain what’s gone on for the last 20 years but it’s this that for me doesn’t work. While I get the basic concept – the web is a leveller – it fails to link together the examples in a way that tells the true history. It jumps from a bloke who spends quite a lot of time on Wikipedia to an obscure American bulletin board system pre-dating the web all interspersed with arty shots of Aleks sat using a laptop, stood using her iPhone, walking using an iPhone, sat using a laptop and an iPhone… you get the idea.

While the flow of the programme could be better, many of the interviews are interesting. Most have been distilled down into mere sound-bites, for example Stephen Fry on Wikipedia:

I challenge anybody to find a better, faster source of perfectly acceptable knowledge for almost all purposes you would require as a normal citizen.

Pretty much sums up my own views on the site. These clips are too short though – it may be that the rest of what people said could be plain dull but it will be interesting to see the rest of them, and since the rushes have been made available, it should be possible.

This episode tries goes a limited way to put the web into context. It explains that the web is not the same as the internet and Bill Gates can be relied on to bring it back to Microsoft:

The personal computer was the template on which the web had to be created. You had to have millions of these common machines in order for it to make any sense.

Al Gore managed to resist the temptation to claim he invented the internet 🙂

Other interviewees aren’t so great. For some reason TV programmes keep asking Cult of the Amateur author Andrew Keen on to spout his views (I’ve mentioned him before when he appeared on Newsnight). Andrew Keen is like a Dementor of the internet – he sucks the very soul out of it while offering nothing of value in return.

I think it reflects the fundamental intellectual bankruptcy of the internet that someone like Arianna Huffington [co-founder of the Huffington Post] should have come to symbolise the supposed revolutionary qualities of it. I mean she’s an interesting woman, but she’s about as revolutionary as my dog.

On the internet, nobody knows you’re Andrew Keen’s dog 🙂

The Virtual Revolution is an interesting blend of new and old characters. The old guard, represented by Bill Gates, Steve Jobs, Steve Wozniak and other pioneers of the personal computer have, arguably, a far more interesting story to tell which can be found in another documentary from 1996. Triumph of the Nerds, presented by Robert X. Cringely goes right back to the beginnings of the PC industry and goes into far more detail about how we went from typing pools to the point where everyone has a computer on their desk. It’s worth getting hold of a copy.

Don’t get me wrong, the web has changed the world (and I really shouldn’t bite the hand that feeds me!) but The Virtual Revolution could do a much better job of saying how it came about, what it means to us and promoting the geek origins of the web. I’d be interested to hear what other people think of the programme and I’ll certainly be watching the next three parts and trying to catch up with some of the interview rushes.

Form Follows Function, But How Far Behind?

I go into this blog-post blind, but I am conscious of two things: firstly that I have a question, but no conclusion; secondly, I’m haunted by an image of neatly aligned post-it notes, stuck on a whiteboard.

The Question

Does the designer need to be involved in a development project from conception to sign off, or should they be roped in once all development work is done?

That Image

This picture is taken from the presentation How We Make Websites by Matthew Wood and Michael Smethurst of the BBC, given at the Institutional Web Management Workshop 2009. I remembered the image as a page layout, and I imagined the different coloured notes to be some kind of attention mapping.

OK, I got it wrong as it turns out, the image is from the “Design your URI schema” slide. In my head it is linked with Matthew saying, and this could possibly be a misquotation “We don’t do any mock-ups in Photoshop” which is more likely to have come during the “Apply decor CSS” section.

What am I on about?

The workflow outlined in the presentation is dealing with masses of data, so I can understand why the web designer is being brought in late in the process.

We do however seem to have two concepts of design, and two stages of design: firstly design as a process of organising and structuring information; secondly design as a process of decoration. In essence, one is functional, the other is frivolous.

I agree that form should follow function; the site needs to work, but I think some degree of designed visualisation throughout the process can improve the final outcome.

Grids, Wire-framing, and Attention Mapping

Loads has be written about these so I don’t think I should write an overview, but I think they really help set the agenda for what you want an application to do. I think they can help a designer communicate ideas with a developer, and the developer can feedback whether or not something is workable…

Some Examples

I designed a homepage for E42, Edge Hill’s magazine and mocked it up in HTML and CSS. I figured it was a simple job for the developer, so I gave to him and said “Make it work!”. Presenting the stories in two columns turned out to be a nightmare, something to do with odd and even numbers of stories, and closing div tags. Anyway a bit of communication and a simple wireframe mock-up could have saved an afternoons work.

Conversely our main events page was created by the development team: it functions perfectly, but has no visual punch. If a monotone wireframe had been used, the focus could have been drawn quicker to the latest event; and if some attention mapping was done, you wouldn’t have to scroll down to find the button to the Events Timeline!

One Thing about Wire-framing

Wire-framing is great in certain contexts, getting the balance and composition of a static page right, early in the workflow, increases consideration for the end user throughout the process.

With applications like GO, where the end user can add and remove their own content, they are also creating their own page composition: In this context it is worth concentrating on the individual components.

By using Photoshop layers you can compare how the components sit next to one another, and see if you are achieving harmony or just making noise.

The Accidental

Experience has taught me the importance of planning up front: however nothing is conceived and visible in an instant. Just about every project hits a lull, where things look OK, but there is a lack of balance, or something just isn’t standing out the way it should do.

This is where a happy accident often occurs, usually by hiding layers in Photoshop the right juxtaposition of text, imagery and colour can miraculously happen, and everything falls into place.

This can’t be built in as part of your core plan, but by involving a designer throughout, little twists to the plot can happen, and you could end up with a more effective website.

To Conclude

Well the answer to the original question is no: let’s face it if something works it works; but people are becoming more conscious of the visual appearance of applications and how the intuitiveness of a layout gives them confidence as a user; also there is a psychological element that if something looks good it probably works better too.

Obviously there are other aesthetic questions: why do so many interfaces resemble a Mac operating system, or the dashboard of an Audi; but this is beside the point.

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.

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:

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.

Belated IWMW 2009 wrap up

Once again I’ve broken my golden rule of blogging – “never leave a post in draft for more than 48 hours” – and so I’ve had to prune a few bits that I’d intended to write about. Some of these may – or more likely may not – be covered at a later date.

I’m writing this sat on a plane to Chicago at the start of my holiday – driving across America from San Francisco to New York. But I’m not here to gloat this time! For the last week I’ve been at the University of Essex in Colchester for the Institutional Web Management Workshop – an annual conference for people involved in the web in Higher Education. This was my third IWMW, following on from great events in Aberdeen and York.

This year I’d been asked by the conference chairs – Marieke Guy and Brian Kelly – to be part of the “organising team”. I’m still not entirely sure what this involved but I basically gave my opinions on various aspects of how the workshop runs. I was also asked to chair the Thursday morning session which seemed easy enough!

A few changes were made this year to the structure of the sessions. Following the introduction of “BarCamps” last year, these were expanded to three 30 minute sessions, replacing the discussion group (which never really worked for me). The Wednesday afternoon was split into front- and back-end “tracks”. While one track had a parallel workshop, the other was running a couple of plenary talks. The idea of this structure was to broaden the event to provide more technical and marketing/governance content to those that are interested. Additionally, there was an attempt to “amplify” the event through use of video streaming, a blog and live Twitter updates – I’ll discuss that some more later.

Parallel Session: Mashups Round the Edges – Tony Hirst and Mike Ellis

Mike Ellis from Eduserv and Tony Hirst from the Open University presented an introduction to mashups session. Anyone who follows Tony’s blog, OUseful will know that his work on mashing up various data sources can only be described as prolific. He’s been doing stuff in the HE sector for a while including a page showing how autodiscoverable RSS feeds on HEI websites. Released at last year’s IWMW, the number of sites with at least one feed has now increased to an underwhelming 33%.

Mike’s also been spreading the word recently, promoting linked data. Check out the slides from one of his recent talks to get an idea of some of the things he’s barking on about 😉

Mashups are one of those things that I always intend to do more with especially when Tony Hirst makes it look so easy! I’m not going to write any more now but I’ll try to post some examples of what you can do with the data that we make available.

Making your killer applications… killer! – Paul Boag

A few weeks ago, Paul Boag’s slides for this plenary came up in my Google Reader feed of contacts’ presentations. I had a quick flick through, spotted a screenshot of one of Edge Hill’s course pages, and started to worry! As is the fashion with presentations these days, Paul’s slides contain very little text leaving me to think about all the possible faults he could be picking in our site. Fortunately he was quite positive.

I completely agree with him that the stuff we have in the online prospectus doesn’t go far enough in terms of engagement – there is much more we can do. I hope some of this will happen through the new department and faculty websites. These will provide pages where we can give a richer experience of what it’s like to study a particular subject, leaving course pages to describe the detail.

The main thrust of Paul’s presentation was that online systems – and course finders in particular – should become more like desktop applications. Using techniques such as Hijax (a method where a JavaScript Ajax call intercepts a regular link to remove page refresh while maintaining accessibility), web applications can provide detail without complexity.

Parallel Session: Scrum – Andrew Male

Andy Male from University of Bath Web Services ran a workshop in the back-end track about using Scrum techniques in a development team. I’ve spoken to several people from Bath about scrum before but haven’t had the time to invest in working through how it works. Andy’s session gave a very useful introduction to the terminology used and then went hands-on using an accelerated scrum cycle to build a LEGO house. It took our team a couple of cycles to get good at estimating workloads but after that we were knocking out tractor sheds, flowerbeds and lakes left, right and centre!

Seeing scrum in action has motivated me to try the technique at Edge Hill. With a smaller development team, it may not work for all our projects, but I can see it working really well for certain things.

How the BBC make websites – Michael Smethurst and Matthew Wood

Everybody knows the BBC makes good websites. Some may point to the amount of money Auntie receives through the licence fee to explain this but just throwing money at a problem doesn’t make things perfect. I’m sure that every web developer in the country has at some point cited the BBC as a reason for doing something. The day they introduced their first pages designed for 1024 pixel screens I rejoiced as it meant we could finally start thinking about developing fixed with sites that looked good at higher resolutions.

There’s lots I’d like to know more about at the BBC – the development of iPlayer, how they do mobile websites, their decision to write their own JavaScript library – but one of the best new developments at the BBC for many years is /programmes and Michael and Matthew were at IWMW to talk about exactly that. If you’ve not seen it before, go and have a look around. At first glance it might not look like much – it’s just a schedules website similar to the ones that have been around for years – but closer inspection reveals something much bigger.

In /programmes, the BBC Audio and Music team have created something capable of scaling to record every TV and radio programme ever broadcast by the BBC. The plenary talk was about “designing and building data driven dynamic web applications the one web, domain driven, RESTful, open, linked data way”. Bit of a mouthful! What I took this to mean was a real interest in the data that they wish to publish well before they look at designs. I suspect a few people in the audience were shocked at their opposition to “PhotoShop mockups” but we’ve sometimes had problems with sites when we’ve designed first, coded second resulting in spaghetti PHP.

I blogged about the BBC’s beautiful URLs last year and since then they’ve implemented the functionality promised and much more. Hackable URLs mean websites work for their users, not forcing users to to work to the website.

Probably the thing that stuck out most for me was their approach isn’t to build content management systems, but to create systems to manage data. You’ll hear me talking about this again.

The Mike and Mike Show – Mike Ellis and Mike Nolan

I mentioned earlier that I’d been asked by Brian and Marieke to chair the Thursday pre-coffee session. I perhaps didn’t fully understand that this also involved co-presenting the 45 minute session following the chaps from the Beeb. The schedule had “Developers Lounge Show and Tell” pencilled in for the slot but the outputs from the developers lounge were – how can I put it – limited! A quick chat with Mike Ellis over a beer at the drinks reception led to a rough plan – we’d talk about some stuff and it’d all be fine.

Mike went for the Just In Time approach to preparing slides and delivered a great talk about becoming more than a day coder. I wholeheartedly agree with this – in the IT industry, and for web professionals in particular, it’s vital to stay current and engaging with the geek community or attending BarCamps or hacking on your own projects in the evening is a great way to do that. I approached my 10-ish minutes like a teacher at the end of term and played a couple of videos. We finished up with debate answering important questions such as “are design agencies a waste of money?” (Paul Boag seemed to think so!) and “is Web 2.0 ‘where it’s at’?”

I’ll let others be the judge of how the session went, but I was glad when it was over!

Conclusions

During his wrap-up session, Brian Kelly mooted the idea of an Institutional Web Management Community – a way for Higher Education web people to continue the conversations that go on at IWMW. Like the JISCmail lists, but better.

After last year’s IWMW I asked why so few web teams have a blog. Twelve months on and what’s the situation now? It appears a couple more have popped up; I’ve heard there are others but limited to internal viewers but should we do more? Brian suggested an aggregator similar to the predominantly US-based BlogHighEd.org and while this may provide some focus it’s not the whole answer. Clearly the US has many more colleges so we’ll never match them in number of active blogs but it could form part of the IWMC. What needs to be done for this to happen? Maybe in the spirit of mashups, all we need is a Google Spreadsheet and a bit of Yahoo! Pipes magic?

I saw one comment on the Twitter stream along the lines of “this year seemed very developer-focused – where was all the discussion about governance?” I was following the backend track so it was likely to be more technical than previous years, but is this a bad thing? If we get too bogged down in policies and strategies then we run the real risk of failing to innovate.

CASE Europe Annual Conference: Day 1

A leisurely walk from University of Brighton Pheonix Halls kicked off the first day of CEAC 2008. Check-in was painless and lunch was great before descending on the main hall for the opening plenary. Conference Chair Trisha King (Birkbeck College, University of London) welcomed before handing over to Juliette Pochin and James Morgan for a bit of a sing song.

The four tracks – fundraising, alumni, marketing and communications – then split with me following communications for the track plenary and the first session of the day. Tara Brabazon, Professor of Media Studies at the University of Brighton spoke about why universities need to engage with the media. She’s a bit of a character, and the fact she presented using an OHP and a large ring-bound stack of cue cards was a sign of what was to come. Tara’s ten tips for academics engaging with the media was useful:

Be clear about why you’re talking to the media
Select media platform
Write down sound bites
DO a background check on journalists
Use emal to answer questions wherever possible
Listen to producers before going on air
Don’t allow yourself to be ghosted… ever
Be conscious of how the web works – local is not local
Focus on building strong and reliable relations with great journalists
Never speak out of your brief

All this was, of course, backed up by amusing anecdotes from her time spent in higher education in the UK and Australia.

Continuing in the communication track, I went to “Where’s our news going? Media is transforming and so are its audiences – the vision for the future of news” by Fran Unsworth, Head of Newsgathering at the BBC.

I’m a big fan of a lot of what the beeb does and it was very interesting to get an inside view of some of the challenges that face them. Fran’s talk was jam-packed with statistics like the fact that ITV’s News at Ten has dropped from 10 million to 2.7 million viewers in the last 20 years. Their own services have been affected too – the 6 O’Clock news has dropped from 8 million to 4.3 million viewers since 1990. Online sources have grown though with the web being the second most popular source after TV for the under 30s.

Engagement with the wider community was particularly interesting with questions being raised about political bloggers tendancy to mix fact with opinion (I think we’re looking at Guido Fawkes here). On the other hand the BBC are more willing than ever to feature “citizen journalist’s” photographs, video and commentary. I do wonder though, whether in the rush to be first with the pictures on screen, there is sufficient scrutiny of the reliability of these sources.

Finally for this session there was an interesting comment about the increasing willingness to put BBC content out through alternative sources such as Google, iTunes and YouTube. This is something which comes up time and again inside HE teams, but if Auntie is doing it, then there must be some merit to it!

The evening reception at an art gallery was brought alive by beach balls being thrown from the balcony onto the crowds below… followed shortly by the sound of glasses smashing to the crowd. I felt sorry for the staff chasing dashing around trying to sweep up the mess. Evil stare of the night was when I (only half jokingly) asked someone “so, what exactly is the point of fundraising?” We web folk are somewhat outnumbered so maybe that wasn’t the best idea!

Ian Forrester on Backstage

Last night I went down to my second GeekUp meet at 3345 Parr Street in Liverpool. If you don’t know what GeekUp is, here’s a quote from the website:

GeekUp is a community of web designers, web developers, and other tech-minded folk from the North West. Our socials take place once a month in Leeds, Liverpool, Manchester, Preston and Sheffield they are always a lively place to share ideas and spread a little knowledge.

There’s usually a couple of talks before moving to the bar for chat and beer and this month’s talk was by Ian Forrester, the man behind backstage.bbc.co.uk.

Backstage is a community built around data made available by the BBC. It encourages the public to make use of the data for cool stuff and highlights what the Beeb is offering. I’m not going to go into all the prototypes which have come out of backstage or list the feeds and APIs they advertise – you can find that out from the website – but there’s other interesting things going on as well!

Since backstage started, it’s focus has been on feeds and APIs but that seems to be changing now. They’ll soon be starting a fortnightly online show featuring interviews with the tech community, introducing the work people are doing and explaining the web in a bit more detail than BBC Webwise. This will be done on a shoestring, but with help from other areas of the BBC (such as Click) they hope to maintain high production standards.

At a slightly larger scale, backstage are joining up with IT Conversations to record speakers at UK based conferences. Traditionally there’s been a notable US-bias towards this kind of material so it will be great to see a bit more variety to the speakers.

The final thing (that I’ll talk about) is the support backstage and Ian himself are giving for tech events. While living in London, Ian organised BarCamps, GeekDinners and supported dozens of events. With his move to Manchester, he’ll be shifting some of his attention to what the North can offer. There was discussion of starting GeekDinners in Manchester (not as a direct competitor to GeekUp, it should be noted) and other web/tech events in the North are getting backstage support and sponsorship.

So a very interesting and informative GeekUp Liverpool this month, and very different to the last one I attended. There’s a great community of web developers and designers in and around Liverpool and GeekUp can play an important part in bringing people together so I’d encourage anyone with an interest in the web professionally (or even just a strong interest in technology) to pop along to see what it’s all about.

Choice Part 5: Pushing the boundaries?

Edge Hill weren’t the only people to launch a website redesign in the last week. On Monday, the BBC News website had it’s biggest redesign in years. Personally, I quite like the new design but they’ve come under a lot of flak for certain decisions.

Martin Belham blogged 60% of commenters hate the new BBC News design. I’ve read a number of the comments and it’s no exaggeration to say that some people are very unhappy!

There are certain similarities between our new design and BBC News so why did we make the decisions we did?

First up is the move to designing for larger screens. Our old homepage design was fixed width to fit on screens 800 pixels wide. Our new design fills the screen at 1024 pixels wide. Why the change? Over the last few years there has been a massive growth in adoption of LCD screens – these almost all have a native resolution of 1024 or above. Less than 4% of visitors have a screen resolution of 800×600 and that’s going down all the time. On the other hand, over half our users have resolutions above 1024 pixels wide leading to an inefficient use of space.

So we decided that our design should be aimed at 1024, and after some vigorous internal debate, that we should use some JavaScript magic to create a version for 800×600 as well. So if you’re one of the 3.72% of users with a low resolution, you’ll find that the homepage design is slightly different to normal.

The wider design allows us to add more to the page, but why not design for fluid widths? Fluid layouts are where the web page expands to fill the size of your browser window. We’ve used this technique on content pages and you can still see it on, for example, Faculty pages which aren’t yet in the new template. The theory behind fluid layouts is sound – the user controls how the page looks – but in practice it’s difficult for developers and designers, especially where pages are dynamically generated.

Choosing which browsers to support was also a difficult decision for us. There is a careful balance between providing the best user experience for the majority of people or catering for the long tail. The majority of visitors use Microsoft’s Internet Explorer. Over two thirds of IE users are now using version 7 and usage of IE 6 is dropping every month.

So quite late on in the development process we decided to downgrade support for IE 6 to make browsing the site more reliable. The entire site is still accessible but some visual effects are missing. We may be able to reintroduce some of these in the coming weeks, but I would urge anyone still running IE6 to upgrade either to version 7, or another browser such as Firefox, Opera or Safari.

Speaking of Safari, the site also works best with version 3 which despite Apple’s slightly questionable deployment techniques is actually a very good web browser.

I’ll leave it there for now. If you have any comments on the new design, leave a comment, even if you think we’re “turning the Web into a Fisher-Price wonderland for simpletons” 🙂

10 PRINT “Hello World”; 20 GOTO 10

The BBC Technology blog dot.life has a post about the BBC Micro in reference to the Science Museum reuniting some of the people involved in the project over 25 years ago.

Reading it brought back quite a few memories – a BBC Model B was the computer I first learnt to program on – and I’m glad that people still think of it so fondly.

Anyway, enough reminiscing – we’ve got websites to finish!

(Feel free to post a comment about your first experiences with computers – Mister Roy had an unfortunate encounter with AMS early on!)