Designing And Implementing A New Responsive Design In Two Weeks Time

A PaperThin customer, the U.S. Department of the Interior (DOI) protects America’s natural resources and heritage, honors our cultures and tribal communities, and supplies the energy to power our future.  In order to satisfy the White House Digital Government Strategy Milestones which include identifying and optimizing priority customer facing services for mobile use, DOI tasked PaperThin partner Fig Leaf with making responsive for users visiting the site via a tablet or smart phone. 

The Solution

Fig Leaf’s team quickly drafted mobile designs in a test environment to demonstrate how the mobile experience would be served up in both portrait and landscape modes. They then implemented the responsive design using CommonSpot. The biggest challenge involved decisions for which menu items to include on the smaller mobile view.  The decision was made to work with the top level navigation items along with the main home page story and most recent news.  Fig Leaf also included mobile access to site search and newsletter signup.   

Following approval from DOI leadership, Fig Leaf’s team modified the style sheets and template to add additional components that would only show when the screen size was smaller than a certain size; for example when go to on laptop you’ll see a desktop view with screen size greater than 1024 but when visit from mobile with restricted screen size navigation will change.  Visitors using a mobile device will see icons that don’t appear on the standard desktop view.  Media queries are used to detect a visitor’s screen resolution and the site is optimized to display content based on the visitor's device. 

The Results

The new responsive design was fully implemented in two weeks time. The key success factors were the quick design turnaround and approval by Fig Leaf, and CommonSpot's responsive design capabilities.  The style sheet update in the CommonSpot Content Management System (CMS) immediately impacted all 24,000 pages of website content making each page available via tablet or smartphones.  

Customer Information

Site Type: Internet