Helpful Resources to Make Your Content Mobile-Friendly

Smartphones make up 75% of the mobile market—which makes mobile-friendliness a must for government agencies. With the recent update to Google’s search algorithm, or what some are calling Mobilegeddon, the case for building a mobile-friendly site becomes even stronger.

monicaodo/iStock/Thinkstock

For many government organizations, responsive Web design (RWD) has been the answer to their mobile question. While RWD is by no means a panacea, it can provide agencies with a way to reach their customers on many devices with one site.

RWD refers to a fluidly constructed Web page layout that scales from handheld device displays to large, high-resolution computer displays using flexible typography, flexible images, fluid grids, and CSS3 media queries.

Over the past year, we have published several articles on RWD based on collaboration and case studies provided by members from the MobileGov Community of Practice.

Here are a few resources to help in your agency’s quest to become responsive/mobile-friendly.

Specific Mobile Web Techniques and Tools

Open Source Content Management Systems and Responsive Web Design Webinar Recap

This helpful webinar discusses content management systems like Drupal and how to use them to“grid” your website for RWD.

Sites.usa.gov

Sites.usa.gov is a shared service to help agencies focus on creating great content rather than on building systems to deliver that content. Sites provides an easy way to create a website that incorporates RWD and meets federal requirements.

Digital Analytics Program

The Digital Analytics Program’s customized Web analytics solution provides federal employees access to a common set of web metrics like pageviews, unique users, mobile vs. desktop visits, average time on page, bounce rate, number of downloads, etc.

Code Developed by Department of Health and Human Services to Make Tables Mobile-Friendly

The Department of Health and Human Services developed and shared Bootstrap code to make tables and charts responsive. The Defense Finance and Accounting Services (DFAS) leveraged this code for their site.

Challenges of RWD

Responsive Web Design Challenges Webinar Recap

Agencies discuss the challenges faced when implementing RWD, including making a case for why your agency should adopt RWD, scheduling/project management concerns, and dealing with specific things such as PDFs and tables on the redesigned site.

Responsive Web Design Case Studies

From building the case for RWD to working through procurement cycles, we have a number of case studies showing how agencies implemented RWD.

• DFAS made a case for switching to RWD when they saw their mobile usage rates increasing at the same time the site’s bounce rate was also increasing, signifying that more people were coming from mobile devices and leaving quickly when they had trouble finding the information they were looking for. DFAS then utilized the responsive template code developed by HHS to make mobile-friendly data tables.

• GSA’s Child Care Information Portal was responsively redesigned based on customer feedback requesting a mobile experience, as well as a desire to simplify their website management by not having to create separate pages for mobile use.

• AIDS.gov was one of the first agencies to implement a responsive design when they saw increasing traffic to their mobile site.

• HHS.gov moved to a responsive template to ensure that users accessing their site in a mobile environment had the best possible experience. One challenge faced by moving a site the size of HHS.gov into a responsive template was making tables work in a responsive environment, which HHS addressed.

• The National Parks Service park websites were made mobile-friendly to improve the quality of the user experience and enhance the virtual visit experience.

• The Department of Education implemented a responsive web design while facing the challenges of dealing with multiple content management systems and budget limitations.