Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 17 2013

09:48

Monday Q&A: Designer David Wright, departing NPR for Twitter, has just one favor to ask

David Wright is an award-winning designer who, in his time at NPR, worked on everything from their mobile music platform to NPR’s homepage design. Wright has spent a lot of time sharing his design philosophy with the news world, trying to explain how he built what he built, but also trying to make news managers understand the importance of making design a priority early on.

But now, Wright is leaving the news world behind — sort of. He’ll be moving over to Twitter, to work with what he considers an all-star team of web platform designers. (He joins API whiz Daniel Jacobson, now at Netflix, as NPR talent to move to prominent positions in the technology world — not the most common path.) Though not entirely sure what projects he’ll be working on, Wright says he has a lot of big ideas for simplifying Twitter and making it a bigger part of a variety of websites. And while he won’t be working in a newsroom anymore, Wright predicts he’ll learn a lot about how people are sharing and consuming information that could, down the road, be of great value to publishers.

Days before his final departure, we chatted about building platforms for distribution of audio, narrowcasting, Twitter on steroids, and World War II-era telephone operators.

O’Donovan: So! Obviously, there’s a lot of exciting stuff going on for you. How does it feel to be packing up and heading out of NPR?
Wright: I think that I have not yet realized how hard it will be for me to walk out of this building on Friday afternoon.

There’s a lot of really amazing stuff going on here, and it’s bittersweet because I’ve been really excited about what we’ve done here, and I don’t know if I really realize what it will be like to leave some of this amazing work unfinished.

O’Donovan: What are some of the bigger projects that are hanging out there, that you’re passing on? How do you and with whom do you hope to see them completed?
Wright: Well, that they will be completed is not really a question. They will be. The big ones that are going on right now are — the most obvious one is we’re in the midst of a fully responsive redesign of NPR.org that we began last fall and are picking away at, section by section. We’ve recently launched the small screen version of a redesigned and rethought homepage, and soon we’ll be releasing that to more viewports and moving on to the rest of the important pages, not just NPR.org. So that’s exciting. And I think in many ways the team is moving at a breakneck pace and I’ll be excited when the whole site kind of is finally launched in this unified rethought visual vocabulary. It’s amazing work, I”m super proud of it and the team that’s in the trench right now.

The other one that’s cool is one we haven’t really launched publicly yet, but we’re thinking a lot about what a reimagined kind of radio experience would feel like — taking some of the best of on-demand pieces that we know and love from services like Rdio and Spotify and Pandora and thinking about how public radio fits into that picture. So a lot of experiments that we’re taking small steps with. It’ll make me sad to not really be as involved with those anymore.

O’Donovan: The last couple years, you’ve spoken a lot about how you think about design and the fact that it’s different from storytelling. Can you talk a little about how — and I know it’s obviously been a dynamic experience — how your philosophy there has changed over time and if there are any big elements of it that have changed since you started?
Wright: I think that obviously the more that I’ve worked with what has become here, over the time that I’ve worked at NPR, the product team has really become a — I thought we were pretty high performing when I got here, but the kind of talent that we’ve been able to add to the team, and the methods and the processes that we use to create digital products has become more and more refined over time. I think that it’s fair to say that any of my thoughts that I’ve shared publicly are certainly the synthesis of my ideas, but they’re so greatly informed by the amazing people that I’ve worked with here.

So I think as we’ve gotten better at making stuff, my thoughts and how we could refine the process has really gotten a bit more sharp. But I think what’s most fascinating, and maybe what I’m most proud of leaving this building, is to be able to look back and see what an important part design has been able to play in the making of products here. I think it’s easy for lots of people to recognize that it is an important ingredient, but sometimes it’s hard to get an organization to understand why that is, and I’m really fortunate to have had a lot of really willing people here at NPR who’ve heard that message and have really embraced it. I think that’s changed a lot as we’ve sort of matured on our own, and our own understanding of what makes good products, we’ve really been able to convince a lot of folks here that design is really at the core of helping us figure out what problems to solve and how to solve them and most importantly how to solve them well.

O’Donovan: One of the questions I had for you was: How do you explain to management or people who are really editorially focused the importance of design? You’ve said that it’s the number one problem journalism is facing. Do you still feel that way? And for people who are struggling to make that clear, how would you advise them?
Wright: I think without calling out any specific products that are out there, I think we can all say that we’ve used and experienced journalism on platforms and in different situations that were less than satisfying, and I think just being pretty unbiased about what we think makes a good experience and what we think makes a great experience and what we think makes a terrible experience. They’re easy cases to show. Do we want to be more like this, or do we want to be like this? Nobody argues with the fact that everybody wants to create a good experience, but I think the most important thing that we as design thinkers can do is help explain how design is not really something that is an option.

If you want to create a good product, it can’t be a condition — it has to be something that is an absolute. You must include it, in order to create efficiencies, in your process, and make things that are fantastic and meaningful to people and beautiful and useful. It’s really about calling out these examples and saying: Here’s a perfect case where work design was involved from the beginning and it made this product better. And whether you’re editorial, or you’re a manager or a coder or a designer, you can look at those and from a pretty unbiased point of view say, Yes, you’re right, that’s better because design was involved.

O’Donovan: So, and you can explain to me the extent to which this is accurate, but assuming that you’re taking a step away from designing for news, as you look farther down the road, for people who are still in it, what are the next major hurdles? If you were still working for NPR, what would be the next areas you wanted to tackle?
Wright: I think NPR is a bit of an interesting animal, only because the kind of content that we deal with is a little bit different given how audio-centric much of what we do is. But I think it’s going to be really interesting for organizations who are wrestling with really getting their content to appear how they want to on many different platforms. I think that’s crucial. If a news organization is really not thinking beyond — I’m stating the obvious here  — if a news organization is not thinking beyond the desktop browser, I think that’s going to become much more problematic in the next coming years.

We’ve been really good at building stories and trying to express what I like to call editorial intention in what viewport size on the desktop. We can go to any one of our home pages, anybody in the news business, you can go to a homepage when it’s a papal conclave story or a Boston marathon or an election night, we know those patterns and we’re good at them. We can reflect them well on the desktop.

I think we have a harder time thinking about how to take what editors can do, what news professionals do, how they express themselves in other places, and separating them from the desktop page. So figuring out ways — news professionals need to express hierarchy and importance of stories and that this one is louder than this one — figuring out ways to make sure that works everywhere, I think is going to be a really big challenge for a lot of organizations, but a very important one to solve.

O’Donovan: You said at one point, I think, that you expected to see NPR rather quickly have a larger audience on mobile than they did for desktop. How close are you to that?
Wright: I think, as far as numbers go, we’re not there yet. But a little bit of that is from the hip and it will be interesting to see if history agrees with my proclamation there. I think there are actually more and more organizations who are being, and I can’t really name any off the top of my head, that have definitely read anecdotally about how mobile traffic is something that is catching up for everyone a lot faster than anyone really would have thought. There’s really no surprise in that. I think that should really be expected. If anyone’s paying any attention to any of our competitors in this space, which they all should be, that’s not a big surprise.

But yeah, I think we’re close — I think that every month we’re really seeing traffic growth across the board and most of our platforms and, on the desktop for sure it’s incremental, but it’s really quite a bit more pronounced on the mobile web for us. And I think it can only continue, given the number of devices and potential people that we can reach.

O’Donovan: You mentioned how NPR has a unique situation because of being predominantly audio focused. But I’ve heard from at least a handful of people that there are people out there who really think that it’s going to become a much more important part of everyone’s strategy, in the same way that we talk about video. But there are definitely people who say that audio will become increasingly important. Do you think that there are in your mind any big design takeaways that people who might be looking to get more into the audio game would want to know about?
Wright: Yeah! I think that. I would certainly not claim that NPR has solved every problem in this space, and in fact, I think if you asked a lot of people here, we still have some pretty major problems to solve in terms of how we distribute audio effectively.

I think that SoundCloud is doing a great job of creating some really interesting innovations in the space. Anybody could look at them and say that seems like a really solid platform for audio distribution. I think, for us, the most important thing is to think about why — the distribution could be anybody’s game and I think that, especially for organizations who aren’t very well resourced, nobody wants to. Just like we don’t all want to rebuild the exact same CMS at great expense and very little gain, I don’t know that everybody just wants to invest in building audio delivery platforms.

But I would say that I think it’s so important ot understand why people gravitate toward audio, the same way they gravitate toward video or photography. What is the recipe, or the formula, that goes into creating compelling audio that matters? I think it has much less to do with design of the experience right now and much more to do with what makes great audio great audio. I think we’ve all been fans of podcasts that are amazing, and there are certainly lots and lots of things not produced by a public radio community that are amazing and that we love. There are lots of things that public radio creates that are amazing and we love. But that has a whole lot more to do with the content than the presentation and delivery. There’s lots of room for innovation there. My best advice to anybody who wanted to get into that game, is to really think a lot about why people love it.

O’Donovan: I was looking over some presentations you’ve given in the past, and one of the things that you emphasize is that, while you haven’t served as a storyteller or journalist at NPR, you have taken away from working around journalists not only the importance but the ease with which it is possible to ask questions and get out there and talk to people about the things you want to know about. So I want to move into talking about your next step at Twitter, and how you see that playing into the rest of your career.
Wright: Anybody who wants to be successful at making products has to be able to draw on all of the places where we are when we’re making things. Often the most important person whose voice is the most important part of your team is the user. We have a lot of really great ethnologists and design thinkers and people who are creating content, but the people who are consuming it are often absent from that conversation. So it’s less about “is this a good idea” or not. I think it’s almost always a good idea at some stage in the process to really incorporate users and listeners into what w’ere making.

