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

July 01 2013

14:59

When building new news products, lightweight experimentation is key

Joey Marburger went into some detail for Source on the creation of The Washington Post’s The Grid. The Grid is meant to be a dynamic and interactive platform for staying up to date on breaking news stories, including an “even mix of photos, instagrams, tweets, articles, videos, animated gifs, quotes, and other content types.”

Marburger explains the collaborative process of building the front and back ends of The Grid and also offers some thoughts on responsive design — but most useful is his explanation of why flexible prototyping is important to building a product that can be widely and productively repurposed.

The media industry has to try new things. When we started conceptualizing The Grid we had no idea where it would take us. Prototyping unlocked more ideas and furthered the concept of The Grid to where it is today. It allows us to try new designs, test new features quickly, and above all, move fast. The Grid changed the culture of how we develop products in the Washington Post newsroom. Yes, the product has been successful, but many more products have been successful because of it. The cultural needle has shifted and that is what technologists do. They change how we work.

June 19 2013

23:48

Respond to this: The Boston Globe wants to offer iPhone users a native app and a cheap price

In the debate over native apps versus mobile websites, The Boston Globe is officially hedging its bets. And in the how-much-to-charge paywall debate, it’s going surprisingly low.

Today the newspaper is releasing a new native iPhone app as an extension of the subscription based BostonGlobe.com. Considering that the launch of the well-reviewed BostonGlobe.com two and a half years ago was considered a landmark in responsive design — meaning it reflowed readily from desktop to tablet to smartphone without the need for a native app — it’s an interesting move.

As is the price: A full subscription to the Boston Globe iPhone app will cost just $3.99 a month. That’s $47.88 a year. Compare that to the alternatives: At full freight, a seven-day print-plus-digital subscription runs $727 a year, while a digital-only subscription costs $207 a year. All for the same content.

“A year-and-a-half in, we’ve been able to grow the subscriber base with our own systems and relationship with the customer. But this gives us access to another group of people we think we haven’t been able to get as well,” said Jeff Moriarty, the Globe’s vice president of digital products and general manager of Boston.com.

That audience, Moriarty said, is smartphone users — in this case iOS users who enjoy reading in the app environment, like discovering material through Newsstand, and who take advantage of the simplicity of the app store’s one-click purchasing.

A supplement to responsive design, not a replacement

boston-globe-app-1
boston-globe-app-6
boston-globe-app-3
boston-globe-app-4
boston-globe-app-5
boston-globe-app-2
boston-globe-app-7
boston-globe-app-8
boston-globe-app-9
boston-globe-app-10
boston-globe-app-11

The Globe is, like other smart news organizations, recognizing that mobile is the future of news consumption. But its big bet was on responsive design — in a sense, a bet on mobile news being consumed in the browser rather than in a dedicated app — even though there were plenty of discussions within the Globe at the time about the wisdom of having a separate iPhone app to supplement its new web strategy.

Moriarty said the core of the newspaper’s two-site strategy remains the same: Boston.com will be the destination for free news, entertainment, and information, while BostonGlobe.com will be the home to the Globe’s reporting. But the new app also acknowledges that there are some things responsive sites and mobile browsers can’t do. As HTML5 evolves, fewer and fewer of those things are about technological constraints. But apps do still have some advantages in discovery and attention — being there to be found in the App Store, having a default position on the user’s home screen, and in the case of Apple’s Newsstand, some advantages in terms of automated issue delivery. (Although some of those advantages are changing.)

But Moriarty said going native shouldn’t be interpreted as a step away from responsive design. Taking the app route opens up users to a familiar set of gestures for reading and navigating, enables push notifications, and allows for a higher degree of customization, Moriarty said, noting that he couldn’t think of anyone “who has been as aggressive with responsive web design as we have and come back to the app market to take advantage of that as a niche play.” And newspapers can use all the niches they can assemble these days.

The Globe app echoes the newspaper typography and general feel of BostonGlobe.com. It offers up all the main sections of the Globe, but also lets readers create a customizable feed of headlines or scan a selection of trending stories. Two additional features, weather and traffic, are likely to add some utility to the app for readers in the Boston metro area.

“We focused on making it feel very mobile-native as opposed to porting an existing presentation over,” said Michael Manning, the Globe’s director for emerging products.

