{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Responsive Web Design Challenges Webinar Recap |Digital.gov",
    "description": "Responsive Web Design Challenges Webinar Recap",
    "home_page_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/","feed_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2014/10/21/responsive-web-design-challenges-webinar-recap/index.json","item" : [
    {"title" :"Responsive Web Design Challenges Webinar Recap","summary" : "A website redesign is never an easy task, but when responsiveness is one of your redesign’s key goals, special considerations come into play that can present unique challenges. In the September webinar on Responsive Web Design Challenges in Government, we heard from","date" : "2014-10-21T10:00:18-04:00","date_modified" : "2024-04-02T09:45:13-04:00","authors" : {"ellen-arnold-losey" : "Ellen Arnold Losey","debra-harris" : "Debra Harris"},"topics" : {
        
            "analytics" : "Analytics",
            "mobile" : "Mobile"
            },"branch" : "cm-topics-button-component",
      "filename" :"2014-10-21-responsive-web-design-challenges-webinar-recap.md",
      
      "filepath" :"news/2014/10/2014-10-21-responsive-web-design-challenges-webinar-recap.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/cm-topics-button-component/content/news/2014/10/2014-10-21-responsive-web-design-challenges-webinar-recap.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/cm-topics-button-component/content/news/2014/10/2014-10-21-responsive-web-design-challenges-webinar-recap.md","slug" : "responsive-web-design-challenges-webinar-recap","url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2014/10/21/responsive-web-design-challenges-webinar-recap/","content" :"\u003cp\u003e\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/250-x-444-responsive-design-Energy-Gov-website-Oct20th2014-Android.jpg\"\n    alt=\"The Energy.gov responsive website as seen on an Android phone.\"/\u003e\u003c/div\u003e\n\nA website redesign is never an easy task, but when responsiveness is one of your redesign’s key goals, special considerations come into play that can present unique challenges. In the September webinar on Responsive Web Design Challenges in Government, we heard from two agencies who identified coordination, leadership buy-in and content decisions when mobilizing their websites.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eMarissa Newhall\u003c/strong\u003e, acting director of the Office of Digital Strategy and Communications at the \u003cstrong\u003eDepartment of Energy\u003c/strong\u003e (DOE), shared the reasons for going responsive with the \u003ca href=\"http://www.energy.gov\"\u003eenergy.gov\u003c/a\u003e website.\u003c/p\u003e\n\u003cp\u003eInitially, with the overhaul of DOE.gov in 2010, the Department of Energy’s vision was to:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDevelop on a single open source platform solution\u003c/li\u003e\n\u003cli\u003eConsolidate all of the department’s public-facing websites (of which there were many)\u003c/li\u003e\n\u003cli\u003eCreate a trusted customer-friendly brand for the agency under energy.gov\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eNot long after the initial launch of energy.gov, a review of the analytics showed three things:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ea distinct decrease in desktop users and corresponding increase in mobile and tablet users,\u003c/li\u003e\n\u003cli\u003eoverall visits doubled during this time due to a major phase of our content integration/migration, and\u003c/li\u003e\n\u003cli\u003ethe 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.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"change-in-strategy\"\u003eChange in Strategy\u003c/h2\u003e\n\u003cp\u003eThese 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.\u003c/p\u003e\n\u003cp\u003eWith 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 \u003cstrong\u003ehighest-value content\u003c/strong\u003e 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 \u003cstrong\u003euser experience\u003c/strong\u003e to make sure the content was good on both mobile and the desktop.\u003c/p\u003e\n\u003ch2 id=\"main-challenge\"\u003eMain Challenge\u003c/h2\u003e\n\u003cp\u003eEnergy’s main challenge was \u003cstrong\u003ecoordination with content stakeholders\u003c/strong\u003e. 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.\u003c/p\u003e\n\u003ch2 id=\"dfas8217s-four-challenges\"\u003eDFAS’s Four Challenges\u003c/h2\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/600-x-408-responsive-design-DFAS-Mil-website-Oct20th2014-Android.jpg\"\n    alt=\"The DFAS.mil responsive website as seen on a laptop monitor\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eThe second presenter was \u003cstrong\u003eDebra Fioritto\u003c/strong\u003e from the \u003cstrong\u003eDefense Finance and Accounting Service\u003c/strong\u003e (\u003ca href=\"http://www.dfas.mil\"\u003eDFAS\u003c/a\u003e), who identified three challenges in her Responsive Web Design implementation.\u003c/p\u003e\n\u003ch3 id=\"first-challenge-make-the-case\"\u003eFirst Challenge: Make the Case\u003c/h3\u003e\n\u003cp\u003eDebra’s first challenge was to \u003cstrong\u003emake the case\u003c/strong\u003e 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.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/600-x-356-DFAS-Avg-Monthly-Visits.jpg\"\n    alt=\"Bar chart showing DFAS average monthly visits by quarter\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"second-challenge-timeline\"\u003eSecond Challenge: Timeline\u003c/h3\u003e\n\u003cp\u003eHer second challenge was her \u003cstrong\u003etimeline\u003c/strong\u003e. 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.\u003c/p\u003e\n\u003ch3 id=\"third-challenge-tables--pdfs\"\u003eThird Challenge: Tables \u0026amp; PDFs\u003c/h3\u003e\n\u003cp\u003eDebra’s third challenge is one she continues to work through: the site still has some content that works better on a desktop, such as \u003cstrong\u003etables\u003c/strong\u003e and \u003cstrong\u003ePDFs\u003c/strong\u003e. 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.\u003c/p\u003e\n\u003cp\u003eTechnical 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.\u003c/p\u003e\n\u003cp\u003eMissed the webinar? You can watch it below.\u003c/p\u003e\n\u003cp\u003e[youtube=http://www.youtube.com/watch?v=2RjPMpu_03s\u0026amp;w=600]\u003c/p\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eEllen Arnold Losey\u003c/strong\u003e is the Senior Graphic Designer and Webmaster at the Institute of Museum and Library Services and \u003cstrong\u003eDebra Harris\u003c/strong\u003e is a Public Affairs Specialist at the Defense Finance and Accounting Service.\u003c/em\u003e\n\u003cem\u003eIf you’re interested in helping solve government challenges around Responsive Web Design, join the \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/communities/\" title=\"Mobile\"\u003eMobileGov Community of Practice\u003c/a\u003e and participate in \u003ca href=\"\n\" title=\"October Mobile Gov Around the Horn Call\"\u003eOctober’s MobileGov Around the Horn Call\u003c/a\u003e where we will discuss responsive Web design performance.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}