Design language

Below are my scribbling* from tonight's UXOxford talk. Tom Fletcher from BBC World Service was talking about design, responsive web design and typography.

Share and enjoy.

* scribblings = unedited raw text.

One service, many products, many devices. Each of the products do different things, but they are one service with one look and feel.

Anything you can interact with and share really works for the BBC audience.

Producing graphics for breaking news has to be done in 20 minutes. There is no time to do a bespoke design - it is simply a case of following a normal pattern. The pace of online does not allow custom builds.

Modules, and associated behaviours are vital to enable developers and designer to keep pace.

Designing for the audience

The BBC has a huge audience. The grid needs to be flexible, and that is found in BBC GEL. It is the backbone to all of the BBC online presence. It is always referred back to, but it is always an evolving document, it is not static. It is interpreted into new ways of thinking, rather than being picked up and dumped into a design.

There is no set age or demographic for the entirety of the BBC, almost all demographics are engaging with the BBC.

On the BBC news site there are diggers who trawl through the site and dig deep into the website and skimmers who just want the headlines.

Audio is really interesting based on location. It may appear that only 100 people are downloading a certain broadcast in Chad, however what is happening is one person is downloading, and the whole village is gathering around to listen.

Location also affects the style of writing; Russians want a harder form or news with raw headlines and news, while BBC Brazil want the news in a softer form with a higher concentration of images.

RWD

Currently the BBC are looking after 30 location based sites, and 30 mobile sites. The BBC are pushing RWD out as an effort to reduce this down to one codebase. RWD + native apps.

More and more of the traffic on the BBC is from mobile and desktop. Mobile optimised sites just are not working, because optimising for a width of 230px is no longer the norm.

Pushing towards RWD means one dev team, rather than many.

Agile is the way forward, one big launch will cause complaints. It is iterative and incremental, new features can be launched every two weeks.

What is on the most basic mobile optimised website can be transitioned simple across, building up and up from that. The RWD versions are gradually growing. It is a slow and gradual development meaning that features can be tested in the public eye and feedback can quickly be acted upon.

Testing testing testing. Bizarre devices can and will come up. In the UK smartphones are the norm, on the other side of the world feature phones are the norm and they need to be tested on.

User testing happens on internal teams, in cafes, and also in labs. Test, iterate then test again. Assumptions will be challenged!

6 of the RWD sites are live and the moment. 21 still to go.

Typography

Headlines always balance against another script, so font weights always look the same. Legibility is vital.

GEL isn't just about working well, it is how it feels. The font face for BBC Arabic needs to feel fresh, but when there is only 5 common system fonts that is problem. The BBC started to commission the fonts to get this. BBC Urdu is the only news site that uses HTML to render fonts, all other sites use images.