Journalists, if they’re not doing it, they should be, because they’re already really good at that. They’re good at talking to people and asking hard questions and figuring out how to get somebody to say something meaningful, even if it’s hard to coax it out of them. It’s a natural fit. So if you’re trying to convince journalists and news organizations that talking to people about what you make is a good idea, it’s easy to tell them by saying, you’ve already done this. You already do this.

As far as the next phase in my career, I’ve fortunately had the great pleasure of working shoulder to shoulder with some really amazing journalists and some really amazing storytellers and some really great reporters, and people who know how to chase stories, and I think I’ll always feel in some way like I’d like to try to harness what I’ve witnessed, a lot of what these talented people do. In my own practice, whether it’s outside of a newsroom or in newsroom, I’d always like to channel that as best I can.

You know, What would David Gilkey do in this scenario? He wouldn’t be shy about approaching this curmudgeonly user? No, he wouldn’t.

O’Donovan: How do you approach the curmudgeonly user? How do you go about getting that opinion?
Wright: At NPR — there’s a million ways that organizations do it, but at NPR we use a mix of what I might really consider three major kinds of audience feedback.

The first one is really kind of faceless and it’s field surveys. We do this the most infrequently, but basically we’ll say we really need to get a handle right now on how we think people are consuming digital news of this sort. We’ll put together a fairly lengthy survey and field it with the understanding that by the time we process the results, they’ll already be a little bit dated. But it gives us a really good snapshot of the time of how many people really listen to NPR, how many people are looking at news sites, how many people are reading newspapers, how many people are watching TV news — getting demographic information about that. We do that pretty infrequently, but it gives us pretty low resolution blocks of people we need to be thinking about and it helps us figure out where opportunities are.

The second kind of testing or conversation that we have really has to do with our ability to have long-term conversations with people about stuff that we make. So existing users of products — we have opportunities that are much more regular than large surveys — opportunities to reach out to people that are on our listener panel, or other people that we can intercept or make callouts in social media and say, “Take five minutes and tell us what you think of this particular feature.” We can ask questions that way. It certainly puts more of a face on things and we can get very specific about product features.

And then the most specific thing we try to do is actually bring real life users into our world and sit down with them and lead them through testing that says, “Hey, we made this thing, it’s kind of half baked, and we want you to use it and tell us what you think about it.” Pretty standard user testing.

O’Donovan: I do want to talk about what’s coming up for you. How much do you know about what you’re doing there, what are you really excited about, what do you hope to see come out of it?
Wright: I wish that I had a lot more information — well, no, I’m fine having a vague sense of what’s going on, but, you know, we know what Twitter is and what Twitter does and it was really exciting for me to be able to visit with that team and learn about the kinds of things that they’re tackling and the things they’ve built and some of the plans they have for the future.

To the extent that I can be specific about what I’ll be working on, what I do know is that I’ll be focused at first on a platform team. I’ll be working with the Twitter for websites team, figuring out interesting ways to make Twitter appear in more places than it does today. The thing that I think I’m most excited about is that I feel like I work with a very talented team at NPR and I know it will be true about the team I’ll be working with at Twitter — just a lot of really smart people that, as a designer, I’ve just really respected and followed a lot in my design career.

To have so many of those people — like Doug Bowman and Mike Davidson, founder of Newsvine — just really smart, smart thinkers who, like I said, are respected web design heroes of mine. I’m really excited to be able to go and solve problems with them, to get up in the morning and go to work and try to figure out how to make Twitter better, which is great. I think that the other part that is a huge selling point for me is, there’s lots of reasons that my family wanted to get to California and be there and be a part of the amazing community that’s happening, and the amazing design community that is part and parcel of the Bay Area.

But for me to leave news is hard. It’s really hard. But what’s interesting is that while I feel like I’ll be leaving journalism, going to work at Twitter, I don’t have to squint very hard to see how involved I still will be in news. I think it’s a really fascinating platform for me to be able, as a user and an observer and a guy who spent a lot of time in newsrooms, who watch what I think this platform could do.

O’Donovan: In the future, how do you see people, specifically journalists but also more broadly, using Twitter differently than they do now? What would you like to build for, for what kind of usage?
Wright: That’s something I’m really looking forward to learning more about as a person on the inside, because I think that even though I’ve spent a considerable amount of time talking with folks there about what they’re trying to build and what they need help building, I still don’t think I have a full enough picture to really know what is even in the realm of possibility. I have lots of sort of fantastic dreams about what could happen, what sort of the Twitter-on-steroids might look like — and maybe even a simpler version of Twitter. I think there are many things. It’s probably too much for me to speculate right now.
O’Donovan: Well, give us one fantasy. What’s the craziest Twitter-on-steroids fantasy?
Wright: Wow.

I think that there’s something fascinating to me about the range of information that you can get from Twitter. We often talk a lot at NPR about making sure that people get their vegetables and also get really delicious pieces of candy that we can distribute through the radio. What I love about Twitter is that, in a combined stream, I can see this heartbreaking story or updates from people who are literally fighting for their lives in Egypt as they are in the midst of the revolution, and then, you know, followed by an update from somebody who’s, you know, explaining how hungover they are because they were at their favorite bar. I think that, as a medium, like, what else does that? That is never part of the presentation that happens on our broadcast news.

This is certainly not a Twitter-on-steroids idea, but, in terms of being able to harness the ability for people be able to narrowcast to them in really specific ways, I think has such a reach potential. That my mom can find value in that, in a way that manifests itself very differently from the way that I would, but we can find the same value out of it with very different content. I think that the challenge of kind of wrestling with: How do you create an experience that will be as useful for my mom as it will be for me, using the same basic parts and concepts but obviously delivering very different content? That’s a fascinating problem to solve, and I’m excited to roll my sleeves up and give it a go.

O’Donovan: Was it you who was tweeting about explaining Twitter to your grandmother recently?
Wright: It was. Absolutely it was. I believe the thing I said after that was if she gets sudden onset dementia, I’m going to feel partially responsible.

Yeah, the thing that’s cool though, is, her story is great. She was a telephone operator back in the day, where, we’ve all seen the photos of people plugging all the lines into one of the boards. One of my favorite stories that she told me was she was manning a board the night that it was V-E Day, and as soon as the word got to the United States via the phones, that victory in Europe had happened, she said the board lit up!

So I was trying to tell her: This is what we do now. We don’t use phones anymore — this is what we do. The fact that Twitter would blow up with this information is how we know it. She said, “I think I understand.” I said, “All right, well, it’s the same thing.”

O’Donovan: I guess it’s not altogether entirely undigestible.
Wright: Yeah, there was part of it she thought was pretty cool.
O’Donovan: We talked a little bit at the beginning about designing for audio, and I’d be curious to know if you think those skills will come into play.
Wright: We haven’t talked specifically about audio, but we had a lot of really great conversations about the experiences that I’ve had designing for news organizations and bringing with me information about how publishers specifically are using lots of different tools, Twitter included.

I’ve built really — I wouldn’t call them large muscles, I’d call them interesting muscles over the last 12 years, thinking a lot about these problems. I think it would be really hard for me to not apply some of those skills. It’s become such a part of my DNA that I’m interested in seeing, How do those skills fit and work? How are those patterns applied out of a newsroom?

O’Donovan: I would imagine you also bring some insight about what publishers want or what they think they want from ads. I don’t know if you have thoughts about Twitter’s different advertising strategies lately, but you’ve said in the past that you think publishers need to be thinking really differently about advertising.
Wright: What I said in my conversations with people at Twitter was, if you’re looking for a client services manager to go to newsrooms and write down the requirements of what would make Twitter great on news websites — I’ve been pretty vocal about some of the things news organizations aren’t doing as well as I wish they were, or things I wish they were doing differently — but I was pretty clear that I might not be the best guy to come in and take those kinds of requirements down.

So I’ve been critical about some of the things publishers have done and ads are chief among them. I think display advertising as we know it is in many cases a race to the bottom and is in many ways unsustainable. What I’m excited to learn more about is advertising models that are so native to the platform — and Twitter is a good example of that, I think the best is obviously Google’s AdWords, AdSense — and just feel like part of the experience. I won’t have a ton of good things to bring along with me from the point of view of what I think digital news design is doing in general. I think it will be more of the other way around, where I eventually might be able to bring some of the information and things I’ve learned working with a company like Twitter to help publishers figure out how to think differently about how they’re doing things. I expect it might go the other way.

O’Donovan: So, let’s say you’re leaving NPR and the whole news world throws you a party. And they say, What’s the one thing we can do for you while you’re gone? What would you want them to do?
Wright: Oh! This is easy. My one wish is for every news org, to really understand the importance of having — it doesn’t have to be a visual designer, but to have design thinkers have a seat at the table. It’s not about deciding what work gets done or how it gets done but it’s really about making design as important an ingredient in what we make as editorial, as reporters, writers, photographers, and technologists. Designers bring such a unique value to the table and can just help solve so many interesting problems in really thoughtful ways. The best presents the news community could give me is to say, Everybody, designers are always at the table.

Photo by Casey Capachi via the ONA.

March 31 2013

17:49

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

17:49

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

April 17 2012

13:00

The New York Times’ Well blog gets more vertical with a redesign

