The Personal Disquiet of

Mark Boulton

Net Awards 2014 Nominations

January 28th, 2014

It’s that time of year again. The 2014 .net award long list is published and I’m rather chuffed that Mark Boulton Design is nominated across community, technology and design categories.

It’s also really nice to see CERN nominated for the Line Mode Browser hack days we helped organise last September.

Being nominated in these awards is like a nice pat on the back for all the hard work my team do. From trying to help communicate one of human-kinds most important discoveries, to building a tool to help us make websites a little bit easier, to making books for our community. It makes the nomination for Agency of the year, for the second time, that little bit more special.

If you feel that inclined, a vote would be nice!

Filed under Awards, Community.

Al Jazeera & Content shelf-life

January 28th, 2014

From speaking at the phenomenal MK Geek Night All Dayer, to launching a project three years in the making for Al Jazeera, the releasing a new design language for one of the oldest university in London, to Mark Boulton Design being nominated in four categories in the Net Awards. It’s been a busy couple of weeks.

Last week, I was up in London visiting a client when I heard that another project of ours was to be launched shortly. It was part of a project we’ve been working on for just over three years: the global design language for Al Jazeera Network digital, with the first two products being launched in Turkey and a beta of the Arabic news channel.

There is so much to talk about on a project of this scale. Here are just a few highlights:

  • Spending time with journalists and the newsroom to understand how news is reported.
  • Working with Al Jazeera during the Arab Spring; from the uprising in Egypt to Libya.
  • Course-correcting throughout the project. Responsive Design wasn’t really a thing three years ago.
  • Designing in four languages – Arabic, English, Turkish and Slavic – when the MBD team primarily speaks one.
  • Adopting an Object Oriented approach from content through to code. Modular, transferrable and scalable. It required a level of detailed thought right down to how content types were defined in the CMS.
  • Working with three development partners across three independent content management systems.

I could go on and on. And I probably will at some point. Needless to say, none of the above could achieved without a patient, smart and agile client-side team. Good job the Al Jazeera team are just that.

There are many buzz words you could label this project with: content-first, responsive, atomic, OOCSS. Again, I could go on. But the one thing that was first, central and always through prototyping and early strategy was good research. It was a research-first project. That probably won’t come as a surprise to some of you given we have our own in-house researcher, Emma. What may come as a surprise, however, is the degree in which that early research led approach laid the foundation for a fundamental shift in how Al Jazeera thought about their content.

Content shelf-life.

Many news journalists think of their content as a few distinct types:

  • Rolling news: Typically taken straight from the wire and edited over time to fit the growing needs of the story.
  • Editorial: Longer form piece. Still highly topical and timely.
  • Op-ed: Opinion piece from a named author.
  • Feature: A story. With a beginning, a middle and an end. Long-form content, and not necessarily timely.

These can all be mapped to timeliness; both in terms of how long they take to create and their editorial time-life. The more timely a piece, the shorter it takes to create and the shorter the shelf-life.

  • Rolling news: timely, short shelf-life.
  • Editorial: timely, long-form, short to mid shelf-life.
  • Op-ed: Long-form, mid shelf-life.
  • feature: Long-form, long shelf-life.

Publication schedules are often focussed around this creation with journalists having several pieces of the different types in various degrees of completion to various deadlines focussed on different stories. This is a comfortable mental model, one that newspapers have been arranged around for decades. But it isn’t necessarily how users of websites look for content. Users will not typically look for a type of content, but will look for a context of a story first: the topic.

The new information architecture of the Al Jazeera platform has been built around a topic-first approach. But also, the modular content and design allows for the rapid changing of display of the news as a topic or news story moves through the various content types. It’s a design system, connected to a CMS that accommodates what news naturally does. It changes.

The Design System

The whole platform is built on top of Gridset using modular design principles. The content is modular and multifaceted, designed for re-use, as is the design. For years now at Mark Boulton Design, we’ve not designed websites, but an underpinning design system with naming conventions, rules, patterns. This is particularly useful when many CMS software thinks of content objects in this way. Our systematic thinking can applied all the way through CMS integration. Software engineers love designers giving them rules.

It’s funny, we seem to have just discovered this in web design, but many other design disciplines have been approaching their work in this way for decades. Some for centuries. Take typography, for example. The design process of creating a typographic design is systematic thinking at its purest. Designing heading hierarchies and the constituent parts of written language can be approached in an abstracted way. This is exactly the right approach when designing for other languages.

