{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Open Source Content Management Systems and Responsive Web Design Webinar Recap |Digital.gov",
    "description": "Open Source Content Management Systems and Responsive Web Design Webinar Recap",
    "home_page_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/","feed_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2014/09/03/mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap/index.json","item" : [
    {"title" :"Open Source Content Management Systems and Responsive Web Design Webinar Recap","summary" : "Most of us in the DigitalGov community recognize that responsive Web design is one approach to mobile first and most of us have a pretty clear picture of what it means—a responsive website will adjust to different devices, and the content will neatly change its layout from one screen size to another. But do you","date" : "2014-09-03T10:00:46-04:00","date_modified" : "2024-04-02T09:45:13-04:00","authors" : {"ellen-arnold-losey" : "Ellen Arnold Losey"},"topics" : {
        
            "application-programming-interface" : "Application programming interface",
            "content-strategy" : "Content Strategy",
            "mobile" : "Mobile",
            "open-source" : "Open Source"
            },"branch" : "cm-topics-button-component",
      "filename" :"2014-09-03-mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap.md",
      
      "filepath" :"news/2014/09/2014-09-03-mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/cm-topics-button-component/content/news/2014/09/2014-09-03-mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/cm-topics-button-component/content/news/2014/09/2014-09-03-mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap.md","slug" : "mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap","url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2014/09/03/mobile-web-templates-how-to-use-open-source-cms-to-implement-responsive-web-design-webinar-recap/","content" :"\u003cp\u003eMost of us in the DigitalGov community recognize that responsive Web design is one approach to \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2013/09/30/mobile-first/\"\u003emobile first\u003c/a\u003e and most of us have a pretty clear picture of what it means—a responsive website will adjust to different devices, and the content will neatly change its layout from one screen size to another.\u003c/p\u003e\n\u003cp\u003eBut do you know \u003cem\u003ehow\u003c/em\u003e it happens? Would you know how to \u003cem\u003eimplement\u003c/em\u003e responsive Web design in your agency? The “\u003ca href=\"\n\"\u003eMobile Web Templates: How to Use Open Source CMS to Implement Responsive Web Design\u003c/a\u003e” webinar (embedded below) gave us the tools to say yes to these questions.\u003c/p\u003e\n\u003cp\u003e[youtube=http://www.youtube.com/watch?v=iKeh25cKgrY\u0026amp;w=600]\u003c/p\u003e\n\u003cp\u003eAs we’ve been learning since the \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2014/03/24/why-go-responsive-heres-what-feds-are-saying/\"\u003eFebruary workshop on the topic\u003c/a\u003e, federal Web managers are using a number of solutions to implement responsive design on their sites, including \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2013/10/28/always-future-ready-the-benefits-of-open-content-models-and-structured-data-webinar/\"\u003estructured data and content models\u003c/a\u003e, APIs, and/or leveraging existing content management systems (CMS). Last month’s webinar featured three speakers presenting solutions that use open-source CMS: \u003cstrong\u003eRyan Day\u003c/strong\u003e from the General Services Administration, \u003cstrong\u003eEric Brassil\u003c/strong\u003e from the State Department, and \u003cstrong\u003eKaren Trebon\u003c/strong\u003e from the General Services Administration.\u003c/p\u003e\n\u003ch3 id=\"drupal-at-gsas-child-care-information-portal\"\u003eDrupal at GSA’s Child Care Information Portal\u003c/h3\u003e\n\u003cp\u003eRyan Day’s presentation covered how his team used Drupal to implement responsive design during the rebuilding of their \u003ca href=\"http://financeweb.gsa.gov/childcare_portal\"\u003eChild Care Information Portal\u003c/a\u003e. In Drupal, themes are a major component in determining how your site will function, and Ryan stressed the need to pick the right theme—one that will meet your content needs AND is responsive—and let it do the heavy lifting for you.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/08/600-x-300-An-Omega-grid-sets-the-width-and-location-of-content-blocks.jpg\"\n    alt=\"The Omega grid sets the width and location of your content blocks.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eRyan went on to show us how to configure Drupal, and his team’s chosen theme \u003cem\u003eOmega\u003c/em\u003e, so that it will rearrange your site’s content display based on your user’s device. Within Drupal, you can define a region type for each block of content, so that your CMS knows what is top-level navigation, what is sidebar navigation, what is main content, etc. Additionally, the \u003cem\u003eOmega\u003c/em\u003e theme has another level of configuration, sections and zones, that allow you to identify where the different regions should move to as your user’s screen width narrows. You can even define different CSS styles for different device widths.\u003c/p\u003e\n\u003cp\u003eMuch of this configuration is possible due to \u003cstrong\u003emedia queries\u003c/strong\u003e, which are scripts that allow your site to assess the width of a user’s screen and use this information to make key layout determinations. Ryan’s site has three set sizes—narrow, normal and wide—each with its own set of specifications. He has found that \u003cem\u003eOmega\u003c/em\u003e does a great job of scaling the site for devices at these widths, as well as widths in-between. This model of configuring your site based on screen width is preferable to the “device-sniffer” model, which assesses the exact device being used and requires you keep a list of devices and specifications that can become outdated quickly.\u003c/p\u003e\n\u003ch3 id=\"wordpress--mediawiki-at-state\"\u003eWordPress \u0026amp; MediaWiki at State\u003c/h3\u003e\n\u003cp\u003eEric Brassil highlighted that at the State Department, diplomacy happens in the field and on a variety of devices. Public diplomacy officers are located throughout the globe, and new devices are being piloted regularly, so there was a need to implement responsive design on the websites these employees were using so they could have access to the information, platform and resources they needed. The tools Eric’s team chose to focus on first were \u003cstrong\u003eCommunities@State\u003c/strong\u003e, a WordPress-powered internal blogging platform, and \u003cstrong\u003eDiplopedia\u003c/strong\u003e, State’s online collaborative encyclopedia, which uses MediaWiki.\u003c/p\u003e\n\u003cp\u003eWhile mobile responsiveness hadn’t been a priority when these tools were selected, the tools’ open-source development meant that others had already created responsive solutions State could use. With Communities@State, Eric and his team started by upgrading to a newer version of WordPress, and then identified responsive themes and plug-ins that would work with all the browsers that State employees need. They also had to test the themes on multiple devices before narrowing down the options and making a choice. There are 50+ unique Communities@State blogs, each with its own administrator, so Eric and his team have begun the large task of working with each administrator to update, test the blog’s new theme, move and reformat the content. It’s a time-consuming process, but they’re rolling along, and as of last month, about 1/3 of the blogs were updated.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/08/600-x-310-A-Communities-at-State-blog-that-is-now-mobile-friendly.jpg\"\n    alt=\"A Communities@State blog that is now mobile-friendly.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eAs with their Communities platform, the first step in making Diplopedia more responsive was to upgrade the MediaWiki software. Next, they identified an extension that would make the site responsive, but during extensive testing they discovered a few issues that needed to be addressed before implementing. For example, multi-column tables were not displaying properly on mobile devices. While Eric and his team were able to find a CSS solution that made the tables scrollable, they are currently migrating some tables over to a different format, and are advising users to avoid creating multi-column tables. As a result of their improvements, employees can use Diplopedia to make conference portal pages attendees can view while at the meeting, eliminating the need to distribute 3-ring binders of materials.\u003c/p\u003e\n\u003ch3 id=\"sitesusagov\"\u003eSites.USA.gov\u003c/h3\u003e\n\u003cp\u003eThe third speaker, Karen Trebon, gave an overview of \u003ca href=\"https://sites.usa.gov/\"\u003eSites.USA.gov\u003c/a\u003e, a new tool for creating a responsive website offered by GSA. Sites.USA.gov offers government Web managers an opportunity to quickly and easily create a responsive website that adheres to the Digital Government Strategy of “anywhere, any time, on any device.” These sites are built on the open-source WordPress CMS and are available in 18 different themes, which have been selected and tested for 508 compliance, as well as responsive design.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/08/600-x-210-Responsiveness-in-action-on-the-eCPIC-Electronic-Capital-Planning-and-Investment-Control-System.jpg\"\n    alt=\"Responsiveness-in-action on the Electronic Capital Planning and Investment Control System’s Sites.usa.gov site.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eYou begin the process by clicking Sign-up at \u003ca href=\"https://sites.usa.gov/\"\u003eSites.USA.gov\u003c/a\u003e. After a 30-minute kick-off call, and the determination of your theme and site administrators, your site environment can be set up in a week or less, Karen said. Current clients include the Commission to Eliminate Child Abuse and Neglect Fatalities, the Electronic Capital Planning and Investment Control System, and the Christopher Columbus Fellowship Foundation. Visit \u003ca href=\"https://sites.usa.gov/\"\u003eSites.USA.gov\u003c/a\u003e or email \u003ca href=\"mailto:sitessupport@gsa.gov\"\u003esitessupport@gsa.gov\u003c/a\u003e for more information.\u003c/p\u003e\n\u003cp\u003eThe responsive solutions open-source software provides are a key reason for choosing to go with open source. When software improvements are crowdsourced, the need to accommodate a variety of users drives innovation, and each innovation benefits the entire community of users. After viewing this webinar, Web managers should feel armed with a better understanding of how responsive Web design happens on the back-end, and can go forth and implement!\u003c/p\u003e\n\u003cp\u003eMembers of the \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/communities/\" title=\"Mobile\"\u003eMobileGov Community of Practice\u003c/a\u003e will be featured in another event focusing on mobile Web implementation. Sign up for the \u003ca href=\"\n\"\u003e“\u003c/a\u003e\u003cspan style=\"color: #222222\"\u003e\u003ca href=\"\n\"\u003eMobileGov Mystery: Getting Buy-in and Other Challenges In Mobile Web Implementations”\u003c/a\u003e webinar happening on September 10 from 2-3pm EST.\u003c/span\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.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}