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.
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
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.
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.
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.
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.
Ryan Day | ryan (dot) day (at) gsa (dot) gov
William Wales | william (dot) wales (at) gsa (dot) govEdit