Arabic has obvious challenges for an English-speaker. Not only is it written right to left, but the glyphs are non-roman. To approach this as a English-speaker, we needed to create tools and process to help. Words no longer look like words, but shapes of words. Page designs no longer look like familiar blocks of text, type hierarchy and colour. We saw form more than we saw function.

Just the start

Three years is a long time to work on a project. I’m so delighted to finally see the design system in the wild. For such a long time, we only saw it in prototype form, but you can only take prototypes so far. We needed to pressure-test content types, see where it breaks, adjust a hundred and one small details to make it work. All of this just underpins the fact that now the system is being rolled out, there needs to be changes made every day to evolve the system. This is the web after-all. It’s a feature, not a bug.

Filed under Design, Projects, Al jazeera.

The story is the link

January 6th, 2014

2013 brought with it more work in and amongst editorial processes for Mark Boulton Design. And with it, some challenges designing systems that can react to the speed of the story.

News happens quickly and therefore needs to be captured quickly. This is why news organisations have latched onto the immediacy of publishing platforms like Twitter, blogs, Instagram and the like. The flow from story to pixel is dramatically reduced compared to incombant editorial processes. Sure, journalists will cry of the death of proper journalism; story-telling will suffer at the hands of snippets of information drip-fed to hungry millenials. We’ve all heard the horror stories. The truth is that these services allow for a story to happen in near real-time, and as such, the emphasis on an editor’s work is no longer writing, but on guiding, the story. Creating connections between content to build a bigger picture in the reader’s mind, but, certainly, in a near-live environment, many news organisations are not authoring this content; it’s being created elsewhere by other people.

I’ve had a long-standing professional interest in content management systems. I’ve designed a few along the way, and almost without exception, the project has started as a software design project, and ended up a process design problem. The problems lie with people, not with user interfaces or technology.

In his recent post How to design a CMS for a modern newsroom, Lee Simpson from the Guardian eloquently describes the situation:

So much has changed in the ‘electronic publishing’ landscape in the last year. For every month of 2013 there was a hot new writing application, hip new publishing platform or collaboration silver bullet for writers, newsrooms and media organisation to run through the mill. Tools and applications for content publishing had matured in such a short period of time, individually they lacked the cross workflow power to be of complete use to a newsroom like The Guardian’s, but collectively it was starting to look a lot more interesting.

He goes on to say:

The software requirements for a modern, paper producing newsroom, are vast. The needs of the newsroom are increasingly difficult to define due to the nuances in production processes across desks, publications and offices, a moving target that is getting faster by the day.

In my experience, the faster and more important a story was, the less likely it was to follow established processes – especially where convoluted and difficulty to use software was concerned. It quickly devolved into Post-it Notes, hushed whispers and hurried editing. News journalists are human, and sometimes the speed of the story is just too fast for software. It gets in the way.

Given the change in how this type of content is created, curated, edited, processed and published, more and more organisations are finding they need new tools. New content management systems to help solve their publishing problems. My fear is, they’re looking in the wrong place.


Last year, I spoke at Handheld conference about how content is created over time. How a story moves from being a snowflake to a snowball; gathering pace, other content, debris. Before an editor knows it, the story is no longer a page, but a bunch of different things: links, images, words, video, other articles, tweets, blog posts. The list goes on. But they all share two things in common: the topic of the story, and the link between them. This is where I feel we need to focus our attention.

The hyperlink is at the very core of what the web is: an interconnected hyperlinked bunch of resources. The hyperlink is everything to the web, yet it is the thing we take the least care of. URLs die. Links rot. This isn’t a post about digital preservation, or a rant about how we should be taking care of these links for future generations, but that we should be taking care of them now!. As I hope I’ve demonstrated, the link between content is going to become increasingly important as we create more fragmented and modular content for display in multiple contexts. If we don’t look after these links, the story will be lost. Because the story isn’t a page anymore. The story is the link.


Modern content management systems should be focussed on exposing links between content. Making it easy for editors and journalists to make connections between things and not just when a story is created; stories live over many days, weeks, months or years. Modern content management systems should allow for constant editorial iteration and creation by showing the links between things.

