search

What Is Responsive Web Design?

In short, responsive design allows the layout of your website to adapt to different devices (e.g., desktop computers or mobile phones), with the goal of making your site look better and easier to use for everyone.

View of responsive site in desktop web browser.
Responsive website on a large screen. Click image for full-size.
View of responsive site in mobile web browser.
Responsive website on a small screen, such as a mobile phone. Click image for full-size.

On the CALS responsive websites, moving from a wide, desktop view to a narrow, mobile view has a major effect on how navigation menus and sidebars are displayed.

Navigation Menus

In the wider desktop view, navigation menus are shown at the top of the page (the global site navigation), and also in the left sidebar (the current section navigation).

In the narrower mobile view the two navigation menus are collapsed into a gray bar with a menu icon (the three stacked lines) under the site name. Clicking or tapping on this menu bar opens the global site navigation menu, and shows you where you are in the site.

Because the menu is collapsed by default in the mobile view, we recommend directing visitors to "sub-pages" by linking to them within the current page's text. For example, you could add a "More Resources in this Section" list of links near the bottom of the page.

Sidebars

In the wider desktop view, the page is displayed with 3 columns: a left sidebar, a main content area, and an optional right sidebar. In the narrower mobile view, instead of displaying side-by-side, the 3 columns are stacked in the following order:

  • Main content area
  • Right Sidebar
  • Left Sidebar

You should be aware that content in the sidebars won't always appear near the top of the page. If any information needs to be seen by visitors immediately upon visiting a page, it should be placed near the top of the main content area instead.

Content Strategy for Responsive Websites

Writing for responsive websites is the same as writing for any website. Help people quickly find the information they're looking for by following the guidelines on our "Writing for the Web" page.