GSA’s Child Care Information Portal

Oct 25, 2012

Home Screen of GSA Child Care Info Portal
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 Financial Officer, accessible on computers, smartphones and tablets.

Why We Did It

We decided to create a responsive design site for this project, for three reasons:

  • customer feedback requesting mobile friendly pages
  • ease of maintenance since we wouldn’t need to create a separate pages for mobile consumption
  • desire to put mobile gov into practice

What We Did

We referenced the HTML5Boilerplate 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.

We 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.

There 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.

How It Worked

The 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.

What We Learned

We 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.

We 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.

One 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.

What’s Next

We 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.

As 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.

Contact

Ryan Day | ryan (dot) day (at) gsa (dot) gov

William Wales | william (dot) wales (at) gsa (dot) gov

Oct 25, 2012