It’s interesting to me to see this happen in a parallel industry. Just as designers and developers are struggling to adapt to the increasingly rapid changing web, writers and journalists are, too. Creating news content for the web is no longer about writing a page and hitting publish. It requires a fastidious approach to content curation over a longer period of time. It means being where your readers are; Twitter, Facebook, the TV. It requires pulling together all the various fragments of a story into a cohesive narrative. Now, does that sound like your CMS is designed to help? No. I thought not.

Filed under Content management systems, Responsive design.

Some social good

January 1st, 2014

I was going to do a usual year-end wrap up for this blog post as I have done in previous years. But, as it’s the start of the new year already, I thought set my stall out for the coming year. What do I want to do, rather than what have a just done.

A couple of days ago, I was reminded of a video I watched a while ago about Free Enterprise via my friend Andy Rutledge.

“Don’t Eat Your Dog: The Surprising Moral Case for Free Enterprise. Based on his best-selling book “The Road to Freedom,” AEI President Arthur C. Brooks explains how we can win the fight for free enterprise by articulating what’s written on our hearts.”

I’m always interested in how other country’s politics, viewpoints and economics work, and this was no exception. Rather than to bat down things like capitalism, I’m making a concerted effort to understand the nuance in such things.

As someone who runs a design studio, a publishing company and a web-based design tool, you could count me in the group of people who work hard for what I get. And I’m rewarded for that. I don’t expect a free ride. I don’t expect anything beyond the realms of what is offered in the country I live in (such as state health care and education etc. In fact, I pay for that through my taxes – the NHS is not free). But before I disappear into a politics hole, I want to bring this back to design.

Running a design company, we charge clients for the work we do and for the customers who use our products and buy our books. In doing so, we create jobs, and more tax revenue for the government. But one thing I don’t agree with from the video above is that what i’m doing is a purely selfish exercise. I’m not just doing business to pay the bills, design great products for clients, and give people work to do. To me, there is more to making things than just making things.

I believe my job is not only about doing work for clients but that I have a social responsibility to make the world a better place through the work I do. Design is a powerful tool to affect social change. However small.

Let me give you an example.

You’re out for a walk at lunchtime. You come at a road crossing and there is a family by your side waiting to cross the road. The crossing indicator is counting down the seconds, but you spot a small gap in the traffic for you to cross. You just skip across the road, running in between cars and carry on. The family is left waiting for a safe gap in the traffic.

Do you:

  1. Think that what you did was fine? It was safe for you to cross. No problem.

or

  1. Do you think that you should’ve waited next to the family to build upon the good example the parents were trying to show to their small children that they should wait for a safe gap in the traffic to cross?

It’s a small but important thing. And this is social responsibility. A responsibility to help the community around you, and not through just helping yourself. Next time you take on a design project, just stop for a second and think:

“beyond getting paid for this, and making my client’s business better, what is the benefit in doing this work? What is the social good?”

In addition to the work itself, ask them if you could blog about the process, or speak about the work at a conference. If it’s something you really believe in, could you offer do it pro-bono, or heavily discounted? Could you open source the code produced? How about aspects of the design – such as icons? Could you have one of their team members sit with your team for the whole project to soak up your skills? How could you benefit the web design and development community and still get paid well?

We’re in an incredibly fortunate position as designers to create change in the world. Many people can’t. Or simply won’t. Through our products, our work, and how we talk about it, we can have a much greater benefit to society that just lining our pockets.

This is exactly what I plan on doing in 2014. Happy New Year!

Filed under Me, 2014.

Running ragged

December 24th, 2013

In my fourth article for 24ways over the years, I wrote about typesetting the right rag.

One of the first little typesetting trips I was taught – in my internship at an advertising agency – all those years ago, was how to make text fit within a given space, but still read well. This involved a dance of hyphenation, letter-spacing, leading and type-size. But a crucial ingredient of this recipe was the soft-return.

Scanning a piece of text I was looking for certain criteria – or violations – that needed a soft-return (or, in Quark XPress, shift-return). Using those violations, I would typeset the right-rag of the piece of text, and then use hyphenation, and what-not, to tease the rag into as smooth a line as possible. All whilst ensuring the content was pleasurable to read. In a perverse kind of way, I always enjoyed this part of the typesetting process.

