May 31, 2012

Nonprofits Use Responsive Design for Better Site Display

As more and more people rely on smartphones and tablets to get information, nonprofits must figure out the best way to make sure their Web sites display information just as well on the small screen as on computers.

Some groups have been creating special mobile versions or apps that work on different types of phones and tablets, but with the dizzying array of new technology, that process is complicated and expensive. That's why a new approach is gaining popularity.

Called responsive design, the goal is to build a Web site that automatically recognizes the device or screen size a viewer is using. When you call up one of these sites on an iPhone, for instance, it instantly displays material using dimensions of the phone's screen. When that same site is viewed on a laptop computer or a tablet, everything is shown in bigger dimensions. And nobody—not the viewer or the nonprofit—has to do anything to intervene.

The practice gained widespread popularity in 2011 when the Boston Globe redesigned its site using that approach.

Some nonprofits and companies are now following the Globe's lead.


The Environmental Defense Fund was one of the first nonprofits to debut a responsive design for its entire site.

If you visit the home page and change the size of your browser window, you can see that the content shrinks as the window gets smaller horizontally. It also repositions itself when you make the window smaller vertically. It does that automatically on your tablet.

The organization didn't set out for a flashy responsive design at first: It added the features only after testing the site on different devices and at different screen sizes, says Kira Marchenese, the group's director of online communications.

"It was really striking ... that it wasn't a good experience and didn't highlight what we wanted to say about the organization," Ms. Marchenese says.

While responsive design may make things easier for viewers, Ms. Marchenese says the site's recent redesign was somewhat harder for her colleagues because each test had to be done two or three times in the different layouts to see that everything displayed correctly., a site that allows nonprofits and their supporters to set up fundraising pages, also recently unveiled a new responsive design.

About 18 percent of the site's traffic was coming from mobile devices, and the company was faced with a decision, says Nate Drouin, chief executive of the company: Either build separate applications for Apple or Android smartphones or create a single site using responsive design.

He was skeptical of the success of an app, believing the apps that people use most are "utility" apps that they use every day, like news, weather, or social networks.

"The average consumer doesn't wake up in the morning and say, 'Hi, I want to create a fundraiser,' " Mr. Drouin says.

Pascal Rettig, chief technology officer at, says he's happy with the decision. The company had to spend more on the redesign, he says, but the knowledge the company gained will make future projects easier.

Mr. Rettig said that nonprofits considering a responsive redesign should ask the designers they want to hire to provide examples of how they would approach the task. Because responsive design is a new idea, not many Web-design firms have much experience in the practice, and standards aren't in place yet.

Ms. Marchenese says nonprofits that use free content-management systems like WordPress or Drupal should start with a responsive template first and customize it to their needs. That will cut down on the development time for in-house projects.

And she said her charity still has a long way to go.

"Since we were one of the earlier [organizations] to move to this design technique, there are more efficient ways people have figured out to do the same things that we are doing," she said. "We are never done."

Is your group thinking about using responsive design? Share your ideas about what nonprofits should keep in mind as mobile and tablet use grows.

Send an e-mail to Cody Switzer.