{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "GSA’s Child Care Information Portal |Digital.gov",
    "description": "GSA’s Child Care Information Portal",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2012/10/25/gsas-child-care-information-portal/index.json","item" : [
    {"title" :"GSA\u0026#8217;s Child Care Information Portal","summary" : "Mobile Gov Experiences are agency stories about creating anytime, anywhere, any device government services and info. This entry is a story shared by the General Services Administration. The Child Care Information Portal is a responsively designed web site built by General Services Administration’s Office of the Chief","date" : "2012-10-25T15:09:20-04:00","date_modified" : "2025-01-27T19:42:55-05:00","topics" : {
        
            "mobile" : "Mobile"
            },"branch" : "bc-archive-content-3",
      "filename" :"2012-10-25-gsas-child-care-information-portal.md",
      
      "filepath" :"news/2012/10/2012-10-25-gsas-child-care-information-portal.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2012/10/2012-10-25-gsas-child-care-information-portal.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2012/10/2012-10-25-gsas-child-care-information-portal.md","slug" : "gsas-child-care-information-portal","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2012/10/25/gsas-child-care-information-portal/","content" :"\u003cp\u003e\u003cem\u003e\u003ca href=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2013/12/GSA_ChildCareInfoPortal.png\"\u003e\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2013/12/GSA_ChildCareInfoPortal.png\"\n    alt=\"Home Screen of GSA Child Care Info Portal\"/\u003e\u003c/div\u003e\n\n\u003c/a\u003eMobile Gov Experiences are agency stories about creating anytime, anywhere, any device government services and info. This entry is a story shared by the General Services Administration.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eThe \u003ca href=\"http://apps.ocfo.gsa.gov/childcare_portal/index.shtml\" rel=\"nofollow\"\u003eChild Care Information Portal\u003c/a\u003e is a responsively designed web site built by General Services Administration’s Office of the Chief Financial Officer, accessible on computers, smartphones and tablets.\u003c/p\u003e\n\u003ch2 id=\"toc0\"\u003e\u003ca name=\"x-Why We Did It\"\u003e\u003c/a\u003eWhy We Did It\u003c/h2\u003e\n\u003cp\u003eWe decided to create a responsive design site for this project, for three reasons:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ecustomer feedback requesting mobile friendly pages\u003c/li\u003e\n\u003cli\u003eease of maintenance since we wouldn’t need to create a separate pages for mobile consumption\u003c/li\u003e\n\u003cli\u003edesire to put mobile gov into practice\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"toc1\"\u003e\u003ca name=\"x-What We Did\"\u003e\u003c/a\u003eWhat We Did\u003c/h2\u003e\n\u003cp\u003eWe referenced the \u003ca href=\"http://html5boilerplate.com/\" rel=\"nofollow\"\u003eHTML5Boilerplate\u003c/a\u003e and other CSS/HTML5 frameworks as a starting point and built a GSA branded set of style sheets and template pages that implement responsive design. We did not use any JavaScript libraries with this site, though we may well do so in the future.\u003c/p\u003e\n\u003cp\u003eWe developed two style sheets, one for 480 pixels and below, basically a mobile version and one for all larger screen sizes. All displays get the mobile version as a base. There is a media query in the header to detect if a user is displaying greater than 480 pixels. If so, they get the additional ‘desktop’ stylesheet that will support a multi-column format. The mobile site doesn’t display any images, though they are still being downloaded. This isn’t an ideal situation and there are some advanced techniques that wouldn’t download the images, but we’re not there yet.\u003c/p\u003e\n\u003cp\u003eThere are a few data tables on the site and we had to do some special formatting for them to display properly. We did a lot of testing on these; we have a public-facing “test” area so we were able to test the site with our own devices.\u003c/p\u003e\n\u003ch2 id=\"toc2\"\u003e\u003ca name=\"x-How It Worked\"\u003e\u003c/a\u003eHow It Worked\u003c/h2\u003e\n\u003cp\u003eThe Child Care Information Portal went live in early April and the initial feedback we have received has been positive. We now have a set of boilerplate templates that our developers can use to create additional new pages. Our approach to responsive design has been very pragmatic and shows how a small shop can create a reusable responsive design approach that is very maintainable on a limited budget.\u003c/p\u003e\n\u003ch2 id=\"toc3\"\u003e\u003ca name=\"x-What We Learned\"\u003e\u003c/a\u003eWhat We Learned\u003c/h2\u003e\n\u003cp\u003eWe found out that responsive design can be included in all of our sites. There is a learning curve we needed to go through for this site; almost all of the effort was involved with the creation of the style sheets. For instance, just figuring out how to move our Contact Us box from one place to the other in the style sheets took a lot of time.\u003c/p\u003e\n\u003cp\u003eWe learned so much more about responsive design in a month because we actually created a site than we would have if we’d just been reading about it. We were surprised by how well it worked.\u003c/p\u003e\n\u003cp\u003eOne specific technique we would recommend is examining other well-designed responsive web sites to understand the techniques and tools they are using. With the Google Chrome browser, a developer can right click a page and select “Inspect Element”. This launches the Chrome developer tools that have very powerful features for examining the HTML5, CSS3, and JavaScript code used on a site.\u003c/p\u003e\n\u003ch2 id=\"toc4\"\u003e\u003ca name=\"x-What's Next\"\u003e\u003c/a\u003eWhat’s Next\u003c/h2\u003e\n\u003cp\u003eWe will begin applying responsive techniques to the interactive functionality of our applications, instead of just content pages. We also will be investigating the use of a Content Management System with responsive templates for maintaining our content.\u003c/p\u003e\n\u003cp\u003eAs the display sizes and capabilities of mobile devices grows, we will continue to revise our style sheets and templates to provide the best user experience.\u003c/p\u003e\n\u003ch2 id=\"toc6\"\u003e\u003ca name=\"x-Contact\"\u003e\u003c/a\u003eContact\u003c/h2\u003e\n\u003cp\u003eRyan Day | ryan (dot) day (at) gsa (dot) gov\u003c/p\u003e\n\u003cp\u003eWilliam Wales | william (dot) wales (at) gsa (dot) gov\u003c/p\u003e\n"}
  ]
}