What you might call the verticalization of The New York Times continues today with the relaunch of Well, the healthy-living section edited by Tara Parker-Pope. Like DealBook and Bits before it, Well has grown in prominence enough to get its own branded identity and look — one that stands out from the 60-plus other blogs the Times offers. (Compare its look to The Lede, The Caucus, or India Ink, which all use variations of the standard Timesian blog look.)

Well’s new look makes it look more like an independent website than another Times blog that might get linked from the nytimes.com front page now and then. Along with a single top story, the design promotes four editor-selected stories up high, pushes comment-heavy posts in the sidebar (“Well Community”), pushes tools, quizzes, and recipes up high, and lets readers slice Well’s content by subtopics (Body, Mind, Food, Fitness, and so on). Most stories get bigger and bolder art than the old design allowed; text excerpts are shorter, allowing more stories per vertical inch. Twitter and Facebook sharing tools are prominent on each post, even on the front page.

Like Bits and DealBook, Well’s new look and feel is more reminiscent of what we associate with a blog and not a topic section of a newspaper website. As with Bits, The New York Times logo is shrunken to a mere 123 pixels wide, greyed in the upper left corner; the Well logo gets the big, 540-pixel-wide play.

Along with the new look, Well is getting additional resources. Aside from Parker-Pope, Times writer Anahad O’Connor will join Well as a full-time reporter, and the site will still have writing from other Times contributors and staffers Jane Brody and Gretchen Reynolds.

The transformation of Well has been in the works for several months and was first announced by James Follo, the Times chief financial officer, during an earnings call in February, where he said the company’s digital strategy called for expanding “some current content to drive increased engagement levels and additional points of access and create some entirely new homes for content.”

Well, with its inclusive view on health including fitness, medical care, dieting and more, seems like a logical choice for the Times to try to build off their existing work to grow a new audience. It’s a topic area that has the ability to develop a following as well as attract advertisers; it’s been a pageview standout at the Times for years, with Well stories regularly hitting the most-emailed list.

When I spoke with Ian Adelman, director of digital design for the Times, he said it was important for Well to develop its own identity independent of the Times while still being associated with the paper. “That balance between giving room for that specific content to breath, exist, and surface more and maintaining a consistent presentation of the Times a is a little tricky,” Adelman said.

That’s why Well, like Dealbook and Bits, has what you might call “light branding” from the New York Times, and why the navigation bar and other visual cues found on the rest of NYTimes.com are mostly missing. It’s also why there’s more elbow room on the page, on the Well home as well as story pages, giving art, multimedia, or discussion from readers a its own prominence. Adelman said the design is informed by editorial needs and doesn’t follow the templates you find on the rest of the site. For sites like NYTimes.com, those common templates are useful because of the sheer volume of information that moves across their pages each day. But the newer microsites within the Times architecture require more freedom, Adelman said.

“When an entity is contained within the bigger shell of The New York Times, there’s a little less room for things that are unique to that content environment to surface and breath in ways that make sense,” he said.

What’s unique to Well is that the content may be more disconnected to the day-to-day news cycle than Dealbook or Bits, where analysis and essays are intermixed with daily reporting. Well has seasonal recipes, fitness tools, and health quizzes, the type of material that can easily be tied into a news cycle and trends. But it also has stories with a long shelf life that can draw eyeballs over extended periods of time. (A piece on what works when trying to lose weight is guaranteed Googlebait for years to come.) Adelman said they redesigned the site with that in mind. “There are a number of new features that will be added — things that are not so much about news, but about the Well experience and creating a platform for people to get that and stick around longer,” he said.

It’s likely Well is not the last section from NYTimes.com to be turned into its own mini empire. As the Times continues to work on its digital subscription framework, the incentives are stronger than ever to create dedicated audiences who want to keep coming back to a part of the site. The Times has a long history here: It was Abe Rosenthal back in the 1970s who expanded the print paper by adding so-called “soft sections” — Weekend, Sports Monday, Living, Home, and the like — that would appeal to specific niche audiences. That strategy, despite initial misgivings, has made the Times a lot of money over the years. So while building verticals online may be associated more with the Huffington Post, Gawker Media, or Vox Media than with any newspaper, the Times realizes the need to structure appealing containers for specific kinds of content. For the developers and designers at the Times that translates into more experimenting with how the company presents its journalism, Adleman said.

“We’ll continue to evolve how we provide really great experiences for readers and finding new and better ways to incorporate more interesting materials into the story experience,” he said.

March 30 2012

15:30

CNN.com goes magazine for “Slavery’s Last Stronghold”

CNN’s special report Slavery’s Last Stronghold isn’t just unusual because of its topic — the remarkable fact that more than 1 in 10 residents of the west African nation of Mauritania is a slave:

An estimated 10% to 20% of Mauritania’s 3.4 million people are enslaved — in “real slavery,” according to the United Nations’ special rapporteur on contemporary forms of slavery, Gulnara Shahinian. If that’s not unbelievable enough, consider that Mauritania was the last country in the world to abolish slavery. That happened in 1981, nearly 120 years after Abraham Lincoln issued the Emancipation Proclamation in the United States. It wasn’t until five years ago, in 2007, that Mauritania passed a law that criminalized the act of owning another person. So far, only one case has been successfully prosecuted.

It’s also unusual because of its look. Breaking out of standard CNN.com templates, the story — by John D. Sutter and Edythe McNamee — is laid out more like a magazine piece: big photos, big, full-width text, type treatments, dropcaps, integrated slideshows and video, and a general design depth that indicates this isn’t just another CNN.com story.

“We knew very early on we needed to do something above and beyond our normal templates on the site,” Meredith Artley, the vice president and managing editor of CNN.com, told me. And it apparently has worked: The story’s had more than 2 million pageviews since being posted last week, Artley said.

The layout is a clear departure from most news sites, the text gets a healthy amount of breathing room, which in turn allows photos to run wide, while also incorporating maps and sidebars. For a website it feels like someone pushed the XL button (or maybe that “View in Zen Mode” button in the sidebar) — everything just feels wider, more open, and definitely a little iPad-y.

Indeed, the Apple tablet was one of the inspirations for the layout for the the piece, as were publications on the iPad like Katachi, as well as print magazines, said Marisa Gallagher, the executive creative director for CNN Digital. Gallagher said the team of designers wanted to put the focus squarely on the reading experience. She told me the design “gets rid of the competition in a lot of ways. It literally does, in that you don’t have a right rail competing for your attention.” (Also not competing for your attention: ads, of which there aren’t any on the page.)

One interesting step they took in producing the page was assembling a preliminary layout in Adobe InDesign to get a kind of physical sense of the various components of the story and how they would interact. “Sometimes you want to escape and be immersed in (a story), like a movie type experience, or you are seeking meaning so there is nothing else distracting you,” Gallagher said.

As CNN has pushed into different devices and types of reporting, they’ve tried experimenting with different types of design, Gallagher told me. But for the bulk of what is produced on CNN.com, they stick to standard news templates, ones that, while functional most of the time, don’t work for all types of storytelling. “Our article pages feel a little constricting — it’s like a little tiny world you live in and the rest of your world is full-screen,” she said.

Both Gallagher and Artley say more news sites will embrace the idea of varying design based on story types, especially as publishers play with the how stories are read on different devices.

Since CNN is active in some many places —smartphone apps, tablet apps, web, mobile web, and oh-by-the-way television — they enjoy some freedom to experiment in how they deliver their journalism, Artley said. While video remains one of CNN’s greatest strengths, Artley said series like Slavery’s Last Stronghold show the depth of investigative reporting — not to mention international reporting — at the company. That’s why she’s certain we’ll see continue to see similar projects, and non-traditional designs, in the future. “I will probably have a line of a zillion people who want to use this [template] tomorrow and I’ll have to hold them back,” Artley joked. “But we want to save this for special occasions.”

September 01 2011

09:19

The ultimate responsive web design roundup

Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.


Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.


The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.


Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.


Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.


Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.


Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.


Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.


Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.


A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.


Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.


Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.


Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.


CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.


20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.


Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.


A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.


Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.


Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.


The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.


Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.


To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.


The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.


11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.


Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.


Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.


Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.


CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.


Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.


How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.


Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.


How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.


Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.


Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.


Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.


Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.


Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.


Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.


Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.


Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.


FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.


Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.


The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.


Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.


Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.


Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.


Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.


Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.


Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.


Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.


The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).


Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.


Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.


Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.


Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.


1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.


320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.


Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.


Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.


Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.


Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.


SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.


Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.


responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.


Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.


Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.


Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.


Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span


Forgotten Presidents


Ben Handzo


Aaron Shekey


The Highway Hurricanes


dConstruct 2011


Merlin Ord & Media


The Happy Bit


Forefathers


Easy Readers: Adaptive Web Design


More Hazards More Heroes


Facts Regula


Hi, My Name is Andrew


Sifter


FoodDrinkEurope


The Obvious Corporation


Geek in the Park


Mapalong


JCHELBY


10K Apart


Expositio


Food Sense


New Adventures in Web Design Conference


Cisco London 2012


Team PAWS Chicago


Diablo Media


Andersson-Wise Architects


Designing with Data


Full Frontal 2011


Aaron Weyenberg


Web Design Yorkshire


Winnie Lim


Urban Svensson


Luke Williams


Upperdog


Writer


Toronto Standard


Design Professionalism


Impact Dialing


Modernizr


Johan Brook


Dust and Mold Design


Gridchin


Staffanstorp


El Sendero del Cacao


Dustin Senos


Kisko Labs



51bits


digitalHappy


Patrick Grady


Trent Walton


Headshift


Owltastic


WeeNudge


Ash Physical Training


Mark Boulton


The Modern Gentleman


Build Guild


Do Lectures