The Globe built the app over several months in conjunction with digital design company Mobiquity. The overall goal, Manning told me, was to create a reading experience that puts efficiency and utility front and center. App users are able to browse sections at will, or just check in on their preferences and the latest trending stories, Manning said. “We picture it as allowing people to pull out sections of the paper,” he said.

It’s the first time the paper has experimented with offering readers a broader degree of control over what they want to read. Personalization is a way of providing additional value to mobile readers, particularly those who may only have a few minutes to read at any time, Manning said. Pulling in that data on readers can also be useful to the Globe. “For us it’s really about what are the right ways to nudge people towards customization and personalization without making it a core requirement to experience the app,” Manning said.

Aiming at price-sensitive readers

Maybe even more interesting is the pricing, which would seem to undercut the substantially higher rates the paper is charging elsewhere. For any digital subscriber who does all their BostonGlobe.com reading on an iPhone, it seems like a no-brainer to get the same product in a native wrapper for 75 percent off. The bet here is that the low pricing will attract more revenue from new iPhone-addicted subscribers than it will chase off from digital and print subscribers downgrading. (As of April 1, the Globe reported roughly 32,000 digital subscribers, which includes replica editions and e-reader subscribers.)

The app even offers something BostonGlobe.com doesn’t — zero advertising for paying customers. (Non-paying app users can read five chosen-by-the-Globe articles a day, with advertising.)

I asked Moriarty about that risk, and he said it was a possibility they’ve considered. He thinks more readers would be reluctant to give up the perks and mobility of the higher-priced bundles. In order for the Globe to succeed, it has to meet readers at different levels, whether it’s for free on Boston.com, within the Boston Globe app, or in print, Moriarty told me. The hope is that the app could be a doorway into a broader connection to the Globe, he said.

“We don’t anticipate a lot of switching there,” Moriarty said. “We hope it’s a place where people will step into the Globe products and appreciate it and want it in other places as well.”

The Globe’s move could be the first of a number of similar shifts to seek out new products at lower price points. The New York Times Co., the Globe’s parent company (for at least a little while longer), announced in April that it would debut new cheaper and more expensive digital products to complement its existing packages.

Those moves come amid some industry-wide concerns that digital paywalls may be proving more effective at keeping some traditional newspaper readers than in attracting younger ones, who might be priced out by higher rates. The Times Co.’s announcements were specifically put in the context of The New York Times itself, not the Globe, but it seems that similar ideas are at work just up I-95.

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.

May 22 2013

15:10

How the BBC handles responsive images

On BBC News developers’ posted about how they handle one of the trickiest issues of responsive design — how to deal with images. How can your web page be smart enough to download big, beautiful images when on a big desktop screen and small, optimized ones for a smartphone?

This is an area where standards are still unsettled and there are a lot of competing best practices. The BBC approach involves hardcoding only the first image on a page in the HTML markup and bringing in others selectively via JavaScript. Also:

As the BBC News site publishes MANY articles everyday, many images are published too. BBC News has an automated process to create 18 different versions of each published image.

May 21 2013

15:00

Tuesday Q&A: CEO Baba Shetty talks Newsweek’s relaunch, user-first design, magazineness, and the business model

A brand guru. That’s what they called Baba Shetty when he was hired away from advertising agency Hill Holliday by The Daily Beast to be the new CEO of The Newsweek Daily Beast Company.

1348078198601.cachedLess than a month later, the company announced that Newsweek was putting an end to its print edition and going all-digital. Last week, Shetty released the beta version of the relaunched website, a simple, colorful, responsive, and easily navigable new home for the decades-old news brand.

Shetty began working with the magazine on a “Mad Men”-themed issue on retro advertising back in March 2012. So maybe it’s not surprising that the new site’s first feature article is an exploration of what makes contemporary television so addictive. Shetty has big plans for capitalizing on on the historically respected Newsweek name, blending a New York Times-like metered paywall approach with an ambitious sponsorship model that will see a lot of creative ad work coming off the Newsweek desk.

On Monday, Shetty and I spoke about how he sees that plan unfolding, as well as some of his favorite new design features, bringing classic Newsweek covers into the digital space, and why ad agencies should act more like newsrooms. Here’s our conversation:

O’Donovan: So let’s start with the redesign! Congrats, first of all — very exciting.
Shetty: Oh, thank you.
O’Donovan: I’m curious, first, who you were looking to for inspiration with the redesign and what your major goals were.
Shetty: The audience is a combination of the people who’ve always looked to Newsweek for its sense of authority, its sense of editorial authority and its stature — its ability to offer perspective on the happenings in the world. But we also wanted to really innovate around the narrative formats for longform publishing on the web.

