Responsive Web Design Challenges Webinar Recap
Marissa Newhall, acting director of the Office of Digital Strategy and Communications at the Department of Energy (DOE), shared the reasons for going responsive with the energy.gov website.
Initially, with the overhaul of DOE.gov in 2010, the Department of Energy’s vision was to:
- Develop on a single open source platform solution
- Consolidate all of the department’s public-facing websites (of which there were many)
- Create a trusted customer-friendly brand for the agency under energy.gov
Not long after the initial launch of energy.gov, a review of the analytics showed three things:
- a distinct decrease in desktop users and corresponding increase in mobile and tablet users,
- overall visits doubled during this time due to a major phase of our content integration/migration, and
- the content users were looking for was based on consumer energy savings, such as how to choose a new hot water heater, or learn about home heating and cooling systems.
Change in Strategy
These analytics sparked a change in strategy. As a result, energy.gov ended up developing an entirely new section of their website called Energy Saver, with content devoted to consumer energy efficiency information and a new tool that allowed users to search for state energy rebates.
With the development of these cool tools, the department wanted consumers to be able to easily access the content from any device, whether they were researching at home or shopping at their local hardware store. Going responsive was the way to focus on their highest-value content on the site, and make it more accessible to the growing numbers of mobile users. Focus groups showed the current content wasn’t usable on mobile devices. With the large increase in visitors, the team focused on user experience to make sure the content was good on both mobile and the desktop.
Main Challenge
Energy’s main challenge was coordination with content stakeholders. Keeping the project on track required regular calls with developers, internal website users and a Web council. Clearly defining high-value areas and sticking to them proved to be a successful approach to the overwhelming number of tasks. When producing content now, they really think about how it looks on mobile with their new, responsive content strategy.
DFAS’s Four Challenges
The second presenter was Debra Fioritto from the Defense Finance and Accounting Service (DFAS), who identified three challenges in her Responsive Web Design implementation.
First Challenge: Make the Case
Debra’s first challenge was to make the case for responsive design to her agency’s leadership, a short two years after previously updating their website. DFAS’s mobile usage rates were increasing while her site’s bounce rate was also increasing, signifying that more people were coming from mobile devices and leaving quickly when they had trouble finding the information they were looking for. These analytics told a clear story of how DFAS could better meet its customer service objectives, and the agency leadership saw clearly that a responsive redesign was needed. The most effective way to make this case was to tell her leadership the story using the same tools that had initially revealed the story to her: her site’s analytics.
Second Challenge: Timeline
Her second challenge was her timeline. The mobile templates were developed relatively quickly, in less than two months, but technical upgrades that were required added several additional months before the new design could be implemented. While Debra initially thought this lag would be problematic, she was able to turn it into a positive by using this time to: visit her different mission areas, explain to them what was changing and how it would better suit users’ needs, and get people excited about the new and improved site. Once the new responsive design was implemented, the site’s analytics improved dramatically. Mobile use continued to increase, and bounce rates sharply decreased for both mobile and desktop users, indicating that users were getting better service across the board.
Third Challenge: Tables & PDFs
Debra’s third challenge is one she continues to work through: the site still has some content that works better on a desktop, such as tables and PDFs. This content is being adapted to be more mobile-friendly, and her team is exploring an Adobe tool that converts PDFs into HTML. Debra has a goal to get her agency to think Mobile First, which will streamline the process by taking mobile display into consideration while the content is being developed.
Technical challenges continued to present themselves after the site launched. A Facebook feed tool on the site was discovered to not be Section 508 compliant and some desktop browsers were not properly displaying the new design. In both cases, the challenges could be remedied by changing the code or creating a workaround. In her parting thoughts, Debra noted that if she could re-do the project, she would incorporate more time for testing. But given that her mobile user base—currently 35% of her Web traffic—is growing month by month, the completed DFAS redesign is undoubtedly creating a better experience for her agency’s customers, making the redesign project a triumph for her agency.
Missed the webinar? You can watch it below.
[youtube=http://www.youtube.com/watch?v=2RjPMpu_03s&w=600]
Ellen Arnold Losey is the Senior Graphic Designer and Webmaster at the Institute of Museum and Library Services and Debra Harris is a Public Affairs Specialist at the Defense Finance and Accounting Service. If you’re interested in helping solve government challenges around Responsive Web Design, join the MobileGov Community of Practice and participate in October’s MobileGov Around the Horn Call where we will discuss responsive Web design performance.