David Hughes


320 and Up


About.com


Really Simple


Splendid


Leica Explorer


Spigot Design


Cohenspire


Jason Weaver


Joni Korpi


iwantedrock.com


Converge SE


Pelican Fly


Simple Bits


Information Architects


Andy Croll


Hicks Design


8 Faces


The Sweet Hat Club


Little Pea Bakery


Sleepstreet


Andrew Revitt


Cujo.jp


Interim.it


Philip Meissner Design


Teixido


Transfinancieel


UX London


Jeremy Madrid


Brad Dielman


Thomas Prior


Clearleft


Herjen Oldenbeuving


Bureau


City Crawlers Berlin


CSS-Tricks


Robot…or Not?


Marcelino Llano


Caleb Ogden


A Flexible Grid


Simon Collison


More roundups

Here are some more great responsive design roundups from other sites.


Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Source

July 29 2011

14:00

This Week in Review: Design and the Times, Google+ growing pains, and the extinction of the mogul

Every Friday, Mark Coddington sums up the week’s top stories about the future of news.

Debating the Times’ paywall and design: In its quarterly earnings call late last week, the New York Times gave the clearest picture yet of how its new online pay plan is working. As usual, it turned out to be something of a Rorschach test: BNET’s Erik Sherman called the numbers evidence that the paywall isn’t protecting the Times’ print subscriptions, as it was intended to. On the other hand, the Columbia Journalism Review’s Ryan Chittum argued that the Times’ big digital subscription figure (224,000) “proves that, contra the naysayers, readers will pay good money for quality news.” The Times’ paywall adds an important digital revenue stream, he said, while also letting in enough casual readers to keep the value of digital advertising up.

The most thorough defense of the Times, though, came from New York magazine’s Seth Mnookin: “The Times has taken a do-or-die stand for hard-core, boots-on-the-ground journalism, for earnest civic purpose, for the primacy of content creators over aggregators, and has brought itself back from the precipice.” BNET’s Jim Edwards said it’s premature for Mnookin to say the Times is back, but Reuters’ Felix Salmon, a former Times paywall skeptic, agreed with Mnookin that the paywall is working, saying he’s glad the Times has shown a porous paywall can work.

The other Times-related item is firmly in the hypothetical realm, but it generated at least as much conversation as the real-world pay plan. Last week, web designer Andy Rutledge critiqued the Times’ online design and proposed his own version, emphasizing headlines, timestamps, authors, and separating news from opinion.

The response wasn’t particularly positive. The redesign was generally trashed on Twitter, with a typical sentiment expressed by 10,000 Words’ Lauren Rabaino: “It’s hard to take seriously a design that completely ignores the constraints of a typical newspaper.” One of the most comprehensive responses came from Guardian developer Martin Belam, who pointed out things like faces, article summaries, and points of social connection that Rutledge was missing.

The Lab’s Joshua Benton argued that Rutledge’s redesign doesn’t acknowledge that “the problems of large-scale information architecture for news sites are really hard problems.” Meanwhile, Belgian developer Stijn Debrouwere went the other direction, asking for more unrealistic mockups like this one to help us brainstorm what news sites could look like. GigaOM’s Mathew Ingram said the problem with the Times’ site is that it’s designed as if readers are interested in everything the paper produces, which is almost never the case. And Paul Scrivens said both Rutledge and the Times should look outside the news industry for design cues.

The Google+ lockout: Google+ continues to grow at a ridiculous pace — far faster than either Facebook or Twitter, as Idealab’s Bill Gross pointed out — and as Simon Dumenco of Ad Age argued, the platform represents a social media do-over for a lot of users. It’s still generating dissent, though, with much of it stemming from Google+’s policy toward business pages. As Google’s Christian Oestlien wrote late last week, the company is working on a business profile template that will be up in the next few months, but they’re deleting business pages (including news organization pages) in the meantime.

A few companies will get trial pages before they’re available to everyone, and others have found workarounds — the tech blog Mashable managed to keep all its followers by simply changing its page name to the name of its CEO, Pete Cashmore. That got other members of the tech press worked up, including Search Engine Land’s Danny Sullivan, who urged Google to restore the deleted pages and let businesses create pages normally. TechCrunch’s MG Siegler said Google is essentially creating its own version of Twitter’s Suggested User List, and Mathew Ingram of GigaOM made the case for why this is a big deal.

Elsewhere in the world of Google+, Mathew Ingram wrote about the issues it’s dealing with regarding anonymity, and The Atlantic’s Alexis Madrigal is experimenting with a daily news roundup on his personal page there. The Next Web’s Martin Bryant examined Google+’s usefulness as a news tool, concluding that while it has potential, it needs a bigger, broader user base to start to really challenge Twitter and Facebook.

The last media mogul?: The News Corp. phone hacking scandal shifted down a gear this week, but there were still a few developments to report. The News of the World hacking victims also reportedly included the mother of an 8-year-old murder victim, and two former employees testified that they had told James Murdoch that the hacking was widespread, contradicting what Murdoch had told Parliament last week. Other News Corp. veterans challenged the picture Rupert Murdoch painted of himself as a largely hands-off newspaper boss.

The New York Times’ David Carr wrote that James Murdoch is done, and that Rupert has finally been revealed as vulnerable. CUNY j-prof Jeff Jarvis was more emphatic, calling Murdoch the last media mogul: “The mogul is extinct. The kind of big media institution he built will follow him. Lovely chaos will follow. It’s called democracy.” The Washington Post’s Erik Wemple took a quick look at what a post-Murdoch world might look like.

A couple of other News Corp.-related avenues to chase down: Dean Starkman of the Columbia Journalism Review argued that a scandal like News of the World’s won’t happen in the U.S., and News Corp.’s newest property, the tablet publication The Daily, appears to be floundering, according to a New York Observer feature, though a new version was released last week.

Reading roundup: There wasn’t a whole lot to take in this week, but here’s a quick sampling:

— The FCC is releasing a series of studies on media ownership, one of the newest of which suggested that media cross-ownership (ownership of multiple media outlets within a single market) doesn’t hurt local news, and may actually help it.

— Wisconsin j-prof Stephen Ward made a thoughtful case for redefining objectivity in the digital age.

— Particularly for the Twitter skeptics and writing teachers out there, Poynter’s Mallary Jean Tenore put together a great post outlining the ways Twitter has made her a better writer.

— Finally, I’ve been trying to cover this piecemeal discussion here, but the AP’s Jonathan Stray did a much better job of summarizing the recent conversation about the changing structure of news stories with a fantastic reading list. Now that you’re done with this link-fest, be sure to give that one a look-through, too.

July 27 2011

04:53

How to - 9 successful ways to get rid of your readers (maybe forever)

Brad Colbow is a web designer and illustrator. He collected 9 visual examples found on the web to illustrate pitfalls of web design, things you should avoid if you care of what your readers want and if you like to build compelling news sites. One thing I regularely stumble upon is the abundance of social media buttons on web pages. Nothing is more confusing than millions of buttons, which overpopulate a page. Second, I'm on your side, we need advertising space. But if your (hopefully) originally content takes up less than 20% I'm sure your readers will find it hard to figure out, why they should come back to your site.

Have a look at the other 7 "ways why newspapers die" Brad Colbow, bradcolbow.com

February 07 2011

15:00

“It just feels inevitable”: Nick Denton on Gawker Media sites’ long-in-the-works new layout

This morning, “the biggest event in Gawker Media history” took place: The nine sites of the group officially launched their redesigns. Go to gawker.com — or jezebel.com or deadspin.com or lifehacker.com or the five other sites that make up Gawker Media at the moment — and you’ll see the new page layout that’s been on display in beta-dot form for the past couple of months, brought to life on the properties’ home URLs.

The new look, overall, is a move beyond the blog — a move most aptly described, in a November Lifehacker post, by Nick Denton himself. And, in true blog style, the post-blogization of Gawker is something that’s been described and discussed on blogs long before today’s official drop date. The utter unsurprisingness of Gawker’s new look is probably a good thing for a web property, given how indignantly resistant to design change we web users tend to be.

“It just feels inevitable,” Denton says. “We have a crying need to showcase both exclusives and visual posts. The visual posts are now at least half of our top-performing stories. And audience growth on sites like Deadspin and Gawker has been driven by our most sensational scoops.”

The biggest change to note is the two-panel layout, which makes for a front page that, as Gawker editor Remy Stern put it this morning, is “dominated by one big story (or a roundup of several different stories), and a list of headlines appear in a column down the right side of the page.”

For that, “the antecedents are software products, however, rather than web sites,” Denton told me over Gchat. “We’ve definitely been influenced by two-pane email and news reading apps.” One of the keys to the redesign is the new emphasis on visuals — most strikingly embodied in the huge slot As Denton noted in his Lifehacker post, “This visual slot will be 640×360 pixels in size — that’s 64 percent larger than in the current design — and be in the most prominent location on every page, above even the headline itself. Viewers will be able to toggle to a high-definition 960×540 version — a full 3.7 times larger than the current video standard.” Gizmodo, notably, has been investing in bigger and better visuals as a way to make stories stand out.

The redesign is a kind of convergence in action: blog, magazine, and television, all collapsing into each other.  Though “outside observers will note that this layout represents some convergence of blog, magazine and television,” Denton notes — yup — and though “that’s true in the abstract but it’s more of a description than an argument” — fair enough — when it comes to marketing, the redesign is a kind of argument. A big one.