The real story of the Newsweek relaunch is that it allowed us to think about innovation in a way that really hasn’t happened much for professional journalism. Actually, there’s been a ton of innovation in microblogging and other formats — look at the Tumblr news from the last couple days. Enormous value from thinking about beautiful user experience for content consumption.

But really, a lot of the professional editorial products kind of slavishly follow a set of conventions that are all about maximizing pageviews. You look at a long article that might require seven clicks and page reloads to get through — and then there’s a lot of display advertising that is competing for attention with the actual content. We thought there was an opportunity to do for professional journalism what Tumblr and Pinterest and Flipboard, so many of the other innovative new startups, have done for other kinds of content.

So what we see with Newsweek is the user first. I’ve been talking about it as user-first publishing. The idea is, let’s deconstruct the sense of magazineness — not as a physical thing, but as a concept. The sense of magazineness is about a beautiful user experience. You think about your favorite magazine and sitting in your favorite chair at home and reading it — there’s a sense of editorial coherence. You know — the cover communicates a sense of editorial priority, there’s a table of contents that lends a sense of coherence to the issue. It’s a beautiful package that results.

But when magazines go digital, so much of that’s lost because of the conventions I talked about before — you slice and dice content into the slivers that we call pageviews, and it’s not a very satisfying experience to read professional journalism on the web.

So we really wanted to take a leap forward with Newsweek. In addition to the idea of the editorial stature and credibility of Newsweek, also creating a radically creative user experience around that content. I can talk about a few of the features if you think that would be useful.

O’Donovan: Yes, but I’m still curious about other projects, other sites, other redesigns, that you might have taken something from, or tried to emulate at all. Or maybe this is a ground zero thing. But for example, The New Republic’s redesign, or maybe Quartz — is there a trend?
Shetty: There really weren’t — we didn’t really emulate anything. What we were trying to do was stay true to Newsweek and what the ideal user experience would be.

The cover — there actually is a cover, and it was static in the first issue, and in future issues it will be interactive, video-based multimedia. It’s this idea of drawing a reader in to something that has great editorial to prominence and priority, and we’re going to explore what the cover could be in the digital age. There is a persistent table of contents which is available to you at any part of the experience, and that lends a sense of completeness and coherence to this experience.

O’Donovan: Yeah, the table of contents gives an element of navigability — it helps you understand the fullness of the product.
Shetty: Exactly. It’s persistent. No matter where you are, in an article or on a page, when you mouse over the window, the table of contents dissolves into view, and you can access it. So there’s a sense of, again, an ideal concept of magazineness, and part of it is this sense of complete control over the content consumption experience. So we thought, we’d love to make that real in a natively digital format.

Of course, we took account of all the devices that people read on now, so the site is fully responsive and looks beautiful on a handset or tablet screen or — you should really try it on a 23-inch monitor. It’s gorgeous in large format screens. It gracefully apportions itself to whatever the screen happens to be.

O’Donovan: What would you say, right now, the focus is on in mobile, in building apps? I feel like there’s this turn back towards building cross-platform websites and away from apps. Where did apps fall into your priorities when you started compared to where you are now?
Shetty: Yes, you’re exactly right. I think 18 months ago, everybody was talking about native apps as absolutely the way to go. But there’s a lot of friction in the app experience, and what I mean by that is apps have to be downloaded, apps have to be used and accessed on a regular basis, apps sometimes make it a little more difficult to share content. People are sometimes not as adept at sharing content via apps as they are across the open web. So for us, it’s about giving consumers a choice. We’re going to parallel-path for a while — we’ll also have a Newsweek app available. But the open web launch we did last week we think is actually a beautiful experience across devices. It’s friction-free — there’s nothing to download, there’s nothing that prevents easy sharing. So it’s designed to kind of be — I don’t want to say post-app, but it’s post- the initial way of publishing thinking, that native apps are the only way to go. I think a well designed, thoughtfully engineered open web experience can be terrific for the user.
O’Donovan: You mentioned building an interactive cover page earlier — I’d be interested in knowing what other kinds of engagement you’re interested in building across the site. How did you think about structuring comments? How do you want people to respond to the site?
Shetty: We thought a lot about socially driven content, and if you actually look at an article called “The Way They Hook Us — For 13 Hours Straight,” which is about longform, binge-viewing, addictive TV shows — you know, “Breaking Bad,” “Game of Thrones,” et cetera — if you look at that story, you can see how we handle social. Instead of having commentary being a thing that is relegated to the bottom of the page, there’s a set of functionality on the left side margin that moves along with the story. Right now, there’s 2,100 opinions listed — it’s a way to kind of over time have the idea that engagement opportunities are persistently available, no matter where you are reading these stories — it’s not just a thing that’s relegated ot the boot of a page. There’s a tray that actually slides out to reveal the social features. And there’s a lot of innovation we have planned in that area as well.

