Responsive Web Design (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.

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.

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.  

As the new digital brand rolls out, new sites will be created RWD-enabled 'out of the box', but existing sites will likely need to make adjustments to the layout of their pages. By December 20, 2017, ALL SITES will have RWD enabled.

• Older sites that are not yet RWD enabled will need to audit for smaller-sized screen use and make any adjustments to their pages preferably long before the December deadline. Follow the steps below.
  
• Older, RWD-enabled sites are all set, but should still keep smaller-screened use in mind as you update your pages.
  
• Sites created on or after April 10, 2017, are RWD-enabled. Keep smaller-screened use in mind as you build out your pages.
• New sites that were fast-tracked into the UBCMS should also follow the steps below.
  

Older sites that are not yet RWD-enabled and brand new sites that were fast-tracked into the UBCMS should thoughtfully assess how their 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 (for example, 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 remediation plan, you can identify the size and scope of changes needed to prepare your site for RWD.

Once your audit is complete, your team needs to make any necessary adjustments before requesting that your published site have RWD 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.

When you are ready to turn on RWD for your site please fill out the form below and include the following:

• Your name
• Your role (if other than Site Owner)
• Your contact information
• Site URL
  
• Date you would like to have RWD turned on

Please also affirm the following:

• That you performed a Business and User Experience Audit
  • Did you at a minimum review the pages your users frequent most?
  • Did you review your home page?

• That you performed a Technical Audit
  • Did you review any snippets or embeds?
  • Did you review any components that were modified?

• Did you remediate any issues that were identified?

• Does your site rely on the old Horizontal or Vertical Slide Decks?