What's Your Response to Responsive Design?

By: Christine Umbrell

Nine reasons why responsive design is a "must-have" for association websites in a world that's gone mobile

From Starbucks to Mashable to the Obama 2012 Campaign, it seems everyone is jumping on the responsive web design (RWD) bandwagon. And many associations hoping to keep their members' attention are doing the same.

RWD is a "mobile-compatible" design approach in which websites work from a single set of HTML code that resizes to fit whatever screen a browser is using—be it desktop, tablet, or smartphone. RWD relies on media queries to identify the resolution of the device it's being served on. Flexible images and fluid grids size correctly to fit the screen.

The goal of RWD is to provide an optimal viewing experience across a wide range of devices. When choosing to incorporate RWD into an association redesign, "there's very little extra effort involved for a pretty big upside," says Andrea Lange, web and online communications manager at the American Podiatric Medical Association (APMA). Lange, who helped lead her organization's site redesign, says RWD "is becoming more expected."

"If you're going to maintain a website, RWD is where the web is going—this is the next evolution," agrees Bob Panger, chief technology officer of the American Marketing Association (AMA). "It answers the question: 'How do you come up with a design that will work as well on a phone as on a 24-inch monitor?'"

Associations today need to develop a "mobile-first" view of the world, says Alex Mouw, senior consultant, web and mobile solutions, at Results Direct, a company that has assisted several association clients with RWD redesigns. "It's important to be able to distribute what a consumer wants and needs, when they want it, how they want it."

Why Go Responsive?

That anytime-anywhere-any device experience is what the ESOP Association was looking for when it was time for a website redesign. "If [members] want to sign up for a conference using a tablet, let them. If a nonmember finds your website, likes what they see, let them join—even if they happen to be in a coffee shop on their smartphone," says Amy Gwiazdowski, director of communications.

The Construction Financial Management Association (CFMA) website was redesigned using RWD after the organization "made it a strategic goal to make members want to engage more with site," says Brian Summers, chief operating officer.

As more people depend on their mobile devices to go online, an association site needs to deliver a message succinctly and clearly on the first screen. "You don't have a lot of time to show them your association's value," says Summers. "If they have just one bad experience, they might not try again." Designing with RWD helps ensure a positive experience for even the least patient browsers.

Nine Advantages of Becoming a 'Responsive' Association

Making it easier for people to access your website on any device is the easy answer to the question, "Why should my association redesign with RWD?" But it's not the only answer. Association executives who have made the switch to RWD cite a number of additional reasons why embracing the new approach can be beneficial.

1. It's cost-effective. While smaller associations may be concerned about the cost of hiring a third-party vendor to build a new site using RWD, the result is well worth the investment.

For the American Foundry Society (AFS), redesigning using RWD was the high-end choice among options they were considering.

"But we look at it as a long-term investment," says Al Spada, AFS director of marketing. "It's a significant monetary investment for an association of our size—27 staff—but it's worth the investment."

Larger-staff associations have found RWD to be a less expensive option in the long run. "You're not creating two separate websites—your main site and a mobile site. You're building an all-in-one," says AMA's Panger.

2. Updating is easy. "RWD is about how you code the pages—there's not a lot of expensive technology involved," says Mouw. Designing a site with RWD may require more time for coding but less time overall because you're building the site only once. And once it's up and running, the cost of maintenance for updating the site decreases because changes to a single codebase reach multiple platforms, preventing duplicative work.

Spada has found that AFS's IT department now spends less time on site updates. "We have a small IT department—one and a half staff—and RWD takes some of the day-to-day minutiae" from the old system off their plate, says Spada. The new design "affords the nontechnical staff the ability to do some of the work."

And at AMA, "we can be quicker to respond if we have to add something to our website," says Panger. "Since it is so adaptable, we are able to make more changes."

3. It appeals to a global audience. The mobile imperative also applies to associations looking to reach overseas members and audiences. A 2013 report by Cisco found that global mobile data traffic grew 70 percent last year alone. Panger says he is focusing "a lot of time in marketing to international markets—markets in which mobile use is predominant."

4. It engages younger members. At AFS, where the core demographic seems to prefer desktops, the new website design is attractive to the younger members the society is trying to engage. They like to see a more responsive design via mobile and tablet, says Spada. "It shows we're up to date."

Even organizations with less tech-savvy members see the benefits of RWD. "We cater to a construction membership, but it's nice to feel cutting-edge and that we are making it easier for members to find the information they need quickly," says CFMA's Summers.

5. SEO improves. Improved search engine optimization (SEO) is another benefit, according to Panger. With RWD, all of your online information is "integrated together," using a single URL for a piece of content. In addition, RWD is Google's "recommended configuration."

According to the Google Developers' website, RWD "makes it easier for your users to interact with, share, and link to your content … and no redirection is needed for users to get the device-optimized view."

