U.S. Flag

Making a difference in how people find health information, today and into the future.

Building Responsive Design Websites at HHS

How are you viewing this article right now? Google Analytics reports suggest there is a 20% chance you’re looking at it on a mobile device. In October we quietly relaunched this website in responsive design, making it the first responsive design site in HHS’s Digital Communications Division.

Responsive design is an approach to web development that uses special code to ensure a site is easy to read and scroll across a wide range of devices (from desktop computer monitors to mobile phones).

While this is a new approach to website design for our team, other HHS agencies have already debuted responsive design sites. AIDS.gov was recently launched in responsive design, as was the Centers for Medicare & Medicaid Services’ updated Medicare.gov. Both sites use a version of the proprietary content management system (CMS) Percussion—the same one we use on many of our sites. This Digital Strategy site, however, was built using Drupal—a free, open source CMS. So launching this site in responsive design was an entirely new experience.

Why Create a Website in Responsive Design?

Websites using responsive design are able to scale to various browser sizes on laptops, tablets, e-readers, and smartphones.

Responsive design enables websites to
function seamlessly on all these devices,
no matter their browser size.

As electronic devices evolve, the tech community is forced to rethink how we build websites.  Instead of designing websites to look good only on desktop computers—with fixed widths and large graphics—we now use fluid layouts.  When we use this more flexible approach, images resize automatically and ‘browser sniffing’ creates consistent user experiences across devices.  A media query is information sent from your phone to our website server describing what type of device you’re using.

The alternative to responsive design is to create a completely separate version of the website for mobile devices. This increases the risk of the sites becoming out of sync or outdated.

Through responsive design we can support traditional computer users as well as tablet and smartphone users, all from one URL and code base. This approach embraces the Digital Strategy’s principle of “build once, use many times.”

How Responsive Design Works

When a device pulls up our website:

  1. A ‘browser sniffer’ (also known as a media query) notes the physical characteristics of the device you’re using and identifies whether it is a computer, tablet, or smartphone, as well as your screen size.
  2. Once your device is identified, the website display adjusts to your device type.
Screenshots of how HHS.gov/DigitalStrategy displays on a desktop, tablet, and smartphone using responsive design

View of HHS.gov/DigitalStrategy
displayed on a desktop, tablet, and smartphone
using responsive design.

From a design standpoint, we must determine at which point the website will change from its desktop layout to the smaller version. The point (based on screen width) this change occurs is called the “breakpoint.” The breakpoint on the Digital Strategy site is 740 pixels, which is a size comparable to the landscape view of smartphone screens.

Because specific screen sizes vary, responsive design incorporates the use of fluid design. Having a fluid design structure allows images and text to resize or move slightly to adjust to a device’s screen size. This ensures that you see the best layout for your screen and means we don’t need to design for every kind of mobile device (of which there are hundreds).

You can also test this out in your desktop by manually resizing the window of your Web browser. Click the option at the top right of your browser to toggle between full screen and a smaller view. Then use the resize option at the bottom right or left to reduce the width of your browser. At about a quarter of the screen width you’ll notice the site changes its layout. This is the breakpoint.

The Future of Responsive Design at HHS

We are applying the lessons learned since launching Digital Strategy in responsive design to other priority sites. You can help us test these by visiting each site and letting us know what you think. If you find any issues, use the comments section below to tell us about them. Please include the specific URL and describe the problem you’re seeing.

How is this site working for you on mobile devices?

Join the Conversation

By submitting this form, you accept the Mollom privacy policy.

Your Ideas

Submitted by brenda on
Works ok. Sorry I can't say the same for healthcare.gov. have tried since 12:01 oct. 1 and cannot access site. Info from other sites shows plans offered in tennesee have high deductibles and 50 percent coinsurance. Do they think we can't do simple math? I will pay the penalty and they can keep their worthless piece of paper. I had hoped this would be a real help to people but haven't found one person in Tn who is better off.
Submitted by MadMark on
This wasn't tested with the full site was it? Would not it have been more appropriate to make sure that it works on *ONE* platform and THEN expanding it to the rest of the world? Who forgot to put TIME STAMPS in EVERY record?
Submitted by Allan on
As a web design firm we work with responsive design all the time. It's great to see our government using technology so that folks on mobile devices can easily get the information. Great job! The site worked great for us!
Submitted by Dennis on
So basically everything gets pushed into one long column that does not scale well on large monitors. I think this all sounds good in theory but the problem is some content simply does not scale well. Also, in trying to make full-sized sites work well on tiny devices you defeat the value of having big high resolution displays that can handle large amounts of data and interactive tools and features. I appreciate the challenge you face in dealing with so many form factors but this approach is not really a win-win IMHO.
Submitted by Anonymous on
Great. I really like
Submitted by Anonymous on
Very well on kindle fire