Responsive Web Design (RWD)

Responsive Web Design optimizes how your pages are displayed for the device each visitor is using. Your site automatically adjusts its layout and behavior so people using smaller screens (e.g. smart phones) can easily navigate your pages.

On this page:

Overview

All UBCMS websites are automatically launched with Responsive Web Design (RWD) enabled. RWD is an approach to building Web pages which allows the pages to automatically adjust to the screen size of the viewer, not just by changing the size of components, but also by flexing where specific components are positioned. Some of this can be handled automatically, standardized for all of our websites, but often each site will need to make more specific decisions about their pages.

Why Do RWD?

Without RWD, sites simply shrink to fit a particular screen, like reducing the contents of a sheet of paper onto an index card. But the world looks much different in mobile. Even the most thoughtfully designed sites cannot maintain their utility when squeezed, unchanged, into a small space. Aware of these challenges, RWD behaves like a proud chameleon that struts how it has changed by repositioning a page’s key assets to maintain an ideal user interface across a range of devices.

On a desktop, your page’s assets have been arranged for easy accessibility, but users have to pan, scroll and pinch to find the same critical components when those pages are reduced to fit a smaller screen. RWD eliminates that need by moving those components to convenient points on a mobile device.

Best of all, RWD makes your site a one-size-fits-all experience for visitors. But optimizing your site for RWD requires work on your part. Before throwing the switch, site owners should consider how all their pages will perform in mobile. This requires a page-by-page inventory that scrutinizes your assets and evaluates your strategic objectives.

How RWD Changes Your Site

'burger' icon used as an RWD navigational element for small screen sizes.

'burger' icon used in mobile navigation

A series of changes occur automatically when someone visits an RWD-enabled UBCMS website using a small-screen device:

  • The header and heading font sizes become smaller.
  • Top navigation, search and left navigation merge into dropdown tools ("burgers").
  • The page becomes a single column, leading with the center well, then the right sidebar.
  • Multi-columns are stacked into a single column.
  • Images generally display smaller (but some may expand to fill the width of the screen).
  • The behavior of specific components changes:
    • Horizontal Slide Deck – flips, thumbnails move to bottom; gestures work for move forward/backward actions.
    • Vertical Slide Deck – collapses to a simpler stacked menu view, which expands as the user clicks through.

These changes all happen automatically—the device is told a different way to display what is otherwise the same content Desktop viewers would see. 

Currently, the smallest "break point" is 720 pixels. If you shrink an RWD-enabled page below this width in your browser, or view the page on a small-screened device, it will flip to the mobile version.  

Screens between 720 and 960 pixels (iPad Minis, iPads and other tablets) will now be zoomed out to show the full page instead of starting zoomed to 1:1 size with the right column obscured.  

When a standard three-column Web page is viewed through progressively smaller screens, the content becomes stacked as a series of breakpoints are reached.

how a simple three column page changes in response to smaller screen sizes.

When a multi-column home page is viewed through progressively smaller screens, the content becomes stacked as a series of breakpoints are reached.

how a multi-column home page changes in response to smaller screen sizes.
Live Examples of RWD-Enabled Sites

As sites become enabled, we will include them in our list of live sites.  Look for the asterisk (*).

Prepare Your Site for RWD

While your site will be launched with RWD enabled, you should still thoughtfully assess how your pages perform for smaller screen sizes. As with any project, start with a plan:

  • Review all pages in your site.
  • Review representative 'birds of a feather' pages assuming that these will inform changes needed (e.g. course descriptions).
  • Review high traffic pages or pages critical to conversions (e.g. home page or apply).
  • Audit pages with complex layouts.
  • Learn which of your pages are being viewed heavily by mobile users.

By auditing your site and creating a mitigation plan, you can identify the size and scope of changes needed to prepare your site for RWD.

RWD Preview Tools

The RWD Preview and Resizer tools will be very helpful to sites thjat are not yet RWD-enabled.
> Learn more in Additional Resources - How to Preview Your Site in RWD

Learn from Your Peers

Our RWD pilots (Law, UBIT and International Admissions) each took different approaches to the audit. Their lessons-learned and best practices can be viewed below in our Additional Resources - Master Classes.

Remediate Your Site

Once your audit is complete, your team needs to make any necessary adjustments before it is launched and RWD is enabled.

Spend your time thoughtfully!

Since this has such a big impact on your page effectiveness in mobile, we strongly encourage you to review and test how your site will function with RWD enabled, as simply turning on RWD does not necessarily mean your site is mobile-friendly or effective for your end users' experience.

  • Be sure to consider any additional components that may not have been part of your original site build. For example, sites do not automatically get a Mobile Menu, which is required to deliver site navigation on small screen devices.
  • Be mindful of pages that were intentionally hidden -- one of the settings is Hide in Mobile Navigation.
  • Consider adding Content Optimization Containers, which adjust content placement between large and small-screen views. (Specialist permissions are needed to work with these components.)

Additional Resources

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)