Online, increasingly, the ad-sales choice boils down to two general strategies: build ad revenues directly, or build audience (which in turn accrues to revenue). The new layout is a double-down on the latter. With the design’s increased emphasis on engagement/the lean-back experience/etc., Gawker properties will ostensibly beef up their time-on-site stats while — for the short term, at least — taking a cut on pageviews as readers engage with and lean back into their content. It’s an app-like approach being realized, intriguingly, on the open web. And, in it, Gawker’s taking a TV-like approach to ad sales: one that’s more about nebulous mass consumption — zeitgeist, if you will — than about simple CPMs. Essentially, as Salmon noted: Gawker is selling time, not space. It’s not selling reader eyeballs so much as reader attention.

And that’s an idea that’s been in the works for a while. Last spring, Gawker’s head of marketing and advertising operations, Erin Pettigrew, wrote a post about Gawker’s new emphasis on branded traffic via an attempt to measure “recurring reader affection.” I chatted with her about that post; here’s what she told me at the time:

First, for so long we concerned ourselves with reach and becoming a significant enough web population such that advertisers would move us into their consideration set for marketing spend. Now that we have attained a certain level of reach and that spend consideration, we’re looking for additional ways to differentiate ourselves against other publisher populations. So branded traffic helps to illuminate our readership’s quality over its quantity, a nuanced benefit over many of the more broadly reaching sites on the web.

Secondly, there’s a myth, especially in advertising, that frequency of visitation is wasteful to ad spend. As far as premium content sites and brand marketers go, however, that myth is untrue. So, the ‘branded traffic’ measure is part of a larger case we’re making that advertising to a core audience (who visits repeatedly) is extremely effective.

That’s a magazine model; Gawker has simply been translating it to the web. (“If you’re going to working with the most storied brands,” Denton puts it, “the appeal has to go beyond the numbers. Conde Nast — at its peak — sold the magic.”) And Gawker certainly hasn’t been alone in doing that: See Slate, Salon, and their peer group, who go out of their way to emphasize the smartness (more cynically: the affluence) of their readers to advertisers. And yet Gawker seems to have reached a critical mass (or, to use the language of a writer from one of those Conde Nast titles, a tipping point): It’s moved, it seems, beyond simply selling its readers to advertisers. Now, it is simply selling itself. The readers are implied. They can be, in the best sense, taken for granted.

Check out, for example, the Advertising page on Gawker; in place of a traditional media kit (replete with demographic data about readers and the like), you’ll find a slickly produced video detailing Gawker’s (literally) storied history. The thing has the feel of an Oscar clip real, complete with a strings-heavy sidetrack; you’re compelled, almost in spite of yourself. And the video presents Gawker through the prism of a kind of epic inevitability, noting, accurately, how much the site and its sisters have done to change things. The message is, implicitly and essentially: Gawker is the future. Be part of it.

Which doesn’t mean that Gawker isn’t also selling readers to advertisers in the traditional magazine (and, for that matter, newspaper) model; it still is, definitely. It’s just doing it more indirectly. The advertising videos are “about the stories,” Denton says. “And the stories define the readers — and the readers define the stories.” The delivering-readers-you-want-to-reach aspect is only one part of Gawker’s marketing argument. “The pitch to advertisers is twofold,” Denton says. “One — and this is the constant — that our audience consists of the young and upscale people who have disappeared from newspapers and other traditional media. And, second, that we increasingly have the scale and production values of — say — cable television.”

It’s that second one that the redesign is trying to capture. And it’s the resonance, and competition, with cable that will be fascinating to see as the new Gawker layout becomes, simply, the Gawker layout. (Readers have the option of continuing with the blog format, if they prefer, which won’t serve the 640×360 ads; see the cola-nostalgic Deadspin Classic, for instance. But “I doubt it will represent any more than 10 percent of impressions, anyway,” Denton notes.) Denton sees his competition, he told me, not only as sites like TMZ and The Hollywood Reporter, but also — and more so — AOL. (A rivalry that, around midnight last night, suddenly got much more interesting.) “And — in the long term — we’ll compete for audiences with cable groups such as NBC Universal,” Denton says.

It’s a big experiment — and a big gamble. One that, like so many similarly grand experiments being made by the big media companies out there — the Times’ paywall will rise any day now — will be fascinating, and instructive, to watch. History’s on Denton’s side — he’s been right about a lot so far — but it’s far from certain that the redesign, and the marketing logic that goes with it, will pay off.

Yesterday, after former Gawker editor Gabriel Snyder observed that, since the redesign, pageviews were down at the beta sites of Jalopnik and i09, Rex Sorgatz issued a bet: “I’m on the record that I think the redesigns will fail. And I’m now officially opening the betting pool. I think Denton is going to be forced to pull back on this. If anyone wants to wager that the redesign don’t get yanked back (or greatly modified) by, let’s say, June 1… I’ll take your bet.”

Denton himself took the bet. (“Money where your mouth is,” he told me.) The measure is October pageviews on Quantcast. The market’s at 510 million pageviews at the moment — so “for every million over that, he pays me $10,” Denton says. And “for every million under, I pay him.”

“I’m going to clean him out.”

January 18 2011

17:00

New Yorker web editor: The site is “guided by what’s on paper”

In a 2006 post at Design Observer, Michael Bierut praised what he termed the “slow design” of The New Yorker: “the patient, cautious, deliberate evolution of a nearly unchanging editorial format over decades.”

It’s an apt description. As Jon Michaud, the magazine’s archive director, told me, “There have been slight design changes over the years — the pages are now a little smaller than they used to be. We put the bylines at the top of articles, no longer at the bottom. We introduced photographs in the ’90s.”

But “for the most part, the magazine has evolved slowly over the decades.”

The New Yorker’s self-conscious connection to its own past is undoubtedly one of its key selling points. But what about the more future-oriented component of the publication: the digital magazine that lives on the web? When you redesign your site — as The New Yorker did late last year, in its first online revamp since 2007 — how do you balance “a nearly unchanging editorial format” with the needs of transition to (an at least partly) digital existence?

One way: Even online, preserve an ethos of print. “Designers who’ve worked on the print magazine week after week were intimately involved in the web design,” Blake Eskin, The New Yorker’s web editor, explained in an email. So “there are all sorts of ways, articulated and unarticulated, in which the look and feel of newyorker.com is guided by what’s on paper.”

Indeed, the new update is — as The New Yorker has always has been — spare in its use of text, minimal throughout, and squeaky clean. It even makes more use of Irvin, the iconic, 1925 typeface designed by (and named for) the magazine’s original art director, Rea Irvin. Illustrations and other art have also been more integrated into newyorker.com, and can be found at almost every turn — clever, and reliably unpredictable.

Then again, not everything on the new site is print-derivative. The magazine’s vintage sensibility notwithstanding, it was actually The New Yorker’s iPad app that inspired many of the site’s visual design choices, Eskin told me — like the greater use of images, both thumbnail and full-screen. “Before, our website, much like the printed magazine, had been more sparing in its use of art, and the iPad helped pave the way for using more images,” he says. “We tried to optimize both digital formats for readability. Which is why the default font size is bigger — one benefit of removing the sidebar on the left edge of most pages.”

SEO was a factor, as well. “The removal of the sidebar made a more open page, but it should also help search engines to notice our stories,” Eskin notes. (Headlines, with the help of Typekit, are also searchable.) Likewise, “as we’ve added more writing that isn’t from the magazine, and more audio and video and slide shows, we outgrew navigation that largely followed the structure of the print magazine.”

The most telling change, though, is as much about philosophy as it is about design. On the re-launched site, “we put less of the magazine online than we used to,” Eskin says. It’s a choice that will likely become more common as The New Yorker’s fellow outlets make key decisions about paid content. “Especially now that ‘Information wants to be free’ is no longer an article of faith — we wanted to tell our paying subscribers that they can access everything,” he says. “And to tell our non-paying visitors that there’s a lot that they’re missing.”

December 10 2010

17:00

WaPo’s Justin Ferrell on designing “a user experience that really adds value to people’s lives” on the iPad

We all chuckled at The Washington Post’s commercial for its new iPad app, and why not, with Bob Woodward and Ben Bradlee, two guys who epitomize the best of old-school journalism, playing around on a device that many peg as the future of media. The commercial is slick, well produced and well thought out, not unlike the Post’s app itself.

They’re both the product of lots of planning, which is what Justin Ferrell, the director of digital, mobile & new product design for the Post, talked with me about a few days ago at the INMA Transformation of News Summit that took place here in Cambridge. Ferrell delivered a insightful presentation on the Post’s iPad app, saying the paper avoided rushing an app to market for the iPad because they “wanted to leapfrog, not just put the Washington Post newspaper on the device.”

The app combines a touch-friendly design that also goes farther than other newspaper apps have in incorporating social media, to allow users to share stories as well as see what others are discussing in connection to news. Ferrell said they know the Post’s brand will bring a built in audience to everything they publish, but “over time, that’s only an incremental audience and it’s going to diminish.” Hence the need to reach new readers. I spoke to Ferrell following his talk about developing the iPad app, the competition for design and user-experience talent in journalism, and how they produced that commercial. We started off talking about frustrations in developing an app and reconciling that with what’s “good enough” for the public. Check out the video or read the transcript below. (And let me apologize now for the at times shaky camera work.)

Justin Ellis: You said sort of two things that to me were interesting. One is that it’s okay to be sort of questioning how good it is, but at the same time kind of mindful of the fact that some of these things aren’t considerations that users might have.

Justin Ferrell: Right, right.

Ellis: So how do those two things work when you’re developing something?

