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?
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:
- 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.
- Once your device is identified, the website display adjusts to your device type.
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.
Your Ideas