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?
Following on from my post about speaker and audience tips, I thought I’d also share a few tips for conference organisers from a speaker’s perspective.
I’ve spoken at well over fifty events over the past few years to upwards of about four thousand people. Along the way, I’ve had mixed experiences of what it’s like to speak at conferences big and small. Mostly, of course, the experience has been great. Organisers are lovely people, who work extremely hard and appreciate you being there and look after you well. But, as always, the devil is in the detail. If you’re thinking about organising a conference this coming year, maybe bear some of these details in mind.
Logistics. Well in advance, give the speakers the logistical details; who’s meeting them at the airport, where they’re staying and for how long, what time the parties are, what other commitments they have etc. If you don’t have them, let them know you don’t have them yet and that you haven’t forgotten them.
Pay them. Even if it’s a small amount, but especially if your conference is for profit and relies on the quality of their talks to sell tickets. Of course, travel expenses should be covered. Now, this may not apply to some ‘community’ conferences with many, many speakers. But, for most, it applies.
Arrange travel. Book their flights (and make sure you ask for their frequent flyer number), pick them up from the airport, ferry them around if need be. They’re not to be pampered, but don’t underestimate peoples anxiety in foreign countries.
Put them in a nice hotel. Again, consider the details. Make sure the hotel has confirmed the booking, and they know when the speaker is expected to arrive. Once, when arriving late at a conference hotel, I was told I didn’t have a room and ended up sleeping in a meeting room on a makeshift bed for the night.
Confirm with them the pre and post talk events. Is there a speaker’s dinner? If so, where, when, what time (and where) is everyone meeting.
Sound and technical check. A lot of speakers like to get this out of the way before their talk. They will want the name of the person they need to report to – either a stage manager, or a conference volunteer – in order to sort that out.
Dongles. Make sure you have every known projector dongle available. People lose them all the time. Also, spare clickers and batteries is a good idea. Most speakers will be well-prepared and carry their own, but just in case.
Tea. This is personal. Not everyone drinks coffee, and I would like tea at my breaks.
Alcohol. Again, this is personal, but not everyone likes a piss-up. So, the after party should not necessarily be at a club where you can’t hear yourself think with as much free spirits as you can drink. Consider attendees may want to talk amongst themselves in a grown-up setting after a long day sat down. We’re not all party-animals.
Green rooms. It’s important that speakers have somewhere to go and work, or cram their slides, or be by themselves with their nerves. This is very important for me. Last thing I want to do before I go on is mingle. I’m generally nervous and want to focus on the job at hand. It has been known for me to hide in the toilets for a while.
Rights. Don’t ask for exclusive rights over speaker’s content. This happens, and increasingly so, actually. A conference will explicitly say that you are not allowed to talk about the same stuff in other places. Nope. That will not do. A lot of speakers produce one or two talks for the entire year.
Video. If you’re going to video me speaking, and charge for those videos of me and my content, you should explicitly ask me. Not because I’ll say no (not every time), but because it’s nice to be asked. And, sometimes, I may be talking about content which I want to actually use at a later date for myself in a filmed workshop, or talk.
Get a good MC. If you have someone introducing each speaker – and you should – then make sure that person is energetic, funny, personable and just plain pleasurable to listen to.
Have a stage monitor. I use scant notes in my talks, but the most important thing for me are my pace notes see point 14. If those notes are on my laptop screen all the way over on the lectern, it’s sometimes a bit unnatural for me to be flitting back and forth. It’s much better, if you can, to have a monitor on the front of the stage showing Keynote’s presenter display.
Set the expectation for Q & A. If you plan on doing Q & A let everyone and the speaker know. If you don’t plan on it, then don’t – after the speaker has finished – say ‘thanks, Mark. So, any questions audience?’. Invariably there won’t be any, because nobody – including the speaker – was expecting it. Also: it’s generally a bit of a bum note after the rousing ending to a talk see point 11.
Your conference is not your ego trip. Everybody, including the speakers, are incredibly grateful for the effort you’ve put in over the year to produce a great conference. But, chose a time and a place to thank people. In between each talk isn’t it. Also: my guess is that most people in the audience have bought tickets to hear what the speakers have to say, rather than as a favour to you.
Your conference is not your platform. Building on point 16, I’ve been to a few conferences where there is an agenda – a point to be made by the organisers – either by who is speaking, or about what. If you have one, and that maybe fine, but please let speakers know before hand.
Talk to your speakers about their content. This is important. Many speakers will not have their talk ready until right at the last minute (especially me). But, they will have a pretty good idea of what they will be talking about. Talk to them. design the conference and the material. Create an experience for the attendees on underlying threads in the talks. It’s my feeling attendees should feel like they’ve been to a show, than seen a collection of people speak. It should feel united.
360 Degree Feedback. As a speaker I’d welcome the opportunity to feedback to the conference organisers about the conference. Consider a method of gathering feedback from speakers.
Feedback from the audience. Feedback on speaker’s talks is generally through Twitter, which is an almost immediate response and gauge on how you’ve done. Mostly, it’s a good tool in that regard. Other conferences use questionnaires. I find this a clumsy tool and metric on which to base a speaker’s performance. One glance at Twitter, and a few conversations in the hallway, should confirm to you if it was well-received or not. I welcome constructive feedback. I don’t welcome ‘I can’t understand this Englishman’s accent’, or ‘that was boring’. That’s not a conversation. It’s a verbal drive-by. I know people have quit speaking because of this type of ‘feedback’. It’s not helpful.
That’s it for now. It’s worth saying I’ve never organised a conference, but I do know how much time, effort and money it takes to do so. I’ve nothing but upmost respect for people who do. That said, I hope these few tips help in a little way if you’re thinking of giving a conference a go.
I’ve been speaking for a good few years now, and over that time, I’ve amassed a bunch of little tips and tricks I use to make it more of a pleasurable affair. This post was prompted by a colleague of mine, Nathan Ford, who, this morning, asked for some tips as he has a couple of speaking gigs lined up next year.
So, here we go. Some tips for speakers, and for audiences (from a speaker’s perspective).
Smile. This is a fun thing to do and you are thrilled to be there (even if you want to vomit in your shoes at that point).
Check your flies. You don’t want that breezy feeling half way through a code demo.
Take off your lanyard. It can bang against your mike.
Take off your earrings. If you have long, dangly ones they can interfere with headset microphones.
Do a sound check and walk the stage. If it’s being filmed check for black spots on the stage and avoid them. Get comfortable with the size of the stage, especially if you plan on wandering around.
Never apologise. You know your mistakes, your mistakes in your slides, things you forgot to say, technical issues. What the audiences doesn’t know, doesn’t hurt them.
Make sure you have water. A bottle by the lectern is enough. But, don’t drink it all the way through your talk like some kind of nervous tick. It’s just there for emergencies.
Use a good clicker. Check the batteries.
Check your radio mike is off before you go for an emergency pee. You don’t want to do a Naked Gun.
Don’t fall off the stage, but if you do, don’t acknowledge it. See point 5 to avoid this.
Finish strong. Empower the audience. Encapsulate your main point in one sentence. That last sentence should stay with everyone. Pause. Then say ‘Thank you’. Then the crowd will clap.
Don’t hide behind the lectern. It can feel like a barrier (or a safety net). Sometimes this is tricky if people are doing code demos or the like, but personally, I can feel like it’s a barrier between me and the audience.
Gaffer tape! If you do stay behind the lectern, pack some gaffer tape in your bag. Lectern’s have a habit of having a small lip that Macbook Airs tend to ride ride over. On a number of occasions, I’ve had to tape my laptop to the lectern.
Pace yourself. Put in pace notes in your slides. Just a simple 5:00 will do. Meaning, ‘At this point, I should be 5 minutes in’. This helps me know when to speed up, or fill. Plus, it’s a good barometer of your overall pace.
Make your point, but don’t make it angrily. Passion can sometimes come across as shouty arrogance.
Don’t say ‘can you hear me?’. If they can’t, they’ll let you know. Good sound crews will fade up your mike as you start speaking.
Focus on your words more than your slides. Again, this maybe personal, but I’d rather listen to well considered points, than look at pretty slides.
Find a friendly face in the first few rows. Try to block out the people looking angry, bored or just asleep. Yes, people fall asleep.
If you finish early, don’t worry, it just means people get more coffee.
Dress comfortably, not necessarily smartly. That doesn’t mean a suit, or a blazer, or a fancy dress. It means dress so you’re not thinking about your clothes. If you’re thinking about uncomfortable you are – for whatever reason – you’ll be off your game. People aren’t there to see what you have on, but what you have to say.
Don’t sell yourself, your company or your product. It’s not the place. People will not listen and get angry.
Questions and Answers. I’m not one for Q & A, but if there is, then make sure you repeat the question before answering it. Don’t take for granted everyone else has heard, plus, if your talk is being recorded, then listeners will need to hear it.
Is it being recorded? If the talk is being recorded make sure, when referencing something visual, you also provide enough context over audio so that people listening understand. Less of ‘this thing over here’, more of ‘I’d like to draw your attention to the heading in this example’.
I think, above all else, remember that if you’re planning on speaking this coming year is to enjoy yourself. Yes, it’s stressful. You’ll be nervous, you’ll be thinking ‘why am I doing this?’, but there can be so much fulfilment in sharing your work with your peers. And, really, that’s what it’s all about, isn’t it?
And, now, if you’re attending a conference this coming year, then here are a few tips, from a speakers perspective, on how to get the best out of attending the actual talks.
Be in the room. Personally, I’m not one for laptops, iPads or phones being on, but I understand people take notes on them. People also Photoshop pictures of the Queen and engage in Skype conversations with their mum. My guess is, these people aren’t listening.
Try not to fall asleep. I get it. You’re tired, you were out late last night, it’s warm and dark. But, really, it’s quite off-putting if, as a speaker, you’ve spent weeks fretting over the next 45 minutes and some bloke is catching flies in the front row.
Huddle up. Move along the row to the centre so people can get a seat.
Don’t talk, or heckle. Only the most experienced speakers (and I don’t count myself in that group) can deal with that kind of interruption. Plus, it annoys the people around you.
Be a friendly face. It means a lot to catch a friendly face in the audience. A disgruntled face can derail a speaker or a talk.
Be on time. Get in your seat in plenty of time before the scheduled session.
Listen and think before you tweet. I’d like to think people give talks the time to play out before forming an opinion. Sometimes, it can take 20 minutes for a speaker to make their major point.
I get the content in Word, copy into the various boxes in the CMS and then see how it looks. Normally I spot a few typos, or it doesn’t appear where I want it to, then I have to go back and find the article again – which isn’t so bad, it’s normally at the top. The real pain is when I have to add another link to that list over there. (whispers) Normally I ask James (a developer) to do that for me, though as I can’t do it.
This was a conversation I had with a person recently about how they use their CMS. A real-life content person. I say content person, not ‘creator’ as you may have noticed she doesn’t write the content. She just ‘gets it’. She’s a piece in the publishing workflow. A cog in a machine. And our tools are failing her and are only going to get worse.
In that workflow, there is a bit that’s a clear trend amongst the people I’ve spoken to about this.
then see how it looks.
And that’s the thing, right there.
Since we’ve been using computers to make websites we’ve tried to make them like print. Of course, early on, that was fair enough. It was familiar. We knew the rules and tried to make the web like it. Even now, with the realisation that the web has changed – or rather, we’re being honest to the way the web is. It never really changed, we just tried to make it something it wasn’t – we’re still enforcing a print-like mental model on it. Not necessarily us designers and developers, though. This is coming from people who write and manage content. Just like printing out an email before they send it, they will want to preview a website to see how it looks.
The problem is this: The question content people ask when finishing adding content to a CMS is ‘how does this look?’. And this is not a question a CMS can answer any more – even with a preview. How we use the web today has meant that the answer to that questions is, ‘in what?’.
Let me first off define what I see WYSIWYG. WYSIWYG is not a limited toolbar for adding semantic value to your document.
The kind of toolbar you find on Medium, or on Basecamp. As you can see they are similar. They are used for applying semantics to document structure; giving words emphasis, making unordered lists, or numbered lists, making words headlines. However, they’re not there for the user to get creative. They do not change the colour of a word.
When I think WYSIWYG, I think of the Word toolbar. This type of WYSIWYG is for adding tables, images, forms, type and colour. It’s a toolkit to create pages of content. Just like desktop publishing. And that’s the dangerous thing. Content creators are used to having these tools at their disposal so they can craft their document. Why? Because writing isn’t done in a CMS, it’s done elsewhere.
Times -are changing- have changed
It’s been a turbulent few years for web designers and developers. We’ve had to relearn what we’ve created and finally acknowledge – through the timeliness of Responsive Design – that the web is a fluid and chaotic place, and we should be embracing it and not making it like print. We’ve learnt to deal with the loss of control. The problem is, though, our content people are still thinking of pages. They’re still thinking of previewing. Of designing for the desktop. They’re writing in Word and fine with it.
So, that’s the challenge. How can we help people – just as we have – relearn how the web is now?
Just like when people have a content management problem, a lot of people are turning to technology for the answers. And just like content management problems, my experience is software can’t fix it. Because it’s a people problem, not a software problem.
The three places of content management
There are three spaces * for content people – not creators, because not all content people create loads of content. Some just manage it – push it from here to there. Those places are:
A space for writing. For writing and structuring.
A space for management. For adding meta data, workflow, configuration and managing roles and people.
The website space. Basically your website. A place where you begin the access user journey. Or preview your content. Generally the starting points for lots of little administration tasks.
There are other spaces, too. The developer space, where the site is administered and created, managed and evolved. Sometimes this is through an administration interface, but not always. Sometimes it’s just through an API.
The problem I see is that the CMS tries to deal with all three spaces equally well. And as such, generally fails to deliver an optimal experience because it’s trying to do too much. What if your content management system was actually three distinct applications designed to work together? Just a thought.
But, back to WYSIWYG.
The issue with WYSIWYG for me is that by using them the content person is considering the content as what they see. But content is more than that. Especially if it has meta data, and is split up and compiled from here and there. A ‘page’ maybe a dynamic template pulling in content from a dozen places. How do you change meta data there?
If we consider the majority use-cases of correcting typos, restructuring slightly, or small on the fly editing, then the smaller toolbars for adding semantic value are useful. But for most use cases, a WYSIWYG is not useful for content people. It’s just familiar.
Inline-access, not inline-editing
One of the other pain points of a complex dynamic website, where ‘pages’ are created with bits of content from all over the place is ‘where the hell do I go to find that bit of content to edit it?’. That is a painful moment in a content person’s daily life. Normally, after watching them, they go off deep into search, or ask someone else who knows better. Accessing these smaller nuggets of logic-based content is problematic. This is why inline-editing and WYSIWYG is coming to the fore – addressing the use case in the live environment.
Why is this a problem?
As I said before, it’s hiding the truth. That being, the content is more than you can see. Instead of inline editing of the content, why not just make the start of that journey a little easier? Why not provide a way of quickly getting to exactly that bit of content with a link? There we will see all of the stuff that is the content but not the words: the display logic, taxonomies, meta data etc. But if we want to change a type, we can do that with our little toolbar.
Not one tool, but many. Not one way, but many.
Structured content is the right way to go. It makes our content portable and malleable. In fact, it makes it much more useful. Slapping a WYSIWYG on top of a form field is not the way to go. That’s not structured. Live WYSIWYG is not the way to go for large-scale websites because it reinforces that content is just what you see. When, in fact, a piece of content could have a whole bunch of other headlines and summaries that would only be displayed in certain contexts, along with meta data and rules. We need access to ALL THE CONTENT and provide simple, little tools to let people make typo changes and apply semantic structure and the like once they’re looking at the content in a staging environment.
‘How does this look?’
should change to:
‘How does this read?’
Device agnostic. Screen size independent and devoid of design. Let’s help content people focus on what the words and pictures are, rather than what the words and pictures look like.
My uncle is a quiet man. He smokes a pipe with a wry smile. Like he knows something you don’t. For years he restored traction engines; huge, victorian, steam-driven machines. He did it for the love of it. I have wondered if he did to escape. Like a lot of men that age, he spent a lot of time in his shed on his own, surrounded by the smell of oil, grease and pipe tobacco. A dusty pile of tabloid newspapers in the corner. Slowly whittling away on a small piece of metal, making some grommet or flange or something.
Sounds romantic doesn’t it?
Now, how many times have you heard web designers and developers talk this way about their work? For me, it’s been increasingly. And personally I find it concerning. For starters, it’s a designer-centric way of working. It’s a selfish exploit to pour love into your work. If you’re working commercially, who pays for that time? You? Well, that’s bad. The client? Well, that’s ok if they see the value. But many don’t.
Giving your work love is not just about giving it time. But, time can often be better spent than whittling away on some nubbin’ or grommet just because you think that’s where you can give the work your love. Your craft.
Over the past few years, I’ve spent more time on projects not whittling. Whittling happens in the very latter stages of work and I really don’t find myself in that place very often. Mostly that’s because the clients I work for have a myriad of big, sticky problems that need working out before you start ‘crafting a user interface’, whatever that means. I’m more often than not in a place where my own job, as a designer, is to not make something I love. But to make something appropriate. Something that does the job well. Something that responds to a hypothesis and serves a need. Not necessarily something loved and beautiful. And that’s ok.
Craft is an emotional word not appropriate to describe the job of designing. It’s too self-centred. Too mired in arts and crafts and puts a difficult-to-measure parameter into the minds of clients.
‘I want a beautifully crafted interface from a passionate designer’
‘I want a self-centred designer to spend way too long on the shiny than actually solving the problem or having the difficult discussions’.
If my uncle was restoring traction engines for a living, he would’ve been out of business. Craft is love. And love takes time. And time is scarce and probably best spent elsewhere.
I first started using the internet in about 1988. I had a mate whose dad worked for IBM so he had an early PC connected – via the phone line – to a rather sophisticated little modem. The internet wasn’t the web back then, it was a mix of bulletin boards, rudimentary email clients and IRC. You may think that it was a primitive, but in reality, the prospect of near live discussions and collaborations with people all over the world was pretty incredible. As friends do, we lost touch, and my connection to the internet was lost with it. I did other things: failed my A-levels, learnt martial arts, chased girls, learnt the guitar and went to art college. My connection with internet picked up again in 1994. And, oh boy, was it a different place entirely. In just a few short years, the web went from idea to proposal to freely available. And the world was changed forever.
As web designers and developers, we spend a lot of time trying to explain the difference on the web. “It’s not TV, it’s certainly not print” (oh, no, it’s definitely not that). The web is its own thing. But unlike other media – ones which have physical artefacts, which get left behind to rot, to be found and stuck on a shelf in a museum – the web doesn’t have that. Pixels don’t decay, they just disappear. Forever.
Preserving our digital heritage is as important as preserving our physical heritage. There are a few people and organisations in the world who get this: The Long Now Foundation and Archive.org, to name a couple, but I’m not sure that’s enough. The need to preserve must come from our desire to learn from the past. I have two young children and I want them to experience the early web and understand how it came to be. To understand that the early web wasn’t that rudimentary but incredibly advanced in many ways. Currently, it’s impossible to do that. And, together with CERN, that’s what we’re hoping to provide.
A wonderful piece of writing in which Warde describes the role of typography – or rather the role of the designer - in printing. The general premise is that good typographic design shouldn’t be seen.
When you listen to a song in a language you do not understand, part of your mind actually does fall asleep, leaving your quite separate aesthetic sensibilities to enjoy themselves unimpeded by your reasoning faculties. The fine arts do that; but that is not the purpose of printing. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.
Let’s take that last point. Morgan Freeman has a memorable, wonderful speaking voice. One that adds colour and weight to the words. His words are not just audible, and understandable, but they are rich with personality. His voice adds to the words he speaks.
I disagree with Warde. Type should not always be invisible, it should be appropriate. Sometimes, it’s a typeface’s job to be overt, loud and suggestive, in order to communicate the content in the best way. But, yes, sometimes typography has to melt away into the background. To support the content and the reader. To help them.
On the web, because we’re quite often presented with long-form text (and by that, I mean more than a few paragraphs), we get a little obsessed with body copy. Good typesetting of body copy should be like that of setting a novel; the type should disappear. But, not all typography is body copy, and to consider it in these narrow terms is to do the practice of typographic design a huge disfavour.
Whenever we design with words, we’re designing with type. And words are not always long form paragraphs designed to be very easy on the eye. Sometimes it’s a logotype, a button, a richly designed layout, a data table or form. The application of typographic design is just so broad that to say it all has to be invisible is to imply the goals of typographic design are the same across the board.
Legibility is a baseline requirement for typesetting anything. It’s like edible food. It shouldn’t really be a measure of what is good or not. Just like audibility and comprehension are baseline requirements for speech. There is more flavour in words; spoken or printed. There is more flavour in type, that if applied well, transcends content from being merely legible, to that of being pleasurable. After all, that’s why we have different typefaces: each brings with it characteristics that flavour the words.
In my opinion, there is merit to visible typography because in the hands of a competent typographer, a text can truly sing. Not because they have left their mark out, but because they have worked their art on the words.
I agree which him completely. It’s the difference between something edible and exquisite. The difference between average and better. Which is why all this invisible, reductionist UI approach is starting to grate on me a little because it suggests we have the same goal for all our work; to make it invisible. It’s more complex than that. It’s an over-simplistic measure of success that is put far more eloquently than in this post from Timo Arnall.
Of course, I say all of this under the one big caveat that, in typography, there are no rules. Just good decisions. But, let’s make some decisions shall we? Not make everything invisible because, apparently, that’s the way it should be.
Eighteen months ago, I blogged that we’d started working with CERN on redesigning their site. A dream project for me. And one that is in its final chapters as the site went live last week. But, as with all great stories, as one chapter draws to a close, another starts.
This week I’m at CERN in Geneva, but I’m not working for CERN. Mark Boulton Design has been asked by ATLAS to help them redesign their public website. It’s another dream project.
ATLAS is a collaboration of three thousand physicists, engineers, computer scientists and support staff, in forty countries, in one hundred and seventy institutions from around the world. One big scientific melting pot, who have built one of the most complex machines known to man which is connected to the Large Hadron Collider. They’re one of two experiments to independently observe a particle that behaves consistently with the Higgs Boson. In other words, whilst they share similarities with CERN, they’re actually quite different.
I’m thrilled to be working with such a progressive, interesting group of some of the smartest people on the planet, working on some of the most historically important work that humans have ever done.
Last week, CERN quietly redirected their URL to the new site. And Mark Boulton Design and the CERN project team saw the chapter close on nearly two years of work.
There is much to talk about with a project of this scale. Probably the first thing to say is that this was not a website redesign project. The project started with the very simple statement: ‘we have a content problem’. I’d like to think it’s a problem we solved, but it also went much deeper than that.
CERN is an organisation that supports collaboration. In fact, CERN is comprised of many collaborations; more community than organisation. We have a bit of experience designing with communities, and the teeth we cut with the Drupal community came in very useful here.
As we all know, the question ‘why wasn’t I consulted?’ can derail almost any endeavour. This was no exception. So, early on in 2011, the Mark Boulton Design team spent months talking and listening. In fact, the majority of our first six months on the project was spent trying to understand CERN’s audience – both internal and external – and what CERN does for them.
As in 2008 and 2009, when we worked with the Drupal community, designing for community relies on one thing: listening for trends. Design by committee doesn’t work because there are relatively few stakeholdersm and sometimes with big egos. Design by community works because of the sheer numbers and relatively flat hierarchy. Instead of ensuring the boss is consulted, it’s more important to consult with just two types of people: those who have influence, and those who have a big mouth. Get both of them on-side, and your job will be easier.
CERN started with a content problem. To really understand how content was to be reorganised, rewritten, and – in some cases – deleted altogether, we needed a plan. Not only that, we needed to understand how this content was being consumed and where. We needed a content strategy.
We embarked on a good few months of content research – audits, interviewing, process-audits and the like – before producing a strategy that sat alongside a new Communications strategy from the CERN comms team. Together, these would redefine how content is created and managed at CERN, and how it gets published to the web.
The new content for CERN is Future Friendly. It’s adaptive – meaning it’s carefully chunked into small fields in the CMS and tagged with really great meta data so it’s able to shift and flex into different containers. No WYSIWYG here. Just really smart, well-structured – and reusable – content.
To my mind, good design decisions rely on good research. And for this project, we had some great research throughout. A broad amount of data was gathered by various means and filtered down to the design and product team. Not by way of reports and documents, though. In my experience, these often get cast aside. No, in our team we had Emma embedded with the design team. Always present with up-to-date insights into the audience needs so that she could literally sit beside us to help us guide some of the design decisions.
I’ve written about the design strategy for CERN before. How the content needed to inspire, educate and inform the various audiences of the website, but we needed a simple model in order to map the content and the subsequent presentation of the content. Our Make Mantra – Create Wonder – was born, and is still used today as way of gauging how content is to be created and presented.
Practically, we did a lot of prototyping and very little else. Prototypes became the way we experimented with concepts, discussed and communicated ideas, worked on responsive elements. These prototypes then quickly moved from static HTML into dynamic lo-fi Drupal prototypes. This was so editors could get writing content quickly – actually using the tools they would eventually use on the site. All the while, we were continuing to iterate. In all, I think there were 5 or 6 alpha releases, 8 betas and many, many pre-alpha prototypes.
The new CERN public website runs on Drupal 7 (the most recent version of Drupal, that we designed the UX and UI for). It’s mostly an out-of-the-box installation with a few bespoke modules that integrate with internal services such as CDS (CERN’s media server) and Indico (the event management database).
I don’t often do it, but this is the bit where I get to gush a little. The people involved in the project is pretty epic. But, there was a core team of designers, developers, product leads, researchers, content strategists and journalists that deserve a mention. Without them, this project would not have turned out the way it did.
Such a smart team. There are of course countless others – probably hundreds of people – I could thank. But, this isn’t the Academy Awards. If you helped, you know who you are, and I’m very grateful.
A special project
This project always was a bit different. CERN is a special place, yes, but it takes a degree of risk and subsequent trust for an organisation of this scale to work with an external company for such a length of time. CERN invested time and energy to work with us at Mark Boulton Design. When we suggested radical changes to process due to our research findings – things that have had disruptive effect on the communications of the organisation – they didn’t flinch. They knew it was the right thing to do. And supported us in our proposals. That takes a very special type of client; one that is willing to truly partner with a design company. And, I’d like to think the results speak for themselves.
Not just a website
When I reflect on the past two years work on this project, it’s easy to think of it as ‘bloody hell, that’s a long time to make a website’. Well, yes, it is if that’s all we did. But, in the words of James Gillies, Head of CERN communications team and project sponsor:
The launch will mark a significant change in how the Organization facilitates communications within the CERN community, as well as how it presents itself to the world. The first thing that you will notice is that the website looks different, but the most significant changes run deeper, and they form the basis for a new communications architecture.
He goes on to say:
There are many ways we could have chosen to build the new CERN website. We could have asked designers to create something beautiful. We could have created a template for content. Or we could have tweaked our existing websites. Instead, we went back to basics and reflected on who we want to reach and what their needs are. Then we asked them to help us. All our stakeholders have had an opportunity to influence our new website, and many of you have taken that opportunity. We have conducted regular audience research through online polling, usability testing, and in-depth one-on-one interviews, receiving feedback and input from thousands of users. I would like to thank everyone who got involved: your feedback has directly shaped many of the design decisions and turned this into a real community effort.
You see, it wasn’t just a web site. It was helping CERN understand who they’re talking to, what they’re saying, and how to say it. Then, giving them the means to do it.
Breakpoints. Break. Points. Points at which things break in your design.
But, at what point did they start becoming ‘the point at which I will create a new layout entirely’, or ‘the point at which I introduce a new canvas’. What started out as a method to optimise your designs for various screen widths has turned, ever so slowly, into multiple canvas design. We’re creating pages again, and we probably need to stop it.
A breakpoint should not necessarily be a point at which we wholesale swap out to another layout. It can be – and I think there are good reasons to make some of those big, macro changes to grid system or navigation patterns. BUT, I think we’re missing a trick for using breakpoints to make lots of subtle design optimisations.
A responsive design can have multiple breakpoints, say for a small-screen phone, then a large-screen phone, then a tablet, then a laptop/desktop. Many teams try to decide on breakpoints using average screen sizes.
However, it’s better to look at what the content and navigation wants to be. By letting the content and navigation drive the breakpoints, teams find they can often get away with fewer screen configurations. For example, a high-resolution Retina iPad might easily share the same configuration as a well-constructed laptop display, while lower resolution tablets might just need a little adjustment to that same configuration.
Our experience at Mark Boulton Design is that we can actually tend towards more breakpoints than fewer if we take the approach of optimisation rather than a device-centric, display-size approach. We’re moving towards including all media-queries in-line in the CSS, rather than abstracting them into their own 480.css file, and we keep the big macro-layout changes in the Gridset CSS. But, interestingly, what we’re seeing is we have less styles associated with more breakpoints as we’re not creating a whole slew of different, fixed layouts and all that goes with that.
‘But, what is content-out design?’
I first discussed the idea of content-out design in the context of a page. A page with edges that is used to define an aesthetically pleasing layout within. On the web – especially the responsive web – we don’t have edges, so it’s best to define your layout from your content. But – and I get asked this a lot – what does that actually mean in practice?
Firstly, it means defining your grids (your big macro break-points, and the columns and what-not) from actual content and not from devices or screen widths. This could be the size of an image, or an ad-unit, or the typographic measure. Just some ‘fixed’ constraint. This will give you your grids.
As you’re building out your responsive design, you should be focussed on watching how the content adapts as the viewport changes. Somethings I look out for:
Type size and leading. Does it need to change?
White space (macro and micro). Do you need to adjust margins and padding?
Vertical space. Do you need to reduce it and make the content more or less dense?
Flow. How is the readers eye movement going to change as you change these elements?
Words. Are there now too many on one line? Or too few?
Source order. Are the right things in the right place?
Focus on the in-between
Content-out design means defining your underpinning design structure from your content, and then focusing on what happens in between ‘layouts’. This approach of optimising your design by adding media queries (I like to call these optimisation points than break points, because nothing is broken without them, just better), means you are always looking at your content as you’re working. You become more aware of the micro-details of how the content behaves in a fluid context because your focus shifts from controlling the design in the form of pages, to one of guiding the design between pages.
I find this period of change we’re in right now fascinating. Not only is centuries old design theory being rewritten, but the process of how design happens is changing too. It’s becoming more collaborative, more fluid, lower fidelity. Less about being squirrelled away in a dark corner crafting a beautiful thing, and more about scribbling away in public and repeatedly throwing our work in a big trash can. And the more we’re doing that, the better we’re getting.
Optimisation points are just one way we can start thinking content-out. And thinking content-out is what we need to be doing to create truly native experiences on the web – wherever the web is.