My article on 24ways is about how we can apply this thinking to the web, where the inherent lack of control on the medium means we have to apply things in a slightly different (read: clumsy) way.

Emma read the article this morning and pretty much summed up the way I feel when I read text sometimes.

“Another article by @markboulton which gives me a glimpse into how broken the world looks through his eyes” – Emma Boulton

Just like a musician listens to music, I view text in a different way to most people. I just forget that I do it most of the time.

I can hardly believe that 24ways has been running since 2005. In the web years, that’s like 72 years ago. It’s a credit to Drew, Brian, Anna, and Owen. It’s not easy running this year in, year out, on a daily publishing schedule for a month. Hours and hours of work go into this, and we should all be thankful for their time and effort. Oh, and let’s not forget Paul, who has given 24ways a lovely redesign this year (you can read more about that on his blog)

Filed under Typography, 24ways, Design.

My Do Lecture

December 22nd, 2013

In April 2013, I spoke at the Do Lectures in West Wales.

The video of my talk, about embracing change, is now available to watch.

I’ve written about being at the Do Lectures before; it’s a special place, an intimidatingly smart audience, and generally freezing. This video doesn’t do justice to how cold I was there up on the stage. Should’ve worn my coat.

If you fancy attending – some would say – a life-changing little conference, Do are running an event in Australia in April. Do yourself a favour and grab a ticket.

Filed under Speaking, Dolectures, Process.

The Undemocracy of Vale of Glamorgan Planning

December 15th, 2013

The democracy of the Vale of Glamorgan planning process is absent and favours wealthy developers over citizens.

My house is situated between a narrow country road leading into an old village and farmer’s fields. In April this year, we were sent a letter by the Vale of Glamorgan planning department that a housing development of 115 houses was planned and we have just a few weeks to register our objections.

Now, it’s understandable we’d object; we live next to the proposed site. But, there are some issues that have some serious cause for concern:

  1. A public right of way crosses the site and over an unmanned railway crossing of a line soon to be electrified.

  2. A pond is proposed to capture the water from the often-waterlogged field. The town has a history of flooding and this field acts like a large sponge safeguarding this part of the town.

  3. The roads leading to and from the development are designed for sheep and horse carts. Fifty percent of them are unpaved, single-carriage and pose a risk to pedestrians.

You can read more about this application, if you like, on our website and the planning department website. But, this journal post is not just about documenting the history and problems of the site (that could last a while). This is a journal post about the sickeningly undemocratic process that the Vale of Glamorgan council has undertaken, and I’m sure, it is somewhat similar throughout the country.

  • As a citizen of the England and Wales (Scotland and Northern Ireland have different planning laws) I am not entitled to appeal against a planning application directly. However, a developer can appeal.

  • The Vale of Glamorgan undertook no independent review of reports commissioned and presented, with questionable findings, might I add, by the developer.

  • The Vale of Glamorgan are recommending the development despite Network Rail objecting on the grounds of safety with the un-manned right of way over the railway line.

  • The vale of Glamorgan undertook no independent risk assessment of either the open pond or unguarded railway crossing. Both of which are a grave concern for me having two small children.

  • The Vale of Glamorgan undertook no independent review of the flood risk assessments despite the developer’s reports showing multiple failed percolation tests.

I could go on about the deviations from what I’d view as an independent and democratic process. There have been many, but these pose the greatest dangers in my view.

As a father of two small children, I worry about them. My children are beautifully curious. Wonderfully full of energy. But, despite my best efforts, woefully oblivious to the danger they put themselves in. Just like every other child out there. The Vale of Glamorgan planners, and planning committee – who we elect into those positions, let’s not forget that – has a social responsibility for the well-being of the citizens of this country. Instead, throughout this process, I saw the opposite.

  • I saw an over-worked, under-resourced council making bad decisions.

  • I saw an undemocratic process that favoured negotiation with the developers over hearing the concerns of local residents.

  • I saw a council under pressure to meet housing quoters by paving over the green fields rather than the more difficult option of brown field sites.

And I’ve had enough of it.

Many people locally have been saying that the building of this development will result in more flooding in the village. It will result in more congestion on roads designed for horse carts and sheep. With the dangers of the railway line and open pond, it may result in the injury or death of one of the new residents. Is that when the planners would sit up and listen? Maybe verify the developers reports with independent review?

