Karen McGrane – Adapting Your Content for Mobile
Podcast: Play in new window | Download (Duration: 31:09 — 0.0KB)
Subscribe: iTunes | Android | RSS
As more web capable devices hit the market, designers need to consider where and how their designs will be seen. Unfortunately, the same consideration isn’t always made when it comes to content. With design changing so much in a multichannel environment, content must be structured independent of how it will eventually look.
Content touches all aspects of a design. Having presentation independent content allows for it to adapt to different screens and devices. Karen McGrane suggests that having the specifics of how the content will be structured in place first, allows for the freedom and flexibility to make the right design choices.
Karen says that the advent of WYSIWYG editors shifted focus to the wrong things at the wrong time. Content took a backseat to the overall look of the design. Thinking about content first, over how it will appear, helps ensure you’re communicating the right message.
Recorded: December, 2012
[ Subscribe to our podcast via 
←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
Full Transcript.
Jared Spool: Hello, everyone. Welcome to yet one more episode of the SpoolCast, the little podcast we do to bring up your UX goodness. Today we’re going to bring it up quite a bit, because I’ve got with me here the wonderful, amazing Karen McGrane, one of my favoritest people on the planet.
I don’t know if you know this, but Karen is speaking at our upcoming UX Immersion Conference, which is going to be in Seattle April 22 through 24. It’s all about mobile this year. She’s going to be talking on content strategy for mobile, which, by an amazing coincidence, is the exact title of her brand-new book from A Book Apart, “Content Strategy for Mobile.” Today we’re going to talk to Karen about, surprise, content strategy for mobile.
Hey, Karen.
Karen McGrane: Hi. Good morning.
Jared: Good morning. This book is almost perfect. The one un-perfect thing is that you were suffering for quotes so you added one of mine to the very end of the back of the book. But beyond that, it is really quite a great book. It never occurred to me that content strategy would be different for mobile. When did it first occur to you that this was more than just a blog post?
Karen: Well, I had been giving a talk last year called “Adapting Ourselves to Adaptive Content.”
Jared: Yeah, I’ve seen it. It’s awesome.
Karen: I will confess, when I wrote that talk, I thought it was going to be sort of an obscure topic. Structured content for multichannel publishing seemed like, “Wow, this is a bit esoteric.” Honestly, for my 15 years of being a user-experience professional, I was really surprised at the positive reception that I got to that talk.
Most important, I got a very positive reception from Jeffrey Zeldman, who, every time I gave that talk at An Event Apart, he would come up to me after I got off stage and say, “You have to write this book.” The first couple of times he said that, I was like, “Eh… Writing a book sounds hard! I don’t want to write a book! Can’t I just write a blog post?”
Jared: Exactly.
Karen: Right?
Jared: I know. [laughs]
Karen: Then, after the third time he asked me, a light bulb went on over my head that was like, “I would be an idiot not to write this book.”
That’s how I wound up taking a good six months of my life and writing what…
When I was writing it, I tried to imagine myself writing many blog posts rather than…
It’s intimidating to say, “OK, today I’m going to wake up and write a book.” But it wasn’t as intimidating to wake up and think, “No, I’m going to write a blog post on a topic that’s interesting to me, and then eventually I will add in all the connective tissue that will make it a book.”
Jared: What strikes me about this book is that it really does talk to this area that is really sort of new. Mobile has really only sprouted out in the last few years, since the iPhone made going to websites fashionable.
The idea that companies do something that isn’t just “Create a special mobile website that has special mobile content” or “Let’s just take things and put everything in PDF form,” to actually say, “OK, we have to think about how we do this and structure and model and come up with a whole strategy around how we produce things that work on every platform.
That, to me, it feels very nascent, it feels like everybody’s sort of in the Wild West of that right now. Do you think it’s settling down, or does it feel that way to you?
Karen: No, it feels like total Wild West. I keep describing it as, it reminds me of what it was like working on the web back in 1997 when everything was new and chaotic. People didn’t have the right tools, they didn’t have the right decision making frameworks. Everything you wanted to do seemed complicated and challenging.
And I love it. It’s a great opportunity to kind of go back to first principles in a way and fix some of the things that we’ve been doing wrong over the last 10 or 15 years. Many organizations that I talk to are really struggling with the problem of, how to we get our web content or our content in general, how do we get that onto mobile devices?
Many of them have figured out, “Oh right, we need to offer some simple transactional functionality.” Like I’m working with a lot of banks right now, and banking, for five years, since the iPhone came out, they recognized the importance of offering current customers the ability to do some transactions online. Whatever online banking functionality they had, they built mobile apps that can do that.
But what they haven’t figured out is, what are they going to do about all of their content? What are they going to do about all of the stuff that they’re publishing on their public facing website? When you look at the data about mobile users, who’s on mobile, how frequently people engage on mobile, what they’re doing on mobile .
You realize, “This isn’t some abstract, theoretical thing.” Like, “Oh wow, maybe we should think about getting our content on mobile. Customers are there. They’re there right now. Now is the time to do something about it.”
Jared: We were just looking at our site statistics and we’re blown away that almost a third of our site visitors are on mobile, according to Google analytics. That’s just crazy.
Karen: It is. I have seen data from lots of organizations that show 10, 20, 30 percent of their traffic is coming in from mobile devices. Really shocking numbers about painful experiences that people are willing to go through using a site that’s formatted for the desktop on their mobile device. We’re failing people.
That fact that for many of us who are expert web users, the fact that we manage to suffer through having to pinch and zoom our way through a site that’s designed for a much bigger screen, that doesn’t make it OK. It doesn’t make it what we should settle for.
One of the things that I’ve seen is that when organizations decide to invest in building a true mobile site they’re really surprised by how much those numbers go up. So if you’re seeing 10 or 20 percent of your traffic coming on mobile devices to a desktop optimized site that number will probably double when you build a mobile site.
Jared: Yeah, and I just saw a tweet from one of the developers at NPR saying that just a few months ago they didn’t have a single responsive page on their site. Now they have half a million responsive pages. I got to think that’s because of their content strategy, that they happen to fall into this content strategy. That lets them take that content and put it out in that new form, and with a small team and a budget that’s paid for by “Pledge Week.”
Karen: By viewers like you.
Jared: Yeah, [laughs] viewers like me, or listeners, I guess. And don’t forget Charles D. and Catherine T. MacArthur, or as we call them in the house, “Chuck and Katie.”
Karen: [laughs]
Jared: …that somehow they were able to get all that content pretty much easily poured into those responsive frames pretty quickly. I’ve seen you talk about the NPR strategy, and it seems nothing short of just brilliant.
Karen: It’s everybody’s favorite case study. People like talking about it because it is such a simple, straightforward, easily understandable example of what it means to truly separate content from form, what it means to truly break away from the idea that our content is going to live in a particular place that the content strategy and the content structure should be determined by what the site looks like.
To finally say, “Oh, right, we can’t do that anymore.” Mobile is going to be the final nail in that coffin to say instead, “We’re going to have to think about content and how it’s structured as being independent from how it’s going to look or independent from the particular platform or device it’s going to live on.”
NPR started working on this strategy five years ago, frankly before most of the devices that their content can now live on even existed. And the investment that they made in developing structured presentation independent content has really paid off for them.
What it means is that now when they decide, “Oh, what we should do is we should start building responsive templates,” they can do that much more quickly. Because they don’t have to go back in and try to figure out how to strip their content out of designs or templates where the content is all mixed up with the formatting, and so having done that they can focus on making great decisions about how the new responsive site should be designed.
They can focus on making the right interaction design decisions, the right aesthetic decisions for that platform or for that channel because they’re not having to go back in and figure out, “Oh, wait, what do we want to do with our content?” They’ve already made those decisions.
Jared: Yeah, it just feels to me like they were the ones who have demonstrated to the world the loudest about the value of making that upfront investment, because making a good content strategy, that’s not an inexpensive investment. You’ve got to have commitment there to do it.
Karen: Yeah. It’s something that you have to make choices that you then have to live with, or you have to say, “OK, great. This is how our content is going to be structured. We’re going to have these content elements, and we’re not going to have those content elements.”
It means that then when your designers go to work on your new responsive templates they don’t always get to do exactly what they want. They don’t get to say, “Oh, you know what I would like is this 300 by 250 image size will fit perfectly here.” It’s like, “You don’t have a 300 by 250 image size. You are going to use that 300 by 200 and make it work.”
Same thing. I use NPR as a best practice example all the time, but they actually only cut one headline, and so if you go to their iPhone application they actually wind up doing something I tell organizations not to do all the time. I joke about it, which is they truncate their headlines.
You go in, and they run out of space, and they drop in an ellipsis. You look at that and you’re like, “No, NPR, No!” But the truth is, they made a decision a while back, that they were only going to cut one form of that headline. That’s what they had to work with.
Jared: So, it really is a “pay now or pay later” deal.
Karen: Right. And if you pay now, it’s much cheaper. It is expensive to set up a content strategy, and it is. But better to do the planning and make some decisions now, than it is to constantly be going back and having to strip things out for previous platforms. Do the work over again every time you want to get your content onto a new platform.
Jared: So, it does seem to me though, that teams that manage to get into their budget a time machine, and can go into the future and see how the content is going to be used, are going to have a much easier job than teams that have to wing it.
Karen: Yes. Time machine is an important part of all of my content strategy recommendations.
Jared: What do you recommend to those folks who just don’t have the budget for the time machine?
Karen: Unfortunately, as with everything on the Web or in the digital space, you have to sometimes make good decisions based on the available information you have now. You can’t predict the future, but you can at least try to look across the range of different uses and make some good decisions about a system. I actually like to talk about image crops as an example of how this works.
Jared: OK, yeah, help me with that.
Karen: So, having worked on sites for many large publishers, you realize, like, “Oh. If you let your designer go in and specify the exact right image size that would fit perfectly in every single design, you would wind up with a million different image sizes.” They’d all be slightly different, and publishers run into this problem and they will eventually go in and say, “No.”
We are not doing that. We are going to cut a handful of different image sizes, maybe five or six, and those are the sizes you’re going to have to work with. And you will choose one of those sizes, it may not fit perfectly. But it’s going to be close enough, and so that’s what you’re going to use.
There’s no way to necessarily anticipate what the exact right size should be, but if you think of it in the system, and you look across the range of possible places that those images might be used, you can get pretty close. You’re not going to be horribly wrong.
One of the issues that we’re running into is that many publishers today, when they’re going to mobile, actually haven’t anticipated that they would need different-sized images for mobile screens. One of the surprising problems I’ve run into, is that they actually don’t have large enough images.
Everybody thinks that mobile images always have to be smaller. But with retina displays, often times what we run into is that the largest image size isn’t large enough to be used to fill the whole screen on a retina iPhone. That’s one of those examples where it’s like OK, well what are we going to do.
We’re either going to have an image that doesn’t fit perfectly or has to be scaled up a little bit so it gets a little crunchy. Or we’re going to have to go back to our production team and say, now we need you to cut another image size. So those are decisions that…
It’s like you could make those in the long term. The fact that that might happen, the fact that you might realize at some point in the future that you don’t have all the content elements or all the image sizes that you want, isn’t a good reason to not do your best of analyzing what the system should be and coming up with some reasonable defaults now.
Jared: So what that means, is, looking hard at what could happen. But it also feels to me like you can do some research and see how are other people moving forward and collecting up the different types of images, or the different types of headlines, or the different lengths of content, and start making a little museum-like collection of inspiration for how other people are doing it.
Saying “Wow, I really like the way they handled this problem. I really like the way these other guys do headlines.” Start figuring it out. The NPR choice to go with a single headline versus having a short version and a long version. Was that an explicit choice of, it’s too hard for our headline writers to come up with this, or was it more the case of it didn’t occur to them until it was too late, and they had too much to go back and change.
Karen: That one, I don’t know the answer to. But I would anticipate that they do cut different sizes of teasers, so perhaps they thought, you know what, we’re just going to go with one canonical headline to make things easier on our writers, or make things easier on our production staff.
I might say maybe the mistake there wasn’t deciding to go with one headline, but rather deciding on a visual design for the app that didn’t allocate enough space for what was, frankly, a known character count.
Jared: Good point. This could be easier to fix because it’s not a matter of going through a million data entries in the CMS and re-editing, as much as re-visiting the visual design choices and saying, “Let’s be a little smarter about this.” You could even do something where the text is variable height, variable font size, based on the actual length that it exists in, right?
Karen: If I were a visual designer, and frankly the world should be grateful that I am not. I would be pretty happy to know the exact characteristics of the content that I had to work with before I started designing. It would make my job easier to say, “Great, I have these pieces to work with.” I have these images of these dimensions, what can I do with this palette, this library of different content elements.
I am very sympathetic to designers who are frustrated by not knowing what the content is going to be, or trying to get clients to be more specific about what content choices they’ve made, or how that content will be structured.
This approach to defining what the reusable content store of structured content will be, actually should make design better. It should make the designer’s job easier. Designers should be advocating for this as much as content strategists do.
Jared: Yeah. This whole idea about having a strategy around content, it touches everything. Right? It touches the interaction design. It touches the visual design. It probably can bleed into the user research when you go out and find out that things like ellipsis at the end of titles as a truncation is not as effective.
In our work, we have found when we’re naming our virtual seminars, we have found through usability testing that having clever plays on words don’t actually work as well as having something that has the right topic in the headline itself.
Knowing what the topic should be and having that there, that all plays into the way we create the content strategy and the way we create the CMS and the way we train people to fill out the CMS and put it in there.
It feels to me like this is not some sort of separate thing that you go off and you hire special people and they go into their special content strategy secret cave and go off and do their thing. Everything gets touched by this.
Karen: It’s true. It involves everything from how the design is going to work to how the CMS is going to be built to what the roles and responsibilities of the team will be. I think it’s extremely powerful to acknowledge that, “Hey, instead of figuring out what it’s going to look like first, what if we figured out what the content’s going to be and how it’s going to be structured?”
That’s going to give us, paradoxically, more freedom and more flexibility to make the right design choices for whatever platform we’re thinking about, because we’ve put this work in up front.
Too often, we assume that the content structure will be defined by what the design should be. You realize too late that that doesn’t work for your team, it doesn’t work in your CMS, it doesn’t actually work in the design and it provides a bad user experience.
Jared: Yeah, and you get those horrible words, “I’m sorry, but we can’t do that.”
Karen: I hate, “Oh, we’re not going to do that.” Honestly, I feel like I’m talking to a lot of organizations right now that are saying, we recognize we’ve been doing this the wrong way on the desktop. We recognize that we’ve been going desktop first and design first and when we start talking about mobile, we want to do it content first.
Jared: When you were putting the book together, was there anything in your research for the book that you sort of came upon, you go, oh my goodness, I just struck gold. Right? I mean, it’s just that sort of surprising moment where it was, before you started doing the research, you didn’t know about this, and then suddenly, this thing walks up and it just changed the way you were approaching things. Did you run into that?
Karen: One of the topics that really, I had a big inspiration around, it was a huge aha moment, was the idea that tools like WYSIWYG, you know, the what you see is what you get formatting bar, or the preview button, really privilege the desktop interface and privilege the design, it really encouraged people to imagine their content in one context.
Jared: Oh. yeah.
Karen: That is, frankly, limiting and dangerous, as you start thinking about, well, what happens to all of that formatting? What happens to all of that styling we’re imagining when we have to take this content to a new platform?
I’ve actually been working on a post right now about a new innovation we’ve come up with that causes very similar problems, which is in-line editing. The idea that the content owner can look at the front end user experience. But have editing tools that are kind of built right into that experience, and click on a box on the screen and go in and go into edit mode right from that spot.
There are powerful reasons why sometimes that is compelling. It’s the use case of, “Oh, I saw a typo and I want to go in and fix that really quickly.”
But the downside is that you’re encouraging your content owner to imagine that there’s nothing to the content other than what the user sees. You take them away from all of the metadata and all of the back end content structure that, frankly, in my mind is way more important. Particularly as you’re thinking about the idea that now this content’s going to live in lots of different places.
I think we’re going to see some interesting years, interesting developments in the CMS space, where one path is going to take us more toward a tighter connection between design and content. The path that I’m on is going to say, “Hey, content creators need to break away from imagining how things look and focus much more on what things are and what they mean.”
Jared: This is really interesting. I was actually just thinking about this morning, because I was reminded about what it was like to edit a document in the ’60s and ’70s. We don’t talk about this ever. But at the time, the storage devices were not random access. You had tape. You had to fast forward to a place in the tape, and if you were going to edit something, you had to do in place in the tape.
You had all these commands that would let you move forward and backwards and deal with the content serially. You would work on things a line at a time and you would actually store it temporarily in memory because memory was very expensive. You would store something in memory and you would edit it in memory.
Then you would save it out and it would have to rewrite the piece of the medium that it was doing, but it couldn’t collide with something that came after it or before it. It was really tricky. You had these very arcane things. There was a program called Teco, T-E-C-O, which was a tape editing program that I grew up with in the ’70s.
You could do amazing things with it. WYSIWYG, being able to see what you are editing, that didn’t come for another 20 years. It was miraculous when it showed up. Now, we take it for granted. It’s like listening to your grandpa talking about listening to radio shows and saying, “Oh my gosh, they were so much vivid when they were on the radio than they are when you see them on the TV.” There’s something to that, right?
There’s this idea that, by having such high fidelity of the result on the screen, you focus on the wrong things. You don’t ask the question in the case of content, well, what will this look like when it’s displayed someplace else? What will this sound like when it’s in a screen reader? What could this look like in a different form factor? We get stuck.
Karen: Exactly. We get so focused on imagining what something’s going to look like that we forget that our real job is to make sure that we communicate the right meaning, the right messages and that the content is structured appropriately.
I’m often reminded of the advent of WYSIWYG, meaning that now you have highly paid executives sitting around, dicking around with the font and the margins on their business letters. That’s not really a good use of your time. Or more to the point, your focusing on styling of your communication is actually taking you away from what you should really be focused on, which is, what are you trying to say?
Jared: Well, it’s interesting. I remember, because I worked on some of the first word processors. I remember that, at the time that those first word processors were coming out, some Japanese executive. It was the CEO of Sony or somebody was deriding American executives for having all these personal computers and now doing their own word processing. Saying that, you are taking powerful executives and turning them into secretaries.
It seemed like an obnoxious statement at the time, but there was this hidden truth underneath it. Which is, we are changing the focus from the message to the medium. Maybe that shift, that pendulum swing was a little too far.
Karen: Agreed. You see that on the web all the time, that we are trying to make the web make sense to us by telling people that it works just like Microsoft Word. Asking them to imagine that their control over the experience and their control of what something’s going to look like and how it’s going to work will be as stable and as fixed as them printing out their document on the laser printer that sits next to their desk.
The Web doesn’t work that way. The web’s never worked that way. But we’ve allowed people to imagine that it does.
Jared: Yeah, Word doesn’t even work that way.
Karen: Exactly.
Jared: Wow. This has been great. I am really excited for the workshop, because you’re going to help us really understand how to take this problem apart. Break it down to pieces and deal with the fact that we can’t get management to buy us that time machine. Instead, have to come up with more present day strategies for figuring out what our future content is going to need to be.
That’s really exciting. I wish in our conference, we could have required workshops, because I think I would make yours required for everybody.
Karen: Well, you run the conference. You could totally make them take my workshop in order to get course credit.
Jared: Ooh. I could do that. That’d be awesome. Maybe they’d have to take the workshop just to be able to get a drink ticket.
Karen: Ooh. I’d do that.
[laughter]
Jared: Hey, Karen, thank you so much for taking time to talk with me today. This has been awesome as always.
Karen: Thank you for taking time. I enjoy our conversations very much.
Jared: Excellent. I want to thank our audience for taking the time to listen to Karen and me talk about this topic today. I think this is a really exciting topic. I’m hoping you got a lot out of it.
You, of course, can catch Karen at the UX Immersion Mobile Conference which is going to be in Seattle, April 22 to 24. Of course, if you haven’t done so, you need to go right now and buy a copy of Karen’s “Content Strategy for Mobile,” which is from A Book Apart, the fabulous publishers. In fact, you should buy several, because they make great gifts. You will not be disappointed.
Thank you again for listening. Of course, as always, thank you for encouraging our behavior. We will talk to you soon. Take care.