HHS pioneers responsive website design, shares out template

By Matt Wingfield
Federal News Radio

It seems like everyone has a smartphone or tablet device these days, and that new-found ubiquity has forced federal agencies to rethink their mobile sites — specifically how they’re laid out. Leading that charge is the Health and Human Services Department (HHSD), which recently moved its HHS.gov to a responsive design template.

Now HHS is willing to share that design code with any agency that wants it.

“That’s typical of federal digital community,” said Dick Stapleton, the executive director of the HHS Digital Communications Division on a recent Federal Drive with Tom Temin. “There’s a real sense of sharing with each other.”

Stapleton explained that the responsive design template is designed to recognize what sort of device a user is viewing the site on, and “deliver a pretty traditional-looking website,” regardless of the viewing platform.

“If you come in on a tablet, the space that you have is smaller,” Stapleton said. “And obviously if you’re coming in on a smartphone, you have a very narrow field. And what responsive design does, in essence, is it recognizes that you’re coming in on a smartphone and it reconfigures the … layout of the Web content so that it fits properly on a smartphone.”

Specifically, Stapleton said that the site will make itself linear, rather than rectangular, for smartphone users, which allows easier and quicker navigation. “The Web designer decides, ‘Here’s the sequence of importance for this content.’ So typically stuff on the right sidebar, where nobody looks anyway because they think it’s an advertisement … that gets pushed down to the bottom of the screen.”

HHS’ new code is a bit of a breakthrough for the whole industry, Stapleton said, because previously agencies would have to keep a website for every available device, which was nearly impossible. Cancer.gov, Stapleton said, used to maintain a desktop-specific website and then created a separate, parallel content site for smartphones and mobile devices.

“That’s just not practical,” Stapleton said. “Nobody has the resources to create an entire second inventory of websites, let alone maintain it. So the answer had to be in code.”

And so it was, though Stapleton admitted HHS’ code isn’t a cure-all for shoddy website design. HHS was fortunate enough to have a good, pre-existing website, but other agencies might not be so lucky.

“If your code is clean, if your site is well coded, you’re in good shape,” he said. “We were able to do what we did because we had good inherent coding in the first place. If you don’t have that, this [code] simply isn’t going to work. Garbage in, garbage out.”

However, Stapleton said there’s much more to designing a good mobile site than just considering the code.

“It’s very different designing [websites] for mobile than it is for desktop,” he said. “On desktop, people click. They don’t want to be scrolling, particularly a horizontal scroll. And so you have a lot of clicks, you have a lot of links. … That doesn’t work so well on a smartphone. It’s a pain. Smartphones are all about swiping, which is just the opposite. A really long page is fine because you can swipe it fast with your finger.”

Stapleton also offered two suggestions for agencies looking to increase their mobile-friendliness. Everyone, he said, should start by considering the site’s “find-ability.”

“When you’re a big agency like we are, with a huge range of content, you have to find a way for people to find what they’re looking for in that content,” Stapleton said. “Everything around [the] search [function] is critical.”

And, as difficult as that might be, “the more difficult piece is the content itself,” Stapleton said. “You can’t bury the solid information 10 screens down. That’s not how people use mobile devices — they’re in a hurry, they’re quick, they want instant gratification. … They want to be able to get that kind of [relevant] information without having to go searching forever.”

There’s also still some work to be done on some HHS sub-sites, Stapleton admits, but the code has already helped a number of agencies — including HealthCare.gov.

HHS’ code is available to all federal agencies through digitialgov.gov.

RELATED LINKS:

HHS Buyers Club opens door to innovative approaches to IT projects

Government hackers try to crack HealthCare.gov

Comments

Sign up for breaking news alerts