Ferrell: So I’ll give you a real live example. You know, our app is based on a lot of feeds. You know, it’s a feed-based app, rather than like the magazine apps that are designed — you know, heavily designed and then put into the device.

So when we were talking about how to get the correct photo feeds for the sizing and everything that we wanted, it was a lot of discussion with our tech group. And there were a lot of things with the way it works currently with the site. So we were trying to take the photos that we used for the site and size and stuff for that, and use it on this smaller device. So we wanted them to be resized in some ways, which adds to the amount of volume of photos that are gonna go through and all that.

And it became apparent during the discussion that, in order to do that, we would need to buy a new server that would be able to host all these images. And short of buying a new server, we could do it the way that we did it currently, but some of the photos would not fill the frame on the app. So there would be some grey space around it or something like that.

So that’s a situation where we basically then, the editorial design team basically said, you know, no one that downloads the app is gonna understand that the reason why there’s grey around those photos is because we don’t have another server, right? They don’t care about that. They care about what do the photos look like. And so in the end, we bought the new server so that we could preserve the experience.

And that’s just like one example of the kind of thing companies go through internally when they’re creating products like this. They’re like all right, here’s the problem. How are we gonna solve the problem? We can do it existing ways. Obviously, we had pressure with — what does it cost for that new server, all those kinds of things. You have to make your choices based on the priorities of what you want the experience to end up being.

But you know, being from the design side, we espouse the user all the time. It’s sort of our job to do that and say look, what’s the experience gonna be? We have to overcome this hurdle because the users aren’t gonna care. All they’re gonna care about is what it looks like to them.

Ellis: One of the things that seems very novel about the app and something you touched on in your presentation was the inclusion of feeds and sort of the piece about engagement. Talk to us about that and why that was important. I mean, obviously you guys have a lot of content that you produce that could’ve been used in a number of ways, but it’s very important for you guys to have that social media piece, not just where people can share things, but also pulling in almost third parties, like experts around stories and topics.

Ferrell: Right. Sure. So I focused today on that part of it, and I mean the app has everything else that we do, the writing, the photography that we do, video plays right there in the app. And all that is very cool. But we’ve made a real commitment to move into what we can do with social media and journalism.

And it’s not my department, but it’s a colleague of mine who runs it, Katharine Zaleski, who I mentioned came from Huffington Post, and has a lot of great ideas about how we can increase engagement using social media.

And so that was the piece of this that we really wanted to push beyond just having Washington Post content be on the app. And so, you know, the idea there is that it’s fun for us to think sort of philosophically — the question we were thinking with the Twitter piece of it was you know, what does a Twitter publication look like? And you know, that’s not a unique question anymore.

I was just reading that article in Fast Company about Chloe Sladden, and they’re doing a lot with TV networks now too. And you know, you’ve seen in big news events with the earthquake in Haiti that people are using social media to give you real-time reporting from the ground from citizens, especially for breaking news.

And so, I think it’s more than that. And what Katharine sort of came up with that really crystalized the concept was that we want to give you all of the Post content — we want to give you the value that that provides — but we also want to give you the conversation that it inspires, and that’s where the social media component comes in, and so that that was the original idea.

Ellis: At this point in terms of tablets and tablet apps for newspapers, do you believe that the focus should be on experimentation, should it be monetization? Where do you think things should be going at this point? What should be the idea?

Ferrell: Yeah so, you know, I have a lot of thoughts about the big picture. I’m kind of a big picture person, and I lead a team of specialists. But that said, you know, I am also very aware that, you know, we’re the design group and our primary focus should be creating novel interesting experiences, right? If the design group is not doing that, which group is going to do that, right? So, you know, what the Post ultimately decides about how you are going to monetize things and all of that is not specifically in my realm. I have opinions about that. But my focus is really on, if we create a user experience that really adds value to people’s lives, surely we’ll be able to sell that in someway, right? And so, you know, my focus is on the front end of that, very much like what the startups do, you know, I mean what the Flipboards and the Pulses do. I mean, Pulse charged when they first came out, but now they don’t and, you know, they’re building a following. And if you have a following, you create a market for what it is that you provide, then you’ll be able to figure out, you know, what you’re going to do with that information.

Ellis: Do you think that there is a race now for talent in finding the people who can help develop these types of apps? That’s one of the things that you talked about obviously trying to find talent from within journalism but also outside of it.

Ferrell: Yeah, you know because it is such a new medium and because most of the decision makers of big media companies have been there for a long time. You know, you’re looking for young people that don’t have a lot of experience but that you can, you know, sort of guide and also trust their ideas, and I think that’s a real culture change for a lot of newsrooms. But yeah, it’s difficult. You know, we have a lot of good relationships with schools, you know — we have a lot of people from Chapel Hill in our design and graphics department because the multimedia program there is so good. So I generally reach out to schools first and then also try to find people who, you know, have already done really interesting work, but maybe that’s the only thing they have in their portfolio and try to see what the potential is.

But I absolutely think you have to go looking for these people, and then you have to figure out that whatever hire you make, you know, you prioritize the skill set that you are looking for, but there is always something that like you as a manager will have to fill in the gap for. And so I feel pretty confident, because I am the type of manager that can help my people build relationships in the newsroom — put them with the right people in order to create interesting ideas, you know whether they are reporters or editors or photographers or whatever, because that’s the way I always was as a designer, and I have those relationships at the Post, you know, and it can be difficult for someone to come in — it’s a big place — and not know who to talk to and how to get it done. And that’s actually one of the great things about being in a place like The Post is that you can always, you know, if you have a great idea, you can always find experts who can add to that idea, make it better, and help execute it in their particular expertise.

So anyway, yeah, it’s hard to find right people and even trickier than finding like you know, recent graduates or young journalists is — you know, I think we need people who are not in journalism. And I’ll give you an example: We were looking for a UX designer right now. We never had anyone who has expertise in training specifically in UX. We’ve always had, you know sort of generalists as web designers, and a lot of them have created their own sites from scratch when they do freelance or whatever, and so UX is part of that. But I really want someone who has like a master’s degree in human computer interaction. And so I contacted a professor at IU because they have a degree program in that, and it’s well known. And so he’s reaching out to his students. And these are folks that are not journalists by in large, right? And in some of the conversations I’ve had with those people it’s really sort of selling — from my end to get them interested — it’s really sort of selling the public service that we do.

I mean, there’s so much that you can do in web design right now. And you might go to a commercial site that you know, sells clothes or shoes, or whatever it is that they sell, and it’s the coolest site you’ve ever seen. But there are people who don’t want to sell a product, who want to contribute to the public service of journalism. And I think we have an opportunity to bring on people who are interested in that value system. And so that’s one of the things I try to do.

Ellis: Finally, let’s talk quickly about the ad or the commercial I guess, for the iPad app. That made a big splash and seemed to be floating around on the Internet for a while — people were very amused by it. Two things that struck me: one, that it’s funny, and two, that you guys wrapped in a lot of the personalities and people that are known from The Post, and folks that probably might be more known in journalism circles. How do you think those two things helped to sort of guide people, walk them through what the app offers and also what kind of Washington Post content that you get with it?

Ferrell: Yeah. You know, that was another thing that Katherine really managed and got together. And the director of that project, we hired him as a freelancer — Rufus Lusk is a friend of The Post and a really talented guy. He brought in his team and they did it in the newsroom — really from the idea we had, to do it was sort of at the end when we were about to launch, and got the whole thing done in about a week and a half.

She tells a funny story, Katherine, that when she first emailed Bob Woodward about it she said is it possible on Monday that I could have four hours of your time to do this, you know, in the course of their conversation. And he emailed back and said I thought that was a typo — four hours? Because it’s not like he just gives up four hours of time. But what ended up happening was they really got into it and he spent all day there in the end, filming it.

The idea was to show people that yeah, these are the people that you know from the Post because everybody, most people know the Post for Watergate. You know, Bob still works with the Post, Ben still comes to work every day. He’s part of the corporate office now, but he’s still there, he eats in the cafeteria, he’s around. And we wanted to show you that the Post that you know of old can also be new. And that we’re doing this new thing. And we’re on board with it. And it’s not sort of stodgy old media. And so it was funny to have Ben be the one who’s showing Bob how to do it.

And then we were pretty — you know, we went through it scene by scene and figured out what we wanted to say about it in the course of Bob walking through the newsroom. And you’re right, there are some jokes in there that are really funny to us that other people might not know, like when the one that says was that Robert Redford? You know, because of the movie. And those two women who are sitting there who say that are our celebritologists, so they’re the ones who cover celebrity and everyone doesn’t know that, obviously.

And Dana Priest is the one who’s sitting there and says “it’s about bringing them into the newsroom” And of course Dana’s won two Pulitzers, but people outside of journalism don’t know who Dana Priest is necessarily. So yeah, we tried to bring in our big personalities — Chris Cillizza is in it and Dana Milbank, and some of our well-known individual personalities.

But each little scene shows something they can do with it. And even you know, the sports folks who are talking, they’re showing the clarity and the sharpness of what photos look like on there and things like that. So yeah, I thought it ended up really great. It totally accomplished what we wanted it to, which was we wanted people to pick it up, and send it around. And so it was good for saying that our app’s out there. But I think it’s also really good for showing people that hey, you know, the Post is a pretty cool place and it’s not just a big media, big old dinosaur media or whatever people like to say about us, so. It was a lot of fun.

October 29 2010

16:00

Center for Public Integrity’s HTML5 product aims to make long-form journalism readable on any device