And while we’re talking about a long article page, you can kind of see the ability to use multimedia photography, video, infographics to help the journalistic storytelling of a longform piece. That’s another, I think, terrific step forward. It’s not the tyranny of the pageview, it’s not the conventions that are going to deliver more advertising properties — it’s thinking about he user first. What’s going to make for a great reading experience? in that way, I think it differs from a lot of the conventions that are in play across the web.

O’Donovan: So this is my understanding having read a couple things, so correct me if I’m wrong — but your strategy is first to build this product that people are going to want, and then slowly to introduce a paywall, and then later this sponsored content component. Can you explain how you see that unfolding and over what kind of timeline?
Shetty: I can talk a little bit about it — I probably can’t talk about all of our plans right now.

The metered access is going to be rolled out fairly soon, and that’s just the simple idea that, look, anybody can read any article on Newsweek, and initially that’s completely open and completely free. But only subscribers will be able to consume content over a certain number of articles. So it’s very similar to what The New York Times and others have done. Open access — we want a lot of social sharing, we want a lot of visibility of the content across the open web. But what we’re asking is, if people consume over a certain amount of content, that they subscribe. And that’s going to take place fairly soon.

The second question is how brands can participate. We have the same principles we’ve been talking about — thinking about the user first — applied to brand participation. What we’re going to do is limit the clutter — relatively few units, but really high impact — but stay with the design aesthetic of the site overall. They’re going to be beautiful, unignorable, but the value exchange with the reader is going to be very appropriate.

When you listen to a program on NPR, and there’s a sponsorship message before the program starts, you can kind of say, okay, well, I get that. I get how that works. It’s a reasonable exchange between the audience and the brand that sponsors the content. That’s really the model. It’s not as much about the standards of display advertising that have dominated the discussion on the web. It’s a sponsorship model — a different direction.

O’Donovan: From a structural standpoint, in terms of building the sponsorship and how closely married they may be to the content you have, I’m curious if it’s going to be an internal team and how closely they’ll work with the editorial team, or if it’s someone from outside. How does that all work?
Shetty: Oh, it’s all part of one organization in our company, and it’s a close partnership between the editorial and business sides.
O’Donovan: I was just reading earlier, you wrote, along with someone else, a piece for the Harvard Business Review about how advertising companies should act more like newsrooms. I was hoping you could explain that theory and maybe, I’d be curious to know if that was an idea that started to percolate for you having been in a newsroom for a little while.
Shetty: It actually started percolating for me well before I came into a newsroom. I think it actually a pretty clear direction that has been well represented by a lot of people. There’s a real opportunity for smart brands to publish content that’s useful, interesting, engaging, and helpful to their audience. It’s not a new idea — in fact I always talk about the fact that it’s an idea that’s been around for a very long time.

But what’s changed is all the tools that are available for content creation, distribution, measurement and all the channels that are available to brands. I think it’s a very powerful idea. I don’t think it’s one of these trend-of-the-season ideas. I think it’s a dramatic industry shift that we’re going to be tracking for years to come, through various iterations.

That was something I did with Jerry Wind, head of the Future of Advertising Program at Wharton. It was really based on the Wharton 2020 Project, which was asking a lot of advertisers about what they think about the future of advertising, and it was such a consistent theme — that it’s going to be less and less about what we think of advertising today, and more content that is voluntarily consumed by people because they view it as in some way useful or interesting.

