Content-First Movement

I’ve been researching and trying to implement this topic a lot over the last year. Since this is my first journal post I figured it should be based on the topic that I’m so deeply focused on right now — and that’s content first.

For designers, its essential to have content (or at least a wireframe of the content hierarchy) along with your calls to action to start designing. This goes for editors too. AND why I say that, if everyone starts with content — there will be more collaboration between teams.

What you want to do is talk, type and re­-write — over and over again until everyone is happy with the direction the project is taking. This helps the team put in place the structure for a terrific user experience. It doesn’t matter what tools you use, you just need to explore the main point of your page. At first, you can start with simple boxes with section titles in them and then the calls to action for the users journey.

It helps to ask yourself…what is the purpose of this page? What are we providing to the user? What do we want the user to do? Where do we want to take our users? That should help you write the bones of your CTAs and try to keep them as lean as possible. “Less is more” should always be in the back of your mind.

So now that you have set up your CTAs, lets keep it simple and say there’s five links on your page. Three are navigational points to take your user to see more related content. The point here, we don’t want to overwhelm users with too much deep content for a level one page. Keeping it micro will allow you to place more links to deeper leveled pages on your level ones.

These three links should be short and engaging descriptions to a full read. Not a ‘read more’, ‘read article’, ‘view video’ or even a skeuomorphic button. Why? We need to remember that these links are not just viewed on the page you’re designing. Half of the content you write will be seen by users that never even land on your page.

How? Search engines.

Users will google what they are looking for and sometimes it’s easier to find the info they are looking for when they can’t find it on your site. Another way is the simple search — the results will show your content. Many times that content will be copy and pasted so it should be modular and micro ready for travel because it’s going places… Twitter, blogs, wikis. You name it, it’s out there and there’s no bringing it back.

Getting back to the page user, they just want to read the entire story so it needs to be clear in under ten words where they are going to go when they tap/click your headline.

So keeping with our example we have two more links left. Lets call these our important or main CTAs. We brought this user to our page for two things, to see if they need more info on three separate topics but also to take a main course of action. These links should be bigger and not lacking in contrast or white space. They should be crystal clear in pointing to the main focus you want them to take. This could be a short and power set of words but the full story can be as long as it needs to be.

Now that we’ve covered links lets talk about content choreography. We’re now writing for phones, tablets, desktops, and TV’s — so we need to plan how the hierarchy will alter the chunks of copy. On TV and desktop, we’ll obviously have a lot of real estate but for smaller screens we’re going to need to reposition our content.

We can simply collapse three columns into one but we can also think through if the needs of our mobile user differs from the needs of our desktop users. That’s where the choreography comes in. We can move our A, B, and C chunks to B, A, C if it makes sense. And this takes us to always writing and designing mobile first.

I’d argue that mobile­ first forces you to also be content­-first. When you limit yourself to writing to 320 pixels wide you really simplify the process. That should alleviate some stress too because a 8.5 inch page is huge compared to 320 pixels. You can get carried away. Chances are 50% of your users are on their phone so the content should be clear and direct to what you’re trying to communicate. They could be walking, riding a bike or traditionally on their desktop. The point is, in the long run, it’s easier to use progressive enhancement than graceful degradation.

Now the fun part! The tools we can use to write and wireframe copy. We can always use MS Word, but don’t write at 8.5″ width, write at 4″ width. You can use text edit with the same methodology. And remember play with type size too. A good base font size is 16px. Helping the designer with basic things like this go a long way.

There’s also great new collaborative tools like Editorally, Quip and Penflip. These tools are amazingly innovative. You can write comments on sections or words and share that with the team with email updates to the entire team or certain members. As a manager or supportive role you can always check in without anyone needing to know so you still feel a part of the project but don’t necessarily need to have a meeting check in.




Posted in: My Thoughts