Is it possible to enjoy long-form investigative journalism in a digital age without a fancy tablet? A 5,000-word piece can be tough to get through on an ad-supported website. And while the experience on iPad apps is promising, an app is a costly investment — or investments, in a world with multiple incompatible platforms — for a news organization to make.

The nonprofit news organization Center for Public Integrity is announcing an alternative today at the annual Online News Association conference. The Center wants to make reading its work more enjoyable for the user, and a smarter investment for an organization rethinking its online and mobile strategies. The Center has a new HTML5 product that gives users an app-like experience in a web browser. The project is part of a new digital initiative at the Center, funded by $1.5 million in grants from the Knight Foundation.

“We think we’ve created a better way to consume investigative reporting,” John Solomon, the chief digital officer told me, and at a much lower cost than developing apps for different devices.

Solomon gave me a demo yesterday, and I have to say, I was impressed. You can flip through stories from right to left the way you can on an iPad or an iPhone. Text and images resize easily for whatever screen you’re on, whether phone or desktop. It loads fast and smooth and has a clean, easy-on-the-eyes design. The impulse is to keep flipping through, from page to page or story to story.

The product was created with Treesaver, a platform specifically designed to make digital reading easier. It’s a project of, among others, the noted graphic designer Roger Black, whose famous three-color dictum — “the first color is white; the second is black; the third is red: the three together are the best” — is in evidence at Treesaver’s website (and the Lab’s). Treesaver is also working with Nomad, a startup that plans to put out paid electronic magazines.

I spoke with Filipe Fortes, the developer of Treesaver, about what his product means for long-form journalism. “The idea is to be reader friendly,” he said. As an example, he pulled up a website of a large regional newspaper and had me click on a story. (No need to name names — the experience would have been similar across most newspaper sites.) “It’s really kind of hostile to the reader, I feel,” he said, pointing out all the ads and social media boxes that distract from the text of the story. “I think that’s why people are loving the apps,” he said. “It’s just a chance to finally read again. There’s a lot of cool things happening on apps, but people on desktops are missing out.”

Those distractions Treesaver is trying to spare us from are also what monetize the content — but Fortes says he’s not against advertising, just how we display it with the content now. By lowering the bar to the content (as he puts it), by letting users easily flip along, fewer, cleaner ads can be monetized more effectively. He showed me a mockup of a Nomad magazine that runs full page ads between pages, similar to an iPad app. “If you can get people coming in from a blog or Google and you get them to read three stories [by flipping along],” he said, “Congratulations, you just tripled your revenue on that user.”

Fortes is presenting Treesaver at the ONA conference this afternoon. He says he’s eager to work with more news organizations, and is in talks with several.

October 07 2010

17:00

Scripps fellows buy time for a local online strategy

When the E.W. Scripps Company announced its new “Scripps Fellows” program, cheers of “huzzah for jobs!” could probably be heard going up from around the news industry, not to mention on our Twitter feed. Granted, the 40 or so new media fellowships are 6-12 month stints, not the full-time gigs journalists crave, but it’s frontline work at newspapers around the country that have mostly been shrinking their staffs.

Maybe that cheer should have been “huzzah for strategy!” It’s not as catchy, but it’s on point: The fellows program, aside from offering opportunities for new and established journalists, is Scripps’ way of helping their papers shore up staff and create time to devise a localized web/print strategy for content and advertising.

“This frees up time for site managers and people like myself to focus on strategy,” Mizell Stewart, editor of the Evansville Courier & Press, told me. Stewart is a member of the task force overseeing the fellows program.

Instead of creating a cross-company strategy for integrating web and print or raising online revenue, Scripps has tasked each paper with finding out what works best in their community. With fellows in areas like multimedia reporting, web design/development, and user experience analysis, managers will be able to tasked with exploring things like CMS options, delivery of mobile products, and how to create stronger local content.

“The evolution of digital in a lot of local newspapers has started in the newsroom, broke off to a separate operation, and now we’re at the point where it is integrated into the newsroom again,” Stewart said.

Scripps papers are like countless others that find themselves spinning plates: Turning out a daily paper, producing a website, devising online advertising rates, attracting new readers, experimenting with social media, the list (or plates) go on.

In this case each Scripps paper will hire and deploy the fellows to suit their needs, so while the Naples Daily News may get someone handy shooting and editing video, The Commercial Appeal in Memphis may get an online producer. Stewart said a number of fellows with programming or UX experience will work with the interactive newsgroup in Knoxville that provides support to their websites.

Just how aggressively are they going after these digital natives? They’re directing applicants to their Facebook page to get more information and apply.

“Oftentimes people who are just beginning their careers but coming out of those education institutions that do training in digital media, sometimes their skill sets are stronger than those who have been on our staff a long time,” he said.

September 22 2010

16:30

NYT’s Opinion Pages continue the march toward app-inspired design

Above is a screenshot of The New York Times’ opinion section, whose redesign went live a few hours ago. Looks sharp, doesn’t it? It also looks like it’s itching to be put into a different context:

The web redesign looks an awful lot like an iPad app: stories set into big touchable-looking blocks; non-standard web typography; more white space and more room for graphics than 99 percent of newspaper websites offer. And below the area in the screenshot above, the selector for moving between different Times columnists is all done in Ajax, so each click seamlessly shifts between content, much as a nice menuing system in an app might. Even the ING Direct ad in the upper right looks like the sort of small display ads some apps use. In some ways, this redesign more closely resembles the original NYT iPad app previewed in January than does the app the Times eventually shipped.

The redesign is limited to the Opinion front door; the actual story pages are unchanged. But this is the strongest sign yet that the design motifs news organizations are using in app development are bleeding back into the web, as I’d predicted back in April. Twitter’s recent redesign, of course, had a similar app-to-web feel.

Part of this design trend is driven by technology: more people using modern browsers that can handle Ajax; faster connections for big graphics and larger page sizes; the arrival of Typekit as a de facto standard for non-standard fonts. But I think it’s also driven by the desire to present easier navigation choices for readers and the sort of graphical class that lets you stand apart from the increasingly info-cluttered corners of the web. (Compare the Times’ new opinion page to, say, its politics page.)

I think this is important in ways that aren’t just about aesthetics. Simpler, bolder design also helps news organizations push back against the notion that the web demands more more more — more stories, more updates, more exhausted reporters. In the comments to Nikki Usher’s post on the “hamster wheel” a few days ago, a few of us had a mini-discussion on the subject. After C.W. Anderson described “the ‘needs’ of the internet” as “bottomless needs,” I said:

I’d just like to put a signpost in the ground for the argument that the needs of the Internet are not “bottomless needs.” There is not a single human being who consumes everything The New York Times produces online in a given day — or even the amount that The Dallas Morning News, or The Toledo Blade, or The Podunk Gazette produce. (Okay, maybe The Podunk Gazette.) Aren’t there any number of successful online content businesses built around strong but not overwhelming-in-quantity content?

I have no data to prove this, but I think there’s a chart to be drawn somewhere that features both quantity of content output and loyalty of audience, and I don’t think they line up 1:1. I don’t think the hamster-wheel model makes a lot of business sense for even a lot of online news outlets, whatever journalism sense it may make.

The hamster-wheel urge to produce more more more is happening at the same time that audiences are feeling more overwhelmed than ever with information. There aren’t many Americans who, at day’s end, lament: “Man, I just wish I’d had access to more content today.” There’s a role to be filled by providing simplicity, a more limited universe of choices, and information underload.

I’ve called it before a New Urbanism for news, and I think designs like this are a step in that direction.

August 30 2010

10:52

Net2 Recommends - August's Interesting Posts From Around The Web

The NetSquared team reads and shares lots of different blog posts, articles, reports, and surveys within our team. We have a lot of fun sharing within the team and it occurred to us that we should start sharing them with you, too! Net2 Recommends is a monthly series of news and blog posts from around the web that we found interesting or inspiring, mind-bending or opinion-changing, fun or just plain weird.

read more

August 19 2010

15:00

The kids are alright, part 2: What news organizations can do to attract, and keep, young consumers

[Christopher Sopher is a senior at the University of North Carolina, where he is a Morehead-Cain Scholar and a Truman Scholar. He has been a multimedia editor of the Daily Tar Heel and has worked for the Knight Foundation. His studies have focused on young people's consumption of news and participation in civic lifewhich have resulted in both a formal report and an ongoing blog, Younger Thinking.

We asked Chris to adapt some of his most relevant findings for the Lab, which he kindly agreed to do. We posted Part 1 yesterday; below is Part 2. Ed.]

Now that I have exhorted all of you to care about young people and their relationship with the news media, it’s worth examining a few of the most pertinent ideas about getting more of my peers engaged: the gap between young people’s reported interested in issues and their interest in news, the need for tools to help organize the information flow, and the crucial role of news in schools and news literacy.

A gap between interest and news consumption

The data seem to suggest that young people are simultaneously interested and uninterested in the world around them. For example, a 2007 Pew survey [pdf] found that 85 percent of 18-to-29-year-olds reported being interested in “keeping up with national affairs” — a significant increase from 1999. Yet in a 2008 study [pdf], just 33 percent of 18-to-24-year-olds (and 47 percent of people aged 25 to 34) said they enjoyed keeping up with news “a lot.” Young people also tend to score lower on surveys of political knowledge — all of which suggests that their information habits are not matching their reported interests.