The cynic in me says ‘probably not’. The apathetic in me says ‘who cares? We all know politics is corrupt’. But, this is the second time in a year that I’ve voiced my concerns about the local government’s ability to make good decisions.

I know we need more, and affordable, houses in this country. But new developments need proper, independent scrutiny from experts. And this proposal has not had that.

The proposed development goes before the planning committee on Thursday 19th December. It is being recommended by the overworked planning officer – despite the points above. A copy of this journal post is being forwarded to the local councillors; the members of the Vale of Glamorgan planning committee; the Vale of Glamorgan planning department; my local Welsh Assembly Member and Member of Parliament, in addition to the BBC and local newspapers.

Just as local government has a duty to behave in a democratic way, I have a duty to act as a citizen of the UK and to stand up and say when something is not right.

Filed under Local, Wales, Planning.

Design Abstraction Escalation

December 12th, 2013

What are we losing by abstracting our design processes? Could it be as fundamental as losing a sense of humanity in our work?

A few years ago, Michael Bierut, wrote about a natural progression in a designer’s career.

“The client asks you to design a business card. You respond that the problem is really the client’s logo. The client asks you to design a logo. You say the problem is the entire identity system. The client asks you to design the identity. You say that the problem is the client’s business plan. And so forth.”

He calls this Problem Definition Escalation. Where a designer takes one problem and escalates it to a ‘higher’ plane of benefit and worth – one where it will have greater impact, and ultimately, make the designer feel like they’re doing their real job.

Constituent parts

Designing in a browser, in your head, on paper, on a wall, on post-it notes. It doesn’t really matter. What matters is the work. Is it appropriate? Does it do the job well? Will you get paid for it? Does the client understand the benefits?

Really. Who cares how you get there? We’re all coming around to the idea that designing responsive web sites in Photoshop is inefficient and inaccurate (if things like web font rendering matter to you).

Let’s look at the arguments:

  1. For those familiar with the tools, designing in Photoshop is just as efficient as designing in code.

  2. I design using the tools of least resistance. Preferably a pencil, sometimes Photoshop, and a lot of HTML. Photoshop is my tool of choice for creating website designs.

  3. Presenting static visuals to clients is different than using them as a tool yourself as a means to an end.

All of that is good news. Good for clients. Good for the work. Good for us.

A natural result of this is abstraction.


Design patterns are everywhere. The often-repeated chunks of content that we find ourselves designing and building time and time again. User’s get used to seeing them in certain ways, and over time, perhaps their performance is hindered by deviating from the norm. We see this all the time on e-commerce websites, or in new user registrations. Over time, we all collect these little bits of content, design and code. They build up, and eventually they need organising.

Why not group them all together, categorise them, and iterate on them over time? Throw in your boilerplate templates, too. Maybe group them together as a ‘starter kit’ with included navigation, indicative content – for different types of sites like ecommerce, blogs or magazine sites?

And… wait a second, you’ve got all you need to churn out site after site, product after product for clients now. Excellent. All we need to do is change the CSS, right? Maximise our profits.

No. It’s not right.

Conformity and efficiency have a price. And that price is design. That price is a feeling of humanity. Of something that’s been created from scratch. What I described is not a design process. It’s manufacturing. It’s a cupcake machine churning out identical cakes with different icing. But they all taste the same.

Documenting things that repeat is an important thing to do. I have my own pattern library that I’ve been adding to for years now – it’s an electronic scrapbook where I take snapshots of little content bits and bobs that I find interesting, and that keep on cropping up. It’ll never see the light of day. I’ll never use it on a project, because what I’m doing is building up a head full of this stuff so that when a problem presents itself, I will have a fuzzy recollection of something – maybe – that is similar. Instead of going straight to my big ‘ol database of coded examples, I’ll try to recreate this little pattern from memory – and that’s when something interesting happens.

Recreating something just slightly differently – from memory – means you end up with something new.

That’s why I wanted to be a designer, after all. To create new, beautiful things.

Filed under Design, Design patterns.

The Business of Responsive Design

December 1st, 2013

Responsive design affects a lot more than just our website’s layout. From content, and how it’s created, to the structure of teams and organisations can all be affected by the processes responsive web design brings.

This post is a rough transcript from my talk at Handheld Conference last week in Cardiff on just that.

Opening slide for talk on the Business of Web Design

