Skip to page content

Responsive Design

The template of FAA's public website (www.faa.gov) and current versions of the application templates employ template-wide device-agnostic responsive design.

Concepts

Responsive design is the practice of decorating a page (or template) so that its design responds to various aspects of the end user's configuration. Typically, this means authoring CSS media queries that are applied only when the dimensions (height, width) of the browser's viewport match certain minimum or maximum criteria. These types of media queries are known colloquially as breakpoints. Other common uses of media queries include screen resolution, viewport aspect ratio, and device orientation.

Device agnostic refers to the developer's approach to handling the countless combinations of device sizes, browsers, configurations, aspect ratios, resolutions, etc. Being device agnostic means that there is no "iPhone 6" view, no "iPad mini 4" view, no "laptop/desktop" view, and so on. Rather, there is a continuum of support across all devices and all viewport sizes. The developer bases the responsive breakpoints — and thus, the layout decisions — on the content, rather than on the ever-changing landscape of specific devices and viewports.

This device-agnostic philosophy is echoed throughout President Obama's Digital Government Strategy, first published in 2012.

Development and Testing

While the public website's template and current versions of the application templates are responsive and work well out of the box with a wide variety of viewport sizes, developers still need to incorporate responsive design development and testing into their workflows to ensure that pages with custom design features are accessible — regardless of the device.

The same concept applies to browser testing. In order for individual pages to maintain the same level of support as the template, developers must develop for and test with various browsers and browser versions.

In short, while the template itself supports a wide array of browsers, browser versions, and viewport sizes, this solid foundation is no guarantee that any given page will still be compatible once a developer customizes the page. Due diligence is still required.

Page last modified: May 24, 2017 11:53:56 AM EDT