There are a few compelling explanations for this apparent contradiction (beyond people’s general desire to provide socially agreeable responses). The first is that many young people may not see a consistent connection between regularly “getting the news” and staying informed about the issues that interest them. If we accept that most young people get their news at random intervals (and the overwhelming body of evidence suggests that this is the case), it’s easy to see how reading a particular day’s New York Times story about health care reform, for example, might be rather confusing if you haven’t been following the coverage regularly.

Many young people also report feelings of monotony with day-to-day issue coverage and a distaste for the process focus of most politics coverage. Some share the sentiments (about which Gina Chen has written here at the Lab) of the now-famous, if anonymous, college student who said, “If the news is that important, it will find me.” The cumulative effect of these trends is that young people go elsewhere to “keep up”: to Wikipedia articles, to friends and family, to individual pieces of particularly helpful content shared through social networks.

The “too much information” problem

Several studies have highlighted the fact that many young people feel overwhelmed by the deluge of information presented on news sites. (My two favorite pieces on this are both from the Media Management Center, found here and here here [pdf].)

This sentiment is understandable: On one day I counted, the New York Times’ homepage offered 28 stories across four columns above the scroll cutoff and another 95 below it — for a total of 123 stories, along with 66 navigation links on the lefthand bar. CNN.com also had 28 stories on top and 127 total, along with 15 navigation links. Imagine a newspaper with that many choices.

The point is that news sites need to be designed to help users manage and restrict the wealth of information, rather than presenting them with all of it at once. People can and are doing the work of “curation” on their own, of course, through iGoogle, Twitter, RSS, and social networks both online and off — but those efforts leave behind the vast majority of news outlets. Better design allows news organizations to include the kind of context and background and explanation — not to mention personalization features — that younger audiences find helpful. That idea isn’t new, but its importance for young people cannot be overstated.

Schools, news, and news literacy

News organizations need to learn from soda and snack producers and systematically infiltrate schools across the country with their products. There’s strong evidence that news-based, experiential, and interactive course design [pdf] — as well as the use of news in classrooms and the presence of strong student-produced publications — can both increase the likelihood that students will continue to seek news regularly in the future.

Many teachers are already using news [pdf] in their classrooms, but face the pressures of standardization and an apparent lack of support from administrations. A 2007 Carnegie-Knight Task Force study [pdf] also found that most teachers who do use news content in their curricula direct their students to online national outlets (such as CNN or NYTimes.com) rather than local sites, which suggests that local news organizations need to focus on building a web-based presence in schools. The Times Learning Network is an excellent model.

And when news media finally fill school halls like so much Pepsi (or, now, fruit juice), young people themselves will also need help to navigate content and become savvy consumers, which is where news literacy programs become important. The Lab’s own Megan Garber has explained their value eloquently in a piece for the Columbia Journalism Review: “The bottom line: news organizations need to make a point of seeking out young people — and of explaining to them what they do and, perhaps even more importantly, why they do it. News literacy offers news organizations the opportunity to essentially re-brand themselves.” The News Literacy Project, started by a Pulitzer-winning former Los Angeles Times reporter, is a leading example.

The point of these ideas is that there are significant but entirely surmountable obstacles to getting more young people engaged with news media — a goal with nearly universal benefits that has received far too little attention from news organizations.

I’ll conclude with a quote from NYU professor Jay Rosen, buried inside the 2005 book Tuned Out: “Student’s don’t grow up with the religion of journalism, they don’t imbibe it in the same way that students used to. Some do, but a lot don’t.” Changing that is the difficult but urgent challenge. I don’t want to be that guy who says “_____ will save journalism,” so I’ll just say this: It’s really, really, really important.

And I should probably mention that there are hundreds of recent journalism school graduates who would be more than willing to help.

Image by Paul Mayne, used under a Creative Commons license.

June 30 2010

13:00

ProPublica’s website redesign puts “future of context” ideas to work

Late last night, ProPublica launched a redesign of its website. As most site revamps tend to be, the new propublica.org is sleeker, slicker, and generally more aesthetically pleasing than its previous incarnation. But it’s also more intuitively navigable than the previous version, incorporating the accumulated changes that the investigative outfit has learned about its users, its contributors, and its journalism in the past two-and-a-half years. As Scott Klein, the outlet’s editor of News Applications and the site revamp’s chief architect, puts it in his intro to the redesign:

When we first sat down to design our website in early 2008, we had just started as an organization, and we had yet to publish anything. We had only a skeleton staff. We had to create something of a Potemkin village website, guessing at the kinds of coverage we’d be doing and how we’d be presenting it. In the two years since, we’ve constantly tweaked the site, and have bolted on new features that we never imagined we’d be doing.

With this redesign, we’ve tried to take everything we’ve learned, and everything we’ve added, and put it together into one nice, clean site. Our hope is that the level of design sophistication now matches the sophistication of our reporting.

The revamp has been in the works, in earnest, basically since November, Klein told me — with many of the intervening months spent not in designing and coding, but in conversing: explaining to the designers the outlet hired to help with the overhaul (the San Francisco-based firm Mule) what ProPublica does and what it’s about. Before they could design ProPublica’s new website, Mule essentially “needed to get a Masters degree,” Klein says, in the organization itself.

It seems they did. Propublica.org now feels more mission-coherent than the original site. The “Donate” button is more prominent than on the previous — a not-so-subtle reminder that ProPublica, known as it is for the substantial funding it’s received from the Sandler Foundation, is always looking for more money, from more sources, to sustain its work. (Speaking of, scratch that: It’s “Donate” buttons that are prominent, three on the front page.)

The site has also added, in its “About Us” section, a list of FAQs — complete with (helpfully, delightfully) an audio-filled name-pronunciation guide: “Some pronounce it Pro-PUB-lica, some Pro-POOB-lica. Most folks here in the newsroom pronounce it Pro-PUB-lica. Of course we’re always happy to be mentioned, using any pronunciation.” (The ProPublica staff were inspired to write FAQs, senior editor Eric Umansky told me, by fellow-online-only-nonprofit Voice of San Diego — which posted its own FAQs last week.)

The new site tries to answer questions in the broader sense, too. In a recent episode of their “Rebooting the News” podcast, Jay Rosen and Dave Winer discussed the systemic challenges of the multi-level crowd: audiences — or users, or readers, or whatever term you prefer — who come into stories with differing amounts of prior knowledge, differing contextual appreciations, differing levels, essentially, of interest and information. One problem news organizations face — and it’s a design issue as much as a strictly editorial one — is how to engage and serve those different users through the same interface: the website.

The ProPublica redesign tries to address that issue by making consumption of the journalism its site contains a choose-your-own-adventure-type proposition. The revamped site, like its previous version, features, at the top of every page, a list of topics that have become focus areas of ProPublica investigations (currently, “Gulf Spill,” “New Orleans Cops,” “Loan Mods,” and six more). Now, though, the landing pages of those topic-based verticals (whose content is generally organized chronologically, river-of-news-style) also feature curated, interactive boxes that incorporate live data from ProPublica’s new applications. Check out the “Calif. Nurses” vertical, above — anchored by “Problem Nurses Remain on Job as Patients Suffer,” a finalist for this year’s Public Service Pulitzer. Scroll down past that top curated box, and there are further options for self-navigation: Users can filter stories according to their general significance (the “Major Stories Only” button), their personal significance (the “Unread Stories Only” button), their author, or their age.

The idea was to give users several paths into, and among, stories and topics, Klein explains. It’s a kind Google’s Living Stories experiment was an inspiration in that respect, he says, as was the filter-focused layout of the website of Washington’s Spokesman-Review. The changes are about making the site a personal, and even somewhat personalized, place — and about making it accessible to new users while still compelling for the old.

March 29 2010

18:07

Eye-Tracking Tablets And The Promise of Text 2.0 [Wired]

From Wired.com: “For example: What if those written words were watching you reading them and making adjustments accordingly? Eye-tracking technology and processor-packed tablets promise to react, based on how you’re looking at text – where you pause, how you stare, where you stop reading altogether – in a friction-reducing implementation of the Observer Effect. The act of reading will change what you are reading.”

Read More at Wired

[Hat tip to Journerdist Will Sullivan]

Share: Twitter Facebook del.icio.us Digg StumbleUpon Reddit Yahoo! Buzz FriendFeed NewsVine Mixx Suggest to Techmeme via Twitter MisterWong

March 19 2010

17:07

How To Increase Conversions On Any Website In 45 Minutes [Six Revisions]

“Redesigning a website, or even a single page, can be a tedious and time-consuming process. Re-opening a project that you so happily completed can take major mental willpower. However, improving a website doesn’t need to take weeks, or even days. I’m a believer in baby steps: making incremental progress, small victories, minor adjustments with big results.

That’s where my 45-minute plan comes into play. In less time than you spend watching The Bachelor each week, you can have a dramatic (and measurable) effect on your website.”

Read more at Six Revisions

Share: Twitter Facebook del.icio.us Digg StumbleUpon Reddit Yahoo! Buzz FriendFeed NewsVine Mixx Suggest to Techmeme via Twitter MisterWong

February 20 2010

08:26

Free Multimedia Tool Workshop Updated Handouts

online news association ona logoHey Journalistopians, it’s been a long while, but I wanted to post the handouts and examples I’ll be sharing at this weekend’s Online News Association Parachute Training in Boca Raton, Fla. Feel free to use these in presentations, in the classroom, to line your birdcage — whatever tickles your fancy!

Share: Twitter Facebook del.icio.us Digg StumbleUpon Reddit Yahoo! Buzz FriendFeed NewsVine Mixx Suggest to Techmeme via Twitter MisterWong

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl