Responsive design is a growing imperative for organizations that want to ensure users have a seamless experience across devices. Here are four steps to lay the groundwork for success.
Technology seems to evolve in the blink of an eye, leaving many “advances” as buzzwords in its wake. However, some of those advances take root and begin evolving in tandem.
Responsive design is one example of such an evolving technology. The growth of mobile technology has made it necessary to ease web-browsing ability for the increasing number of people using mobile devices to access the internet. Responsive design allows you to leverage your content across thousands of different screens sizes and platforms, all with a single code base.
Yet, it takes a fundamentally different approach to plan for a multi-screen experience. From planning to development, implementing a responsive website requires a thoughtful approach to ensure success.
To give you in-the-trenches wisdom, we’ve asked two association clients to share their tips and behind-the-scenes best practices. Laying the foundation for responsive success can be tackled in four important planning steps.
Sell the Value of Responsive Design
Mobile internet usage is poised to overtake desktop browsing, increasing by 66 percent each year, according to StatCounter Global Stats (chart to the right, click to enlarge).
These numbers demand action, and responsive design is just such a solution.
Your association likely utilizes varied staff and departments to create and maintain your website, all with differing roles, responsibilities, and focus. From marketing to IT, executives to administrators, all of those stakeholders need to understand the value of moving to responsive:
- Cost and efficiency.
Gone are the days of the desktop/mobile-site combos. Now, you can design a site enabled to serve a full spectrum of screen sizes — mobile, tablet, and desktop — by preparing your site and content with certain “breakpoints” in mind. One set of code can be used to meet the demands of a myriad of devices and screen sizes. “It was very easy to convince people to move to responsive,” says Margo Pecoulas, director of information technology at the American Academy of Periodontology (AAP). “Everyone’s experiencing it in their own personal world using all these other devices… And because we have an open-source site with responsive resources to tap, the price tag wasn’t an arm and a leg, either.”
- Better user experience.
Responsive design is fluid design. It is not just about fitting on a mobile screen; it is also about making sure that the navigation is optimized and that the content and functionality work in contexts and scenarios ideal for consumption by your target audience, regardless of the device used.Kim Soehnlein, director of credentialing and technology at the American College of Veterinary Surgeons (ACVS), explains: “We were shifting the focus of our site from member-focused to animal-owner-oriented content. A responsive site has made us very successful at providing resources to animal owners on the go. It helped us meet the demands of our membership, who wanted us to do more marketing and make content more accessible.”
- Audience growth from improved search engine optimization.
Instead of optimizing a separate mobile site, a responsive site is optimized across all devices for search. Not only will you better capture people searching from mobile devices, but you will also boost your search engine ranking with improved site quality.
Every responsive web design project is also a content strategy project. Even the best responsive site won’t fix content that isn’t strong, snappy, or strategic. Therefore, it is critical to build time upfront to evaluate-and likely restructure-your content. Reorganizing content for optimal communications is also helpful.
“We had a small team that consulted on content strategy with internal staff on what we thought were priorities and discussed how the content should be best displayed on mobile,” says Pecoulas.
ACVS got staff involved and assigned clear responsibilities. “Our staff researched resources about how to write for the web and [learned] about responsive design, so we knew what was needed internally to support a responsive site,” Soehnlein says. “We assigned writing to everyone on the staff, and that’s the reason it really was a success. We made sure everyone bought into it. Just giving content to a developer and letting them run with it would not have worked.”
With your content’s value in mind, consider the hierarchy of your messaging and recognize that more second-tier content is immediately visible on larger screens. Plan your responsive screens’ “breakpoints” to maximize the most important content for your audience.
“Originally, our content was long, lengthy, and more print-focused,” says Soehnlein. “We changed tone, shortened copy, and used more bullet points. The choices made helped with overall readability, lending themselves to smaller screens.”
Respond to the User
Pay attention to analytics. What are people reading and searching for on your website? Do these align with your goals? Make this key intel a primary consideration in the organization and layout of your new responsive site.
“We did a survey on technology and the devices they had, and the frequency [with which] they were using them,” Soehnlein says. “There was a large portion of mobile users, and we felt like it just made a lot sense.”
The wireframing process is essential to designing a user-friendly site. Each key page of your site should have three wireframes, covering the layout and hierarchy of content for phone, tablet, and desktop.
“One pitfall to avoid: Spending all your time doing the templates for the desktop first, before working down to the smaller screens,” says AAP’s Pecoulas. “We wound up needing to revisit that a bit once we were developing and tweaking the way things looked. We didn’t change things drastically, but it was such a new experience.”
As you create wireframes for different screen sizes, you will also have to organize and test your navigation.
For smaller screens, you’ll want to use navigation that can be rolled up and tucked away when not in use, to optimize screen real estate. Explore other responsive sites in the planning phases to determine best practices in accessibility and streamlined navigation.
Have the Right Back-End Tools
Not all third-party tools have been updated to fully support responsive design, so take the time upfront to make sure your CMS (such as Drupal, Joomla, and WordPress), AMS, and other back-end tools will be able to support it.
“The big issue we had with responsiveness is the integration with our AMS,” says Soehnlein. “The pages look a little different and don’t always work the same way in the AMS pages. We worked hard on setting the look and feel, and the AMS pages are similar, but not exact. It was a challenge making the integration look as seamless as possible. It’s still not quite where we might want it to be.”
Pecoulas agrees. “We were fortunate that we selected the Drupal framework that allowed our developer to take it to responsive without too much pain,” she says. “It feels like a natural transition since we can use responsive templates from open-source. Being on the correct platform to transition is a big deal.”
Your target audience is destined to be mobile at some point, and that audience is more likely to return if you provide more than desktop-only experiences. Strained eyes, zooming, and excessive horizontal scrolling will be a thing of the past as responsive design lets your association optimize for clarity of messaging and overall audience engagement.
Just as your audience evolves, so must your technology.
“We know members are appreciative of being able to view the site anywhere,” Pecoulas says. “It’s something that should be done and that’s good to do. Everyone just expects this nowadays.”
Layla Masri is president of Bean Creative, an interactive and digital development company in Alexandria, Virginia, specializing in web, mobile, and apps for associations and nonprofits. Email: email@example.com.
Jessica Conyers is manager of creative services at Coulter, a nonprofit management company in McLean, Virginia, managing the publications, brand continuity, and web, graphic, and technology-related needs of nonprofit and events clients. Email: firstname.lastname@example.org
Copyright, ASAE: The Center for Association Leadership, March 2014, Washington, DC. Reprinted with permission.