O’Donovan: As we continue to see this trend toward sponsored content and cooperation between advertisers and news brands, I’m curious what your advice might be to other people who are following a path similar to yours — coming from the ad side and moving into newsroom, operating as the person who is trying to bring those two things together. Are there any specific challenges or surprises there? How would you tell someone to pursue that?
Shetty: I would just say think about the user first, and by the way, think about editorial standards. It doesn’t serve anyone to have editorial standards compromised. Users don’t want that, the consumer doesn’t want that, and certainly it doesn’t benefit the editorial side of things either. Nobody wants that. I think full transparency and good judgment are critical here.
O’Donovan: How do you telegraph that to the reader?
Shetty: Well, we don’t really — we haven’t really had any issues with telegraphing that. It’s just kind of clearly indicating where, what the source of a particular piece of content is. I think as long as you maintain these kind of standards, there really aren’t issues.
O’Donovan: And in terms of the user-centric experience you’re trying to build — you’re talking about how modern newsrooms have so many different kinds of metrics available to them now — when I hear people talk about building new products like this, they talk about building something light and flexible, and prototyping it so you can really respond to the audience’s initial reaction to it. I’d be curious to know how you’re tracking that, how you’re listening to the reader, and what kind of flexibility you’ve been able to build into the product.
Shetty: Absolutely. The iterative nature of web design development — or I should say, digital design development — is a terrific kind of approach for designing something that users really love and respond to. For us, it’s tools like Chartbeat, which we love, and other kind of leading-edge ways of getting real moment-to-moment feedback from not only what people are reading, but how they’re spending time with it, where they’re coming from, what kind of engagement they have with it. It’s all fed right back to the design and development process.

It’s a long way from the days of just building it and they will come. It’s really paying such close attention to what people actually respond to.

January 11 2012

14:45

Responsive design from another angle: Gizmodo goes widescreen

Gizmodo, the popular gadget site and pageview king of Gawker Media, debuted a new look last night that they’re calling HD view, and it’s big. Not big in the grand scheme of things — big in the number of pixels it takes up. Whereas most websites top out at around 1000 pixels in width, Gizmodo HD stretches like Plastic Man, with photos and videos stretching wider and wider as the browser window does too. On my 1900-pixel-wide monitor, pages like this one (photo-dominant) and this one (video-dominant) both resize all the way to blowout width. Call it the doublewide approach.

(The screenshot above is obviously less than full size; to see its full, 1920-by-1200-pixel glory, click here.)

This is the flip side of responsive design, the web-design idea that BostonGlobe.com’s recent launch brought to the attention of lots of news execs. In the case of the Globe (and in most other responsive efforts), the primary appeal is the ability to get small — to build a website that can look good both on your laptop and on your smartphone without having to build a separate mobile site. (The Globe’s website expands up to 1230 pixels, but not beyond that.) But responsive design works in the other direction too, and Gizmodo’s new look is an attempt to play with that — to give more space to the big photos and big videos that Gawker Media’s been trying to push over the past year.

At this point, HD view is very much a beta (it won’t work in all browsers, for instance, and there’s no place for comments), and seems more like a parlor trick than a feature. But why might a news organization be interested in a doublewide view? What might be the use cases for an HD view?

  • There’s still a class of user who (a) uses a desktop computer, where monitor sizes once outlandish (24-inch, 27-inch, 30-inch) are becoming more affordable and common, and (b), particularly on Windows, runs browser windows full screen. Those folks are used to seeing a bunch of whitespace to the left and right of their favorite websites, and this could fill them up and build something more immersive. With Gawker Media making bigger investments in video and art, it makes sense to play those as big as the browser will allow.
  • A theme running throughout Gawker’s controversial redesign last year was that it viewed television as both an important competitor and a production-value bar that Gawker Media felt it was approaching. “[W]e increasingly have the scale and production values of — say — cable television,” Nick Denton told us at the time: “[W]e’ll compete for audiences with cable groups such as NBC Universal.” Well, Gizmodo HD fits perfectly into a world where screens are shifting and the television might move from the-place-where-you-watch-Mad-Men to, simply, the biggest and best content-agnostic screen in the house. To be fair, previous attempts to bring the web to big-screen television haven’t borne much fruit. But with everyone expecting an new TV push from Apple in 2012 — and with companies like The Wall Street Journal moving from web video to TV sets — it makes sense for a big online brand like Gawker Media to prepare for that eventuality.
  • Advertisers are always looking for new ways to draw attention, having soured at least a bit on the efficacy of the banner ads. Gawker’s long been willing to push the boundaries with things like sponsored posts and site takeovers. Imagine the greater impact that a site takeover could have when there’s twice as much space to take over?

It’ll probably be a while before the doublewide becomes much more than a novelty, but it’s worth thinking about how a news site might look different if, instead of thinking small (that is, mobile), it thought big.

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

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