I’ve a confession to make. I’m an armchair mountaineer. I’m too much of a coward to actually put myself in the type of risk mountaineers do, but for the last decade or so, I’ve been reading as many mountaineering books as I could get my hands on. And I’d like to start by telling you a famous story of Alpine mountaineering.

The Eiger Nordwand in the Bernese Alps in Switzerland. An 6000 ft, vertical, concave face perpetually shrouded from the sun. Facing North, the Eiger’s north face has been the scene of some of the Alp’s greatest mountaineering victories, as well as perilous catastrophies.

The North face of the Eiger

This is the North Face of the Eiger in the Bernese Alps in Switzerland. The Eiger (meaning: Ogre) is a staggeringly difficult face to climb. Nearly two vertical miles high of ice-coated loose rock. It’s a treacherous place. It’s also the place I proposed to my wife in 2003. But that’s another story. The story I’m going to tell you starts in 1936.

Andreas Hinterstoisser, a talented German climber, in the meadows below the Eiger enjoying the sunshine.

Andreas Hinterstoisser

In the winter of 1936, Andreas Hinterstoisser (pictured), Toni Kurtz, Willy Angerer and Edi Rainer set about tackling the face of the Eiger – then unclimbed. They’d established the rough route, and after a day had reached an impassable, sheer area of rock just underneath the Rote Flüh – a prominent feature on the face.

Let’s leave that story there for now and come back to it later.

Let’s talk about responsive design.

Responsive design has changed my work and, ultimately, how I do business. This talk is about how it’s done that. But before I do that, I’d like to tap about the definition of responsive design.

If you talk to some people, responsive design is just fluid grids and media queries. To other people, it’s that your website fits on a tablet or mobile phone and changes to adopt. To others, it’s the way to save money by consolidating teams. Responsive design – like AJAX, or Web 2.0 – has become a buzz-word to represent a change. A change in our industry. A change in the way people are consuming content. That’s the type of responsive design I’m going to talk about.

I’m going to talk about three specific areas of how it has challenged the way we work at Mark Boulton Design.

1. Structured content

It’s strange to think that there was a time on the web where content was a second-class citizen. As a student of editorial design, I’ve always found this odd. In the past, whenever I heard ‘content is king’, my response was generally ‘er, yes’.

Responsive design has challenged how we commission, create, edit and design for content. I’d like to talk a little bit about how this has affected two clients of ours. Firstly, our work with CERN.

Different content for different people, at different times, on different devices.

I’ve talked about CERN before at conferences, but not really in this amount of detail. When we started working with CERN a few years ago, the whole project was framed in one sentence by the head of the CERN web team…

We have a content problem.

And they did. They didn’t really know who their audiences were, how to talk to them, or what they wanted. Following months of research, it became clear the audience for the CERN site was comprised of students, scientists, the general public and CERN staff. Interestingly, all of those four large groups had a common need: updates. They wanted to know what was going on. But here is the problem: each group of people needs to hear the same update in different ways. Let’s take an imaginary use-case of an announcement for a new particle that’s been discovered.

For the general public, they are generally learning a lot about CERN from elsewhere. Not on the CERN site. So, they are coming to the site from another trigger – either another website, or the TV, or a magazine or newspaper – and their overall comprehension of the work done at CERN is minimal. The update needs to be worded to accommodate that. But that update also needs to appeal to scientists working in high energy physics and associated fields. They want the detail, in the language that suits them. Already, our one update is fragmented. Throw in students and educators, then our update is going to have to work very hard if it’s just one piece of content.

Therefore in the CERN redesign process, the editorial structure of updates needs to be fragmented and structured in such a way to accommodate different words for different audiences. A responsive design challenge that has nothing to do with how something looks, but how it is structured and how it works in the CMS.

This brings me onto my second point on structured content.

Fractured content

We’ve also been working with Al Jazeera for a few years on redesigning their digital platform. Throughout that process, in just that short space of time, we’ve seen the rise of responsive design and how it affects how content is created and viewed. One example of this is just the process of how news works.

We often think of a news story as a page. A useful, familiar construct. It has a headline, a stand first, some paragraphs and maybe an image or a map. But after studying how their editors work, it became clear that this is not what a news story is. News is always moving.

Drawing of a seed

A story starts as a seed. Something that comes down the wire…

There has been an earthquake in Japan.

Nothing more. Not yet.

Content starts as a seed. Something small. Then grows over time to pull in various content types.

Diagram showing content being pulled together

Then, over time, the story grows and, like a snowball rolling down a mountain slope, more content starts getting attracted to it – maybe a tweet, other articles, images, video, timelines, quotes etc.

Because a news story is not a page. A story is the link between bits of content. The question here is how do we – meaning editors and designers – curate and cajole this content to most effectively tell the story?

Meta Data is the New Art Direction

The answer does not lie only in design. The answer lies in how content is structured and categorised. Meta-data is the new Art Direction.

2. Process

Responsive design has been perhaps most visible in its ongoing challenges to process. How we do what we do is coming under increasing pressure, and here are several ways in which I’ve noticed how.

Proximity

I started out working in advertising. As a student, I was an intern for a couple of years at an agency in Manchester. Other than the work, one of the things that has become clear now I run my own design business.

When advertising agencies talk about work, they talk about it in terms of accounts, not projects. When you win work, you win an account – for a period of time. An account is commitment over a period of time.

We will work with you on all our projects for 12 months.

This means a client will invest in you, and the time it takes you to learn their business, familiarise yourself with the challenges and give you the space (and budget) to do great work.

Projects are not a commitment. Projects are relatively risk-free.

You will deliver this website for this much money in this time-frame.

Approaching work this way leaves little room for any ongoing commitment, from client or agency. It’s like a first (and only) date. And with that comes a distance.

Over the past couple of years, I’ve seen my peers move from agencies and studies move to products and client-side. In doing so, they are closer to the problems. With the space to move in an agile way without the constraints of any binding commercial relationship. This reminds me of a story from Kevin Spacey about his work on the House of Cards

Kevin Spacey recently gave a rousing talk at The Telegraph in which he talked about how TV commissioning works in the US. He went to all the networks in the US to pitch the show. They were all interested, but each one wanted to do a pilot. A pilot which, in 45 minutes, would establish the major plot-lines, introduce the characters, the love-triangle, the cliff hanger.

Kevin Spacey delivers one of the best talks I’ve ever seen (oh, to be an actor with this sort of delivery!) about why and how the House of Cards was commissioned on Netflix.

“It wasn’t through arrogance that we weren’t interested, but we wanted to tell a story that took a long time to tell. We were creating a sophisticated, multi-layered story with complex character that would reveal themselves over time and relationships that would need space to play out.”

The House of Cards was about the long game.

To me, many web projects can feel like a pilot. Relatively low risk, low on commitment to work together without the time and space for the problems to play out. Proximity to the problem – a hand forced by responsive web design’s challenges – comes from working closely, over a long period of time. An account, not a project. A season, not a pilot.

The project rope-a-dope

In 1974, Muhammad Ali and George Foreman fought in the ‘Rumble in the Jungle’ in Africa. Forman was the favourite having beaten Ali three years before. he was strong. Young. And a great boxer. He was sure to win.

Muhammad Ali vs George Foreman in the ‘Rumble in the Jungle’ in 1974.

Muhammad Ali vs George Foreman

Throughout the fight, Ali let himself get hit on the ropes. To give the impression he was tired, lose, and close to defeat. All the while, he was whispering in Foreman’s ear ‘You’ve got nothin”… ‘nothin”. Forman blew himself up trying to knock Ali out. In the dying moments of the fight, Ali knocked Forman out and won the fight. This technique was coined the ‘rope-a-dope’.

Just going back to my last point for a moment. One of the results from being closer to the problem is that you have more exposure to the mess of design. Making things is messy. And to some people – especially clients, who can expect nice shiny things handed to them – may not be expecting to be exposed to that.

Sometimes they will freak out. And it’s our job to sit back on the ropes and take it on the chin. But, instead of goading them, we should offer words of reassurance. We should shift our process to something that may feel more comfortable. You have to break a few eggs to make an omelette, after all.

Where is the design?

Getting in the browser sooner. Looking at content sooner. Iterate. All of these things have a knock-on to design and how it’s received by a client.

The Fidelity Curve. As a project time-scale increases, so does the fidelity of the design work being done.

The Fidelity Curve

For a few years now, I’ve talked about the fidelity curve. A simple graph to explain to clients that over time, we increase the fidelity of a prototype and slowly layer on the visuals. This is so we can fail quickly on low-risk, low-fidelity work. Mostly this is good and works well, but recently, I had an interesting discussion with a client in which they asked where the design was.

It’s an interesting question, because in this process, the design is everywhere. And unless you take the client along every step of the way – knee deep in the mess of design, being closer to the problem – then how do you manage the expectation that, at some point, a client will expect a presentation, or a reveal’ of how the product will look.

3. The Trend

“I want a responsive…”

As I said, responsive design is a trend. Or, rather, an awakening. As such, a lot of organisations and businesses are behind the curve . But one thing many people aren’t asking (and, I know this because I ask) is ‘is it worth it?’ or ‘Do you really?’

In 2011, our first responsive site was a site for World Skills London. It was a fun project, geared around a single event in London in which 200,000 visitors would attend and watch the various activities in the competition. As part of this project, we designed a responsive map. A cool diagram with a responsive image map that would scale and allow users to get from A-Z in the event by using their phone. Cool.

The World Skills London 2011 Map

Except, during the project retrospective, it became clear that, actually, only 25 people used it. It was not needed.

Back to Hinterstoisser

Let’s go back to the Eiger and Hinterstoisser and three other men trying to climb the North Face. If you recall, after a day or so, they had arrived at a seemingly impassable face of rock under the Rote Flüh. After much deliberation about trying to re-route, Hinterstoisser decided to have a go at traversing the feature. And he succeeded, and with that, opened the gateway to the rest of the face and rest of their climb.

The Hinterstoisser Traverse on the North Face of the Eiger is a 150ft pitch of vertical, and often ice-glazed, rock. Now, with a fixed rope in place, the traverse was undertaken by Hinterstoisser by tensioning a rope high above him and traversing downwards and across.

The Hinterstoisser Traverse

Today, the same traverse is still used across the same slab of rock.

Last week, I did a survey on Twitter about the business of responsive design. After 500 or so responses, it’s clear that everyone is finding everything hard right now. The change is so big, and so rapid, that we’re struggling to keep our heads above water. And this especially goes for those working in-house or clients.

Breaking new ground is always difficult.

But, just like Hinterstoisser, take heart in knowing that what we’re working on right now is a legacy for designers and developers in the months and years ahead.

Filed under Design, Conferences.

The Lull

November 21st, 2013

There is a storm coming.

For those of you reading this who have experienced a severe weather event know all too well the sequence of events leading up to it. First, there is a warning – either through the media, verbally, or from the old woman in town who can feel it in her bones. Then, there is the sense of it coming, and that can take minutes, hours or days. Either way, there is a feeling of calm before the havoc. Battening down the hatches, preparing your self, property, business and family. Preparation is important in surviving something potentially catastrophic.

I read a post today from the Karen Mcgrane called Responsive Design Won’t Fix your Content Problem. It was nicely validating for me reading what mirrored so many of Mark Boulton Design’s clients, especially over the last eighteen months. The post describes the difficulty organisations are with adapting to their digital content being published across a variety of channels. Reconciling that against existing business and technology structures is hard for big organisations but, in my experience, that’s what’s been happening for the past years.

Responsive design is our storm. Acknowledging the way the web really is, and reconciling it against the plethora of new devices and reading behaviours has been a seismic shift in the creation and reading of digital content. Organisations have been spending the last couple of years coming to terms with it.

Quoting Karen’s article from a recent project she was working on:

Our executives assume that since they made the decision to go responsive, every other decision would just be tactical details. In fact, implementing responsive web design raises issues that strike right at the heart of our business and the way we work. We need to fix our review and approval processes, our content management system, our asset management system, our design standards and governance. We need to clean up our outdated, useless content. But it’s hard to get people to step up to solve these bigger problems, because they don’t think they’re part of “responsive design.”

This exactly mirrors my experience.

What starts out as desire to change for the better, to make a web product responsive, is the start of problem escalation. Before you know it, organisations are talking about needing structured content, but to do that they need a new CMS, but to do that, they have to procure a new CMS and migrate content. Now, that’s not all bad. Organisations have been doing this. Preparing solid foundations on which to create digital experiences for wherever the user may be.

The storm. The critical mass of creating content for an increasingly broad digital space is just around the corner. Are you prepared?

Filed under Design, Process, Responsive Design, Content Strategy.