6. E-newsletter content is more accessible. RWD can make it easier for members to access and read e-newsletter content on their tablets and smartphones. Spada says he's seen growth in e-newsletter readership since AFS's site was redesigned. And APMA members have commented that reading the association's weekly e-newsletters has become easier, according to Lange. "Now we know people who are reading the e-newsletters on their mobile devices will link to the stories correctly," she says.

7. It boosts your visibility. Demonstrating just how easy it is to interact with your website on any device can help you convince your members to visit more often and access more services.

At the ESOP Association, Gwiazdowski launched the new site around an annual conference and tradeshow. "We included information in attendee packets, featured information and screen shots on screens at the luncheon, and set up a monitor at the association's membership booth to walk members through the new website," she says.

In addition, the organization used a QR code to encourage people to visit the site. "When people scanned the code, they were taken to the mobile version of our website, which helped in the promotion," Gwiazdowski adds.

8. Results are measurable. Once a responsive design is in place, it becomes easier to track usage on mobile devices, according to several association executives. "You can capture metrics on an app—but not to the extent you can with RWD," says Panger.

"Our sales data is doing phenomenal" since the site was redesigned at AFS, says Spada. "RWD factors into that. Our average duration of using the website has increased 15 to 20 percent."

APMA has also seen a rise in mobile access. "We went from 10 percent accessing our site via mobile to 20 percent," says Lange. "And 45 percent of the members we surveyed said they will now access the site via mobile."

9. Members&mdashand potential members&mdashlife what they see. Reaction to the new designs at these organizations has been overwhelmingly positive. At CFMA, the redesigned site is seen as a "value proposition piece," Summers says. RWD comes with higher resolution and a wider grid—and usually less information overload, so browsers get the most important information without getting distracted.

"Overall, we've had a great reaction from our members," adds Lange.

With so many advantages, associations ready for a redesign should consider RWD and not look back. "It is rare that a technology comes along like this where it is not too much work on the association side to implement, and it provides instant value to your organization and members," Summers says.

Christine Umbrell is a freelance writer based in Herndon, Virginia. Email: [email protected]

Sidebar: Do Your Research

Two books to read before starting your next redesign

Responsive Web Design by Ethan Marcotte. This book, written by one of the first people to introduce RWD, covers the three front-end components of the design concept, showing how fluid grids, flexible images, and media queries can be layered together to create a proper responsive design. It also discusses how to determine if a responsive approach is right for your project.

Online and On Mission: Practical Web Strategy for Breakthrough Results by C. David Gammel, CAE. This how-to resource is designed to help transform your website to reflect the value of your organization. It includes the seven drivers that should steer the development and execution of your website. This reference can help you strategically determine what to include—and what to leave off—your RWD site.

Sidebar: What About Apps?

In an RWD world, they have a place

While RWD is a critical component of any web redesign, association executives say that it serves as a complement to—rather than a substitute for—apps. "RWD isn't the answer for everything," says Bob Panger, chief technology officer for the American Marketing Association. "Mobile apps have a specific value, too."

Apps can be useful for more targeted purposes. They work especially well when they're geared toward specific benefits that members may want to access quickly, without having to go through the main association site.

The American Foundry Society offers two apps—one for its tradeshow and another for its magazine. "Apps still have a place because of the way people use them," says Al Spada, director of marketing for the AFS. "Some people are infatuated with apps, where one touch brings you right where you want to be."

Sidebar: Content Strategy

Maximize your content for responsive design

Redesigning your site using an RWD approach involves more than simply moving your old content into a new format—some of your content will need to change. One of the most difficult steps is paring down the information on your homepage—and your entire site—to make it work with the new responsive approach. Here are tips from association executives who have done it.

Do a content audit. Before you even contact a vendor, conduct a comprehensive content audit, says Andrea Lange, online communications manager at the American Podiatric Medical Association. Like many associations, APMA realized its previous website simply had too much information—to the point that it was overwhelming. "Redesigning with RWD made us determine what is most important and what information the user should be seeing first," Lange says.

Make strategic choices. "You have to make sacrifices," says Bob Panger, chief technology officer, American Marketing Association. "All departments think their material is important, but you need to make tough choices and compromise" to determine which areas get top billing on the menu.

"For example, four buttons on the homepage menu might be better than eight," especially when you're considering how the site will look on smaller devices, says Panger.

"Don't try to be everything to everybody," adds Brian Summers, chief operating officer at the Construction Financial Management Association, which aligned the top four areas on the homepage to the organization's four strategic plan goals. The old site had about 10 menu items and lacked focus.

Let go of PDFs. "PDFs are sort of the enemy of smartphones," says Alex Mouw, a senior consultant with Results Direct, since they are intended for printing but not usually designed for reading in small print. "Your main content shouldn't reside in a PDF."

Christine Umbrell

Christine Umbrell is a freelance writer based in Herndon, Virginia.