Wait what? How to Enhance your Responsive Process with Content Questions

Many of the challenges that come from building a responsive site are based not in the technical implementation, but in the content. All your copy is now readable on a small screen, but is it useful there? Is it still serving the site and business goals? Who's actually going to write those blog posts?

We’ll talk about some approaches that content strategists use to figure out how (and if!) content should be displayed on your site, whether you’re dealing with a heavy archive of articles or a nimble webapp. We’ll explore common techniques and questions you can integrate into your workflow that will help you and your client think through the long-term content needs and goals of a new site.

Full text transcript at http://webmeadow.com/blog/archives/201405/wait-what-how-enhance-your-responsive-process-with-content-questions

Transcript

1. I’m a Content Strategist. I came to content strategy through back-end development - PHP, server administration, and CMSes. I’ve worked on a lot of responsive projects, from big corporate sites to cute local organic farms. ! And I know not _every project has the budget, or dare I say the need for a full-time content strategist. ! But that doesn’t mean you can ignore content. It just means, you - designer or developer - need ask the content questions. ! Some of this will feel familiar, because you’re already doing strategy. Strategy is about thinking things through, keeping an eye on the big picture. You’re already doing that with Design & Development, so we’re expanding the questions to cover content as well.
2. Responsive Design is a great excuse for getting people to pay attention to their content. ! Because they care about mobile users. That’s why they’re doing responsive in the first place. Everyone’s all jazz-hands about mobile.
3. ! That tiny phone screen makes the best scapegoat: • “We need to format this content more cleanly, because: tiny screen.” • “I think we should get rid of this section (that no one reads) because: tiny screen.” ! You can totally take advantage of that. I am giving you permission to channel some of that mobile excitement about your projects into spending time on content questions. I promise: it will pay you back 10-fold.
4. I’m going to go over content questions you can work into your existing process in the three different phases of a project: Definition & Discovery, Design & Development, and Post-Launch. We’ll start with Definition & Discovery. !
5. In the very beginning of a project, your fundamental issue is that most clients don’t understand the importance of content. We all tend to be very focused on features, and very distracted by shiny things. ! Part of what you need to do to show the benefit of putting effort and attention and budget on content. ! Questions to explore during Definition & Discovery are: What’s the content going to do on this site? Where’s it going to come from? ! Those are pretty broad questions; so let’s talk through a framework for exploring them. I like running an exercise in User Journey Mapping.
6. This is a great exercise for kickoff, or early in a project. It’s also very flexible, and you can easily tweak it to double as a design exercise, or a jumping- off-point for a features discussion. ! Let’s say the client is a Party Supply Company. Give a your group a very specific customer scenario like “Alex wants to rent a bouncy castle for his son’s 5th birthday”. ! If it’s a big meeting, divide them into groups and give each group different scenario.
7. We’re going to map out the entire user journey. Post-its are the best tool for this. ! Start with some anchor points in the process, like: 1. Decision to get a bouncy castle 2. Checkout button 3. Castle delivery
8. Fill in all the customer steps along the user journey. They don’t need to be universal steps; this exercise works better with specifics for one user rather than generalities So remind your team that they don’t need to explore every possible path. Just focus on this one path. ! The reason for starting with some anchor points is to give them a sense of scale. Otherwise it’s pretty common that 75% of the way through their time they’ll have only just covered the first part of the story.
9. Once you’ve got steps for the full journey, identify each decision point in this user journey where sale could be lost. These are places where, during the buying process, if the user is confused or annoyed, they might give up, and say “SCREW IT. We’re going to ChuckECheese.” ! Outline those post-its in red Sharpie. Make them obvious. (Did you know that federal law requires all kickoff meetings to use a red sharpie at some point in the process? It’s true. Be safe out there.) !
10. Then zoom in on each decision point, and ask: What information could you give the user to tip their decision in your favor? ! For example: if the decision point is What size bouncy castle should I get? There are a lot of factors, like weight limits and the maximum number of kids, and features like slides and climbing walls. That can get pretty complex. What kind of information could make that decision easier? Maybe something like a table that laid out the different features in a matrix. ! Put content that exists above the line, and Content that they would need to create below the line. As you go through each of these decision points, you’re going to end up with a full user timeline, and you’ve just walked your stakeholders through exploring a bunch of ways that content - not features or shiny widgets - can help users through their site Some content they’ll identify doesn’t exist yet, and they’ll have to decide if they want to put the effort in to produce it. ! Other content already exists, maybe on their old website, or in brochures or other media. Your client will also say, “Hey, we already have some if this! We will send it right over.” And now — you’ve got a new problem.
11. Responsive design accentuates some really common web content problems. ! Namely: there’s too much content, it’s poorly formatted, there’s way too much content, and it’s really poorly formatted. !
12. The questions to ask ourselves here are: How can they not see that this content is really terrible? And what can we do to help? ! Here’s the thing: they can’t see that this content is terrible. They don’t see. Not because they’re not smart, or they have no taste. This is just not their medium. ! They run a party store, or an animal shelter, or a clothing company, or a bank. They do not have lunchtime discussions about webfont kerning. ! This tiny screen is not their workspace. It’s yours. They hired you to help them get this right. ! So you can’t just tell them what’s wrong: “This is too much text.” That is not helpful. You have to show them. ! Fortunately! One of the easiest ways to show them is also incredibly effective.
13. Code up a super-simple HTML page. If you have some design language decisions settled, add in their logo and use their palette, just to make this feel like a really simple version of their site. ! Then, paste in text they’ve sent you. Just do a straight copy of that About Us page that’s a single 400-sentence paragraph. ! So you make this simple page, then send them the link.
14. And ask them, “Please check this link out on your phone.” ! This is a rich time for nudging: • “On a small screen, this feels like a lot of text to scroll through!” • “Maybe this could be trimmed down.” • “This could be divided into sections to help people find their way through it.” ! In context, showing this content on a small screen, it’s easier to see how the wall of text is a terrible experience. ! So let’s say you show them the wall of text, and they get it. They cringe. “Yes! This needs to be better!” OK, good. How can we help them make it better?
15. Books! As with so many things, the answer is books. The Elements of Style, by Strunk & White, is a great place to start. It’s more about language, and being straightforward and clear in your word choice. It’s about not using jargon, and is very focused on writing clearly. Letting Go of the Words, by Ginny Redish, is more about structure and formatting. It’s got great information about how to break up long text with headers, when to use lists and tables, and is really focused on writing for the web. These are both great books to flip through - you don’t have to read them cover-to-cover. They’re also full of great before/after examples, so they’re not just telling how to write better, they’re showing you. You might consider starting your projects with these books, so your clients don’t feel like you’re making a judgement on their content (even though you totally are) partway through the process.
16. Alright, so we’ve gone through a discovery phase, and now it’s time to move into design and development.
17. “Too much content” sometimes means format like a wall-of-text, but sometimes means you have a lot of individual pieces of content. ! Some of these pieces are just straight-up useless (I’m looking at you, Letter from the President!). But sometimes they’re all good, legit pieces of content! Justifiable, and useful and still — So much content. ! The questions to ask ourselves here are:
18. What order should the content go in, and is there content we can hide on a small screen? ! Let’s tackle the first question. If you’re building a site that’s responsive, that pretty much means you’re going single column on the smallest screens. ! This is a great opportunity to figure out what content is the most important. What deserves to be at the top of the page? ! When I know my content chunks - nav, upcoming events, author bio - I do an exercise with my client that I call: The World’s Most Boring Wireframe.
19. Take all those chunks, put them in a single column. You can do this in HTML or something like Omnigraffle, but this is another exercise I like with post-its. Work through the content with your client. What’s the point of this page? What should be at the top so the user can get their job done? Play through variations, and figure out what works. ! This seems lame, right? Like: duh - yes, thank you, I will do my job and put the content in the right order. ! I had a call from a client couple weeks ago (for an ecommerce-y kinda site) and he told me he’d been able to defend our design decisions to his executive team because he understood the information hierarchy because we had done this exercise. ! FRIENDS. That is a conversation w ornery executives that I did not have to have. In my book, there is no bigger win. There is a larger benefit to teaching clients the whys and hows of your decisions.
20. So you’ve worked out the basic wireframe, and you’ve got an order for the single column. Now you’re working on a layout for a larger screen. And the source order really doesn’t match. ! Maybe on the small screen this orange div lives above the main content block, but on a small screen it’s going to be off on the top of the sidebar. ! Now, this is a simple example - you could fix this with straight CSS, or something like the regions polyfill. You “could” do anything with CSS, but at some point: you’ve got better things to do with your time. ! Those crazy kids at Filament Group have built us a nice little solution to this problem: AppendAround.
21. AppendAround is a little JS doodle that lets you declare different potential locations for chunks of content in your source code. ! You declare a few places in the source that this orange block could be displayed, and then the script moves your code to a particular spot, based on breakpoints. ! If you find yourself using it extensively? Explore why your information hierarchy is so different from small-to-large screen; that may indicate some sort of larger underlying disconnect. ! This is a great little script, and one of those places where a little JS can save you hours of CSS time.
22. This brings us to the Big Question: Is there content we can just hide on a small screen? Seems like an obvious path, right? Small screen, less content! ! But of course, people on small screens don’t want less information. They don’t want a cropped experience. ! But!!!! The screen is really just very tiny. So, sometimes you have to hide content. I see two common patterns:
23. #1: Hiding content behind a “Read More”. On a big screen, you show whole article body. On a smaller screen, you show 1st paragraph and a Read More that expands the text. It’s not a bad way to go.
24. ! There are a couple of things to remember, if you take that path. 1) Show content by default, then hide it with JavaScript. That way if the JS loading freaks out, the content is still there. If you hide it with a display:none in the CSS and rely on the JS to change that, there’s no way for a broken JS person to get to the content. ! 2) Also remember: The whole page is still being loaded (pictures, text, etc). Be mindful of page weight. Just because you don’t see it doesn’t mean it’s not being downloaded. !
25. #2: Truncation. Something like: where you normally display the whole teaser, show just the title on a small screen. ! If you’re going to truncate, make sure content structure and editorial decisions support truncation. In a full teaser, these titles are cute and funny. But by themselves?? This first one [“Spring for a Party!”] is uselessly vague, and the second [“Colorful Rubber Orbs of Joy”] is straight-up creepy. ! Truncation, by itself, is not a content strategy. It has to be combined with structural & editorial rules to make sense. ! Before you make the design decision to truncate, put your strategy hat on, and start to think through what truncation will mean for site users and for your site maintainers.
26. Maybe, if you’re going to truncate the display, you decide: all the titles need be practical. ! Very functional, but maybe a little boring. These post titles [“New Store on Spring Street”, “We Have Party Balloons”] just lost some of their fun & style. !
27. Maybe…we go halvsies: a fun version for when you’re showing the title with a teaser and picture, and a descriptive version for when the title is shown by itself. This could be a good solution! But now you’ve altered your content model - you’ve got two versions of the title. You have to ask: Is there author budget and skill to support writing two separate titles? If there’s legacy content, is someone going to go back and create new titles for the entire backlog? ! This kind of thing comes up a lot: this intersection of editorial & structural content questions. It’s very tempting to try to solve this stuff with a clever CMS feature, like “Conditional form fields” or “We’ll reuse the categories from the event calendar”. Every structural choices has an editorial effect. At the smallest level: you’re changing the way people will create content for the site. At a larger level, you may actually be messing with someone’s job description. You may entirely change their responsibilities, or make some of their work completely obselete. And let me tell you, people get antsy about that kind of thing.
28. This brings us to post-launch. ! This is a bit tricky, because the kinds of questions that come up during post-launch, you really need to be thinking about during discovery and development. ! This is a very much a preventative mindset here. !
29. Questions like: When do new events get added to the calendar? Who’s writing the next blog post? What’s this field for, exactly? ! I am a huge fan of building a lot of training and help into the authoring experience.
30. What does that look like? ! If you build in a CMS: install a nice admin theme, and pare down what people can potentially break in the backend. You can do that through roles and permissions, and by doing things like setting up quick links so they don’t have to dig to find their common tasks. ! Build a content guide into their CMS - not a writing guide, but an explanation of their content types, what each field is for, where it’s displayed, and so on. ! Keep in mind that at the time the site launches, there is a good chance that you, the developer, are the only person who has a complete understanding of the content types and relationships on their site. !
31. You want to transfer that knowledge, so customize help text on fields and edit pages, and include style reminders for fields. Things like “short & funny” and “don’t include the author in this field”. Remind authors in the edit page what the fields are for, where they’re being used, maybe even include example content.
32. ! Use really specific labeling for all your content types and fields. If you’re building out an Author biography, name the field “Author Name” not “title”, and “Biography text” instead of “body”. ! Build in all the help you can for your authors.
33. You’re also going to need to start discussions about ongoing content creation. ! A classic approach here is the editorial calendar - “We post to Facebook on Mondays, Twitter every other Thursday, and Newsletters go out on opposite Tuesdays.” ! This can work well if the client has dedicated editorial staff, whose job is explicitly to create website content. An editorial calendar works much less well if Alice from Accounting is now being tasked with writing a blog post every week. ! If content creation is being tacked onto existing employees, who already have full-time jobs, it’s not going to turn out well.
34. I am a big fan, instead, of a trigger-based workflow. Trigger-based workflow Something happens internally at the business, and it sets a series of events in motion. For example, let’s say our Party Supply company now offers a petting zoo for rent. 1. List in the website catalog 2. Next day: tweet a photo 3. Day after that: Facebook story 4. Day after that: Facebook and twitter again w coupon 5. Friday: send out a newsletter It’s like a Rube Goldberg machine of content work, sparked by an internal trigger. These can be much more manageable, because the web content is being tied to existing processes, and makes a lot more sense than something arbitrary like a calendar. !
35. Post launch questions also mean starting these conversations with your client: who adds new content? Who removes old content? What’s the workflow for getting stuff on the site? ! Now, it is very easy to feel like this is not your job at all. All this stuff: content reuse, editorial guidelines, publishing calendars? “I built the website. These questions are about running the business.” Fair enough, I get that. ! But we’ve all launched sites, where you go back a year later, there’s still just that first post: “Welcome to our new blog!” I can’t call those sites successful. ! If no one pays attention to the content, the website fails.
36. Putting some of your attention on content - the same way you put some on typography, some on colors, some on custom illustrations - makes for a better site. ! Your clients will be happier because their site is more effective and working better for them. ! You’ll be happier, because the work is so much more satisfying when you are building things that people use and enjoy, and you know you’re solving beyond the most immediate problems. ! Remember that you’re being asked to build a responsive site because they want to reach the mobile user. So you don’t need to create the excitement - it’s already there. ! You just need to divert a little bit of that energy towards answering